<template>
  <!-- 导航 -->
  <SeoHead title="工程设计文本下载_CAD设计图纸资源库" />
  <KlNavTab active="文本" :type="2" />
  <div class="ma-auto w-[1440px]">
    <!-- 图纸分类 -->
    <KlWallpaperCategory v-model="query" v-model:level="level" :type="2" />
    <!-- 推荐栏目 -->
    <RecommendedColumnsV2 v-model="query" v-model:result="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="[12, 24, 48]"
        :total="result?.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handeChangeSize"
        @current-change="handeChangeCurrent"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
  import KlNavTab from '~/components/kl-nav-tab/index.vue'
  import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
  import RecommendedColumnsV2 from '~/components/text-components/RecommendedColumnsV2.vue'
  // import FeaturedSpecials from './components/FeaturedSpecials.vue'

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

  const route = useRoute()
  const level = ref(
    route.query.level
      ? JSON.parse(route.query.level as string)
      : [
          {
            id: -1,
            name: '文本库',
            isChildren: false,
          },
        ]
  )

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

  // 如果id存在，则设置projectType
  if (level.value.length) {
    // query.projectType = level.value[level.value.length - 1].id || ''
  }

  const { data: result } = useAsyncData(
    `draw-page-list-${query.value.projectType}-${query.value.editions}-${query.value.source}-${query.value.pageNo}-${query.value.pageSize}`,
    async () => {
      const res = await page({
        ...query.value,
        editions: query.value.editions === '-1' ? '' : query.value.editions,
        source: query.value.source === -1 ? '' : query.value.source,
        projectType: query.value.projectType === '-1' ? '' : query.value.projectType,
      })
      return res.data
    },
    {
      immediate: true,
    }
  )

  // const getPage = () => {
  //   page(query).then((res) => {
  //     const { data, code } = res
  //     if (code === 0) {
  //       result.list = data.list
  //       result.total = data.total
  //     }
  //   })
  // }

  // getPage()

  const handeChangeSize = (val: number) => {
    query.value.pageSize = val
    // query.pageNo = 1
    // getPage()
    navigateTo(`/text/${query.value.projectType}/${query.value.pageNo}/${val}/${query.value.editions}/${query.value.source}`)
  }

  const handeChangeCurrent = (val: number) => {
    query.value.pageNo = val
    // getPage()
    navigateTo(`/text/${query.value.projectType}/${val}/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
  }

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