<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="flex flex-col h-screen">
    <z-paging
      ref="paging"
      use-virtual-list
      :force-close-inner-list="true"
      cell-height-mode="dynamic"
      @virtualListChange="virtualListChange"
      @query="queryList"
    >
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
      <template #top>
        <view class="relative h-max" hover-class="none" :hover-stop-propagation="false">
          <Navbar
            title="高考头条"
            left-arrow
            @click-left="navigatorBack"
            safeAreaInsetTop
            :bordered="false"
            custom-class="bg-transparent! z-[99]"
          />
        </view>
      </template>
      <view
        class="item-wrapper"
        :id="`zp-id-${item.zp_index}`"
        :key="item.zp_index"
        v-for="item in newsList"
        @click="itemClick(item, item.zp_index)"
      >
        <view class="flex flex-col items-left p-[32rpx] w-full">
          <text class="font-semibold text-[28rpx] text-[#1F2329] max-w-full text-left">
            {{ item.title }}
          </text>
          <view
            class="mt-[24rpx] flex justify-between items-center text-[#8F959E] font-normal font-normal w-full"
          >
            <text class="text-[24rpx]">来源:&nbsp;{{ item.source }}</text>
            <text class="text-[22rpx]">{{ item.createTime }}</text>
          </view>
        </view>
        <view class="w-full h-[2rpx] bg-[#eee]" hover-class="none"></view>
      </view>
    </z-paging>

    <view class="flex-1 overflow-auto pb-safe"></view>
  </view>
</template>

<script lang="ts" setup>
import { getNewsList } from '@/service/index/api'
import { useUserStore } from '@/store/user'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'

const navigatorBack = () => {
  uni.navigateBack()
}

const userStore = useUserStore()

const newsList = ref<any[]>([])
const paging = ref<any>(null)

const virtualListChange = (_vList) => {
  newsList.value = _vList
}

const itemClick = (item, index) => {
  uni.navigateTo({
    url: `/pages-sub/home/news/index?newsId=${item.id}`,
  })
}

const queryList = (page: number, pageSize: number) => {
  getNewsList({
    CategoryId: 1,
    provinceCode: userStore.userInfo.city.code,
    PageIndex: page,
    PageSize: pageSize,
  }).then((res) => {
    paging.value?.complete((res.result as { data: any[] }).data)
  })
}
</script>

<style lang="scss" scoped>
.item-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
}
</style>
