<template>
  <div class="box-border w-[100%] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[20px] py-[26px]">
    <div class="mb-[10px] flex items-start">
      <div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">软件分类</div>
      <div class="ml-[30px] mt-[-6px] flex flex-wrap">
        <div
          v-for="(item, index) in projectTypeList"
          :key="index"
          class="mb-[8px] mr-[26px] cursor-pointer rounded-[15px] px-[15px] py-[6px] text-[14px] text-[#666666] font-normal"
          :class="item.id === query ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''"
          @click="handleClick(item)"
          >{{ item.name }}</div
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { parent } from '~/api/upnew/index'
  import type { pageReq } from '~/api/upnew/types'
  import { getDictTree } from '~/api/home/index'
  import { ArrowRight } from '@element-plus/icons-vue'

  const props = defineProps({
    type: {
      type: Number,
      default: 1,
    },
    id: {
      type: String,
      default: '',
    },
    groundId: {
      type: String,
      default: '',
    },
  })

  const query = defineModel<string | undefined>('modelValue', {
    required: true,
  })

  // 服务端渲染兼容方案：顺序执行异步操作
  // 1. 先获取面包屑数据（已在上面通过useAsyncData获取）

  // 2. 顺序获取分类下拉框数据
  // 创建一个函数来获取分类数据，确保服务端渲染时能获取到数据
  const getProjectTypeList = async () => {
    try {
      // 获取分类数据
      const res = await parent({
        type: 3,
        parentId: 0,
      })
      const all = [{ id: '-1', name: '全部' }]
      return [...all, ...res.data]
    } catch (error) {
      return []
    }
  }

  // 使用useAsyncData获取分类列表，确保服务端渲染兼容性
  const { data: projectTypeList } = await useAsyncData(
    `projectType-draw-toolbox-${props.type}-${query.value}}`,
    getProjectTypeList,
    { server: true } // 确保在服务端执行
  )

  const handleClick = (row: any) => {
    query.value = row.id
  }

  const handleClickBread = (row: any, index: number) => {
    query.value = row.id
  }
</script>
