<template>
  <KlNavTab active="工具箱" />
  <!-- 搜索 -->
  <KlSearch @search="search"></KlSearch>
  <div v-loading="loading" class="ma-auto mt-[20px] w-[1440px] flex justify-center gap-[60px]">
    <div class="left w-[821px]">
      <!-- <img src="~/assets/images/banner2.png" alt="" srcset="" class="h-[284px] w-[100%]" /> -->
      <el-form ref="formRef" :model="pageReq" label-width="110px" size="large" inline>
        <el-form-item label-width="110px" label="软件分类：" prop="categoryId" :rules="{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }">
          <!-- <el-select v-model="form.categoryId" placeholder="请选择软件分类" class="w-[361px]!" multiple>
          <el-option v-for="(item, index) in projectTypeList" :key="index" :label="item.name" :value="item.id" />
        </el-select> -->
          <el-cascader
            v-model="pageReq.categoryId"
            class="w-[280px]!"
            :options="projectTypeList"
            :props="cascaderProps"
            clearable
            collapse-tags
            @change="handleCurrentChange(1)"
          />
        </el-form-item>
        <el-form-item label-width="110px" label="分类：" prop="sourceType" :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }">
          <el-radio-group v-model="pageReq.sourceType" @change="handleCurrentChange(1)">
            <el-radio :label="0">原创开发</el-radio>
            <el-radio :label="1">转载分享</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="box-border border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[28px] py-[17px]">
        <div @click="handleClick(item)" v-for="item in pageRes?.list" :key="item.id" class="mt-[20px] flex border-b-[1px] border-b-[#eee] border-b-solid pb-[20px] cursor-pointer">
          <div class="h-[142px] w-[200px] text-center">
            <el-image :src="item.iconUrl" alt="" srcset="" class="max-w-[100%] rd-[4px]" fit="cover" />
          </div>
          <div class="ml-[25px] flex-1">
            <div class="text-[15px] text-[#333333] font-normal">{{ item.title }}</div>
            <div class="mt-[8px] text-[14px] text-[#999999] font-normal line-clamp-3" :title="item.description">{{ item.description }}</div>
            <div class="mt-[10px] flex items-center justify-between">
              <div class="flex items-center">
                <div class="flex items-center text-[14px] text-[#666666] font-normal">
                  <img src="~/assets/images/look.png" alt="" srcset="" class="mr-[4px] h-[14px] w-[20px]" />{{ item.previewPoint }}
                </div>
                <div class="ml-[26px] flex items-center text-[14px] text-[#666666] font-normal">
                  <img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[14px] w-[16px]" /> {{ item.commentsPoint }}
                </div>
                <div class="ml-[20px]">
                  <div v-for="(v, index) in item.labels" :key="index" class="mr-[10px] inline-block text-[14px] text-[#1A65FF] font-normal">#{{ v }}</div>
                </div>
              </div>
              <div class="text-[14px] text-[#999999] font-normal">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
            </div>
          </div>
        </div>
        <!-- 暂无数据 -->
        <div v-if="pageRes?.list.length === 0" class="mt-[10px] flex items-center justify-center">
          <!-- <div class="text-16px text-[#999999] font-normal">暂无数据</div> -->
          <el-empty v-if="!pageRes.list.length" :image="emptyImg"></el-empty>
        </div>
        <el-pagination
          v-if="pageRes?.list.length"
          v-model:current-page="pageReq.pageNo"
          :page-size="pageReq.pageSize"
          layout="total, prev, pager, next"
          :total="pageRes?.total"
          :page-sizes="[10, 20, 30]"
          class="mt-[20px]"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div class="right w-[398px]">
      <div class="box-border border border-[#EEEEEE] rounded-[10px] border-solid bg-[#FFFFFF] pa-[16px]">
        <div class="flex items-center text-[14px] text-[#333333] font-normal">
          <div class="mr-[14px] h-[16px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div>
          热门排行
        </div>
        <div v-for="item in recommendList" :key="item.id" class="mt-[20px] text-[14px] text-[#666] font-normal">{{ item.title }}</div>
      </div>
      <!--  -->
      <!-- <div class="mt-20px box-border w-398px border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
        <div class="mb-20px flex items-center text-16px text-[#333333] font-normal">
          <div class="mr-14px h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
          标签列表
        </div>
        <div class="flex flex-wrap">
          <div
            v-for="item in 10"
            :key="item"
            class="mb-19px mr-26px box-border border border-[#D7D7D7] rounded-4px border-solid px-8px py-12px text-16px text-[#1A65FF] font-normal"
            ># 标签名称1</div
          >
        </div>
      </div> -->
      <!--  -->
      <!-- <div class="mt-20px box-border w-398px border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
        <div class="mb-20px flex items-center text-16px text-[#333333] font-normal">
          <div class="mr-14px h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
          猜你喜欢
        </div>
        <div
          v-for="item in 4"
          :key="item"
          class="mt-16px flex items-center border-b-1px border-b-[#eee] border-b-solid pb-16px text-16px text-[#333333] font-normal"
        >
          <img src="~/assets/images/aucad.png" alt="" srcset="" class="h-68px w-110px" />
          <div class="ml-20px text-16px text-[#333333] font-normal">Stable Diffusion 商业变现与 绘画大模型多场景实战</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import KlNavTab from '~/components/kl-nav-tab/index.vue'
  import { page } from '~/api/toolbox/index.js'
  import type { TpageReq, TpageRes } from '~/api/toolbox/types'
  import { reactive, ref } from 'vue'
  import KlSearch from '~/pages/toolbox/components/search.vue'
  import { getRelationRecommend } from '~/api/drawe-detail/index'
  import type { ProjectDrawPageRespVO } from '~/api/drawe-detail/types'
  import { parent } from '~/api/upnew/index'
  import emptyImg from '~/assets/images/empty.png'
  import dayjs from 'dayjs'

  const cascaderProps = { multiple: false, label: 'name', value: 'id', emitPath: false }

  const pageReq = reactive({
    pageNo: 1,
    pageSize: 10,
    title: '',
    categoryId: undefined,
    sourceType: 0,
  })

  // const pageRes = ref<TpageRes>({
  //   list: [],
  //   total: 0,
  // })

  const { data: pageRes, refresh: getPage } = await useAsyncData(
    `draw-page-toobox-list`,
    async () => {
      const res = await page(pageReq)
      if (res.code === 0) {
        return res.data
      }
      return {
        list: [],
        total: 0,
      }
    },
    {
      immediate: true,
    }
  )

  const loading = ref(false)
  // const getPage = () => {
  //   loading.value = true
  //   page(pageReq)
  //     .then((res) => {
  //       if (res.code === 0) {
  //         pageRes.value = res.data
  //       }
  //     })
  //     .finally(() => {
  //       loading.value = false
  //     })
  // }

  // getPage()

  const handleCurrentChange = (page: number) => {
    pageReq.pageNo = page
    getPage()
  }

  const handleSizeChange = (size: number) => {
    pageReq.pageSize = size
    pageReq.pageNo = 1
    getPage()
  }

  const search = (val?: string) => {
    pageReq.pageNo = 1
    pageReq.title = val || ''
    getPage()
  }

  const handleClick = (item: ProjectDrawPageRespVO) => {
    navigateTo(`/toolbox-detail`)
  }

  const { data: recommendList } = await useAsyncData(`draw-recommend-list-getRelationRecommend`, async () => {
    const res = await getRelationRecommend({
      type: 4,
    })
    return res.data
  })

  const { data: projectTypeList } = await useAsyncData(`project-type-list`, async () => {
    const res = await parent({
      type: 3,
      parentId: 0,
    })
    return res.data
  })
</script>
