<template>
  <mescroll-body @init="mescrollInit" :down="{ use: true, minAngle: angle }" @down="downCallback" @up="upCallback">
    <view class="travel-tips-container">
      <u-tabs
        v-model="tabActive"
        :list="list"
        :is-scroll="false"
        inactive-color="#333"
        active-color="#333"
        :bar-style="{
          backgroundColor: '#4a8cfe'
        }"
        @change="handleTabChange"
      ></u-tabs>
      <view class="travel-tips-list">
        <view class="tips-list-item" v-for="(item, index) in listData" :key="index" @click="toDetail(item.id)">
          <view class="title u-line-2">{{ item.title }}</view>
          <view class="content u-line-3">
            {{ item.content }}
          </view>
          <view class="time">{{ item.publishAt }}</view>
        </view>
      </view>
    </view>
  </mescroll-body>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'
import { getParkServiceNoticeList } from '@/api/home'
import { useListLoader } from '@/composables/useListLoader'

const angle = ref(45)
// 监听页面滚动
onPageScroll((e) => {
  if (e.scrollTop > 80) {
    angle.value = 90
  } else {
    angle.value = 45
  }
})

const list = ref([
  { name: '路况信息', status: 1 },
  { name: '优惠促销', status: 2 },
  { name: '天气预警', status: 3 }
])
const tabActive = ref(0)

// 切换tab
const handleTabChange = (val: any) => {
  tabActive.value = val
  params.value.categoryId = list.value[tabActive.value].status
  handleSearch()
}

// 跳转详情
const toDetail = (id: string) => {
  uni.navigateTo({
    url: '/base/travel/details?id=' + id
  })
}

// 列表加载
const { listData, upCallback, downCallback, handleSearch, mescrollInit, params } = useListLoader({
  apiFn: getParkServiceNoticeList,
  initialParams: {
    categoryId: list.value[tabActive.value].status
  }
})
</script>

<style lang="scss" scoped>
.travel-tips-container {
  box-sizing: border-box;
  .travel-tips-list {
    width: 694rpx;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 35rpx;
    .tips-list-item {
      width: 100%;
      border-radius: 14rpx;
      box-sizing: border-box;
      padding: 33rpx;
      background-color: #fff;
      margin-bottom: 24rpx;
      .title {
        font-size: 28rpx;
        color: #333;
        line-height: 42rpx;
        font-weight: 500;
        margin-bottom: 24rpx;
      }
      .content {
        font-size: 22rpx;
        color: #333;
        line-height: 33rpx;
        margin-bottom: 22rpx;
      }
      .time {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
}
</style>
