<template>
  <div>
    <nav-bar title="政策支持" :style="{ 'background-color':'#F7F7FA'}" :showSearchIcon="true" :path="{path: '/Search', query: {type: 'policy'}}" />
    <div class=" mx-5 pt-3 divide-y">
      <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text=""
          @load="onLoad">
          <policy-card v-for="n in lists" :key="n.uuid" :info="n" class=""/>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { List, PullRefresh } from 'vant'
import NavBar from "@/components/NavBar/index.vue"
import PolicyCard from '@/components/PolicyCard/index.vue'
import { getPolicyList } from '@/service/NewsService/index'

export default defineComponent({
  components:{
    NavBar,
    PolicyCard,
    'van-list': List,
    'van-pull-refresh': PullRefresh
  },
  
  setup () {
    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;
      }
      getPolicyList({
        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,
      pagination,
      loading,
      finished,
      refreshing,
      onLoad,
      onRefresh
    }
  }
})
</script>

<style scoped>

</style>