<template>
  <!-- 导航 -->
  <KlNavTab active="国外专区" />
  <!-- banneer提示 -->
  <BannerTips />
  <div class="ma-auto w-[1440px]">
    <!-- 图片展示鼠标移上去展示提示语 -->
    <!-- <ImageTips /> -->
    <!-- 推荐栏目 -->
    <RecommendedColumnsV2 v-model:query="query" v-model="result"></RecommendedColumnsV2>
    <!-- 精选专题 -->
    <!-- <FeaturedSpecials></FeaturedSpecials> -->
    <!-- 分页 -->
    <div class="mt-[10px] flex justify-center">
      <el-pagination
        v-model:current-page="query.pageNo"
        v-model:page-size="query.pageSize"
        :page-sizes="[10, 20, 30]"
        :total="result?.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleChangeSize"
        @current-change="handleChangeCurrent"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
  import KlNavTab from '~/components/kl-nav-tab/index.vue'
  import RecommendedColumnsV2 from './components/RecommendedColumnsV2.vue'
  // import FeaturedSpecials from './components/FeaturedSpecials.vue'
  import BannerTips from './components/BannerTips.vue'
  // import ImageTips from './components/ImageTips.vue'

  import { reactive, watch } from 'vue'
  import { page } from '~/api/upnew/index'
  import type { pageRes, pageReq } from '~/api/upnew/types'

  const query = reactive<pageReq>({
    pageNo: 1,
    pageSize: 10,
    projectType: '',
    editions: '',
    source: '',
    type: 1,
  })
  // const result = reactive<pageRes>({
  //   list: [],
  //   total: 0,
  // })

  const {data:result, refresh:getPage } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
    const res = await page(query)
    return res.data
  })
  // const getPage = () => {
  //   page(query).then((res) => {
  //     const { data, code } = res
  //     if (code === 0) {
  //       result.list = data.list
  //       result.total = data.total
  //     }
  //   })
  // }

  // getPage()

  const handleChangeSize = (val: number) => {
    query.pageSize = val
    query.pageNo = 1
    getPage()
  }

  const handleChangeCurrent = (val: number) => {
    query.pageNo = val
    getPage()
  }

  watch([() => query.projectType, () => query.editions, () => query.source], (val) => {
    if (val) {
      getPage()
    }
  })
</script>
<style lang="scss" scoped>
  :deep(.el-pagination) {
    .el-input__inner {
      text-align: center !important;
    }
  }
</style>
