<template>
  <div class="relative mt-[34px] w-[100%]">
    <KlTabBar v-model="query.source" :data="tabBar" />
    <KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
    <div class="absolute right-[0px] top-[0px] text-[16px] text-[#999999] font-normal"
      >共<span class="color-[#1A65FF]">{{ result?.total }}</span
      >个筛选结果</div
    >
    <div class="content mt-[10px]">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in result?.list" :key="index" :span="6">
          <CardPicture :item-info="item" />
        </el-col>
      </el-row>
      <el-empty v-if="!result?.list.length" description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import KlTabBar from '~/components/kl-tab-bar/v3/index.vue'
  import CardPicture from '~/components/kl-card-picture/index.vue'
  import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
  import { ref } from 'vue'
  import type { pageRes } from '~/api/upnew/types'

  const level = ref([
    {
      id: '0',
      name: '图纸库',
      isChildren: false,
    },
  ])

  const result = defineModel<pageRes| null>('modelValue', {
    required: true,
  })
  const query = defineModel<any>('query', {
    required: true,
  })

  const tabIndex = ref(-1)
  const tabBar = ref([
    {
      label: '图纸推荐',
      value: -1,
    },
    {
      label: '原创图纸',
      value: 1,
    },
    {
      label: '最新上传',
      value: 2,
    },
  ])
</script>

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