<template>
  <div>
    <nav-bar
      title="新闻动态"
      :style="{ 'background-color': '#F7F7FA' }"
      :showSearchIcon="true"
      :path="{ path: '/Search', query: { type: 'news' } }"
    />
    <div class="mx-5 pt-3">
      <van-pull-refresh
        class="divide-y"
        v-model="refreshing"
        @refresh="onRefresh"
      >
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text=""
          @load="onLoad"
        >
          <news-list v-for="(item, n) in lists" :key="n" :info="item" />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import NavBar from "@/components/NavBar/index.vue";
import NewsList from "./NewsList/index.vue";
import { PullRefresh, List } from "vant";
import { getNewsList } from "@/service/NewsService/index";
export default defineComponent({
  components: {
    NavBar,
    NewsList,
    "van-pull-refresh": PullRefresh,
    "van-list": List,
  },
  setup() {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    let lists = ref([] as any);
    const pagination = reactive({
      page: 1,
      pageSize: 10,
      total: 0,
    });
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);

    const onLoad = () => {
      getLists();
    };
    const onRefresh = () => {
      // 清空列表数据
      finished.value = false;
      pagination.page = 1;

      lists.value = [];
      loading.value = true;
      onLoad();
    };
    function getLists() {
      if (refreshing.value) {
        lists.value = [];
        refreshing.value = false;
      }
      getNewsList({
        limit: pagination.pageSize,
        offset: (pagination.page - 1) * pagination.pageSize,
      }).then((res) => {
        lists.value.push(...res.data.items);
        pagination.total = res.data.total;
        pagination.page++;
        //
        loading.value = false;
        //
        if (lists.value.length >= pagination.total) {
          finished.value = true;
        }
      });
    }

    return {
      lists,
      loading,
      finished,
      refreshing,
      onLoad,
      onRefresh,
    };
  },
});
</script>

<style scoped>
.divide-y {
  min-height: calc(100vh - 46px);
}
</style>
