<template>
  <ie-page>
    <z-paging ref="paging" v-model="list" :default-page-size="20" @query="handleQuery">
      <template #top>
        <ie-navbar :title="prevData.title" />
      </template>
      <view class="mt-20 mx-20 mb-30" v-for="item in list" :key="item.id">
        <ie-news-item :data="item" @click="handleClick(item)" />
      </view>
    </z-paging>
  </ie-page>
</template>
<script lang="ts" setup>
import { getNewsListNoToken } from '@/api/modules/news';
import { NewsItem } from '@/types/news';
import { useTransferPage } from '@/hooks/useTransferPage';
const { prevData, transferTo, routes } = useTransferPage();

const list = ref<NewsItem[]>([]);
const paging = ref<ZPagingInstance>();
const handleQuery = (pageNum: number, pageSize: number) => {
  uni.$ie.showLoading();
  getNewsListNoToken({
    ids: prevData.value.ids,
    pageNum,
    pageSize,
  }).then(res => paging.value?.completeByTotal(res.rows, res.total))
    .catch(() => paging.value?.complete(false))
    .finally(() => uni.$ie.hideLoading());
}
const handleClick = (item: NewsItem) => {
  transferTo(routes.newsDetail, {
    data: {
      id: item.id,
    }
  });
}
onLoad(() => {
  paging.value?.reload();
});
</script>
<style lang="scss" scoped></style>