<template>
  <div class="mt-[34px] w-[100%]">
    <KlTabBar v-model="query.type" :data="tabBar" :show-icon="true" />

    <div class="content mt-[10px]">
      <el-row :gutter="20">
        <el-col v-for="i in recommendTopList" :key="i.id" :span="6">
          <CardPicture :item-info="i" />
        </el-col>
      </el-row>
    </div>
    <!-- 暂无数据 -->
    <el-empty v-if="recommendTopList?.length === 0" description="暂无数据"></el-empty>
    <!-- <div v-else class="cursor-pointer text-right text-16px text-[#1A65FF] font-normal" @click="handleClick"> 查看更多 >> </div> -->
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue'
  import KlTabBar from '~/components/kl-tab-bar/index.vue'
  import CardPicture from '~/components/kl-card-picture/index.vue'
  import { recommendTop } from '~/api/home/index'
  import type { ProjectDrawPageRespVO } from '~/api/home/type'

  const query = reactive({
    type: 1,
    projectType: 0,
    isDomestic: 1,
    limit: 8,
  })

  const tabBar = ref([
    {
      label: '推荐图纸',
      value: 1,
    },
    {
      label: '推荐模型',
      value: 3,
    },
    {
      label: '推荐文本',
      value: 2,
    },
  ])

  // const recommendTopList = ref<ProjectDrawPageRespVO[]>([])
  // const getRecommendTop = () => {
  //   // @ts-ignore
  //   recommendTop(query).then((res) => {
  //     if (Array.isArray(res.data) && res.data.length > 0) {
  //       recommendTopList.value = res.data
  //     }
  //   })
  // }

  const { data: recommendTopList, refresh: getRecommendTop} = useAsyncData('recommendTop', async () => {
    // @ts-ignore
    const res = await recommendTop(query)
    return res.data || []
  })


  const handleClick = () => {
    if (query.type === 1) {
      navigateTo('/drawe')
    } else if (query.type === 2) {
      navigateTo('/text')
    } else {
      navigateTo('/model')
    }
  }

  watch(
    () => query.type,
    (val) => {
      if (val) {
        getRecommendTop()
      }
    }
  )
</script>

<style lang="scss" scoped></style>
