<template>
  <view>
    <view v-if="searchMode">
      <uv-cell-group :border="false">
        <uv-cell v-for="(item, index) in data" :key="item.id" icon="" :title="item.name" :isLink="true" :border="false"
          arrow-direction="right" @click="handleNodeClick(item)"></uv-cell>
      </uv-cell-group>
    </view>
    <template v-else>
      <view v-for="(item, index) in data" :key="index">
        <view class="px-30 py-20 text-30 font-bold">{{ item.name }}</view>
        <uv-collapse :border="false">
          <uv-collapse-item v-for="(child, index) in item.children" :key="child.id" :border="true" :padding="0">
            <template #title="{ expanded }">
              <view class="flex items-center justify-between">
                <view class="flex items-center gap-10">
                  <uv-icon name="arrow-right" size="14" color="#888" custom-class="transition-transform duration-300"
                    :class="{ 'rotate-90': expanded }" />
                  <view>{{ child.name }}</view>
                </view>
                <view class="text-26 text-fore-light">{{ child.children?.length }}个专业</view>
              </view>
            </template>
            <template #right-icon>
              <view></view>
            </template>
            <!-- 使用 v-if 延迟渲染，只在展开时渲染内容，提升初始加载性能 -->
            <!-- 一旦渲染过就保持显示，避免收起时立即消失 -->
            <template #default="{ expanded, hasRendered }">
              <view v-if="expanded || hasRendered" class="bg-back-light">
                <uv-cell-group :border="false">
                  <uv-cell v-for="(grandchild, index) in child.children" :key="grandchild.id" icon=""
                    :title="grandchild.name" :isLink="true" :border="false" arrow-direction="right"
                    @click="handleNodeClick(grandchild)">
                    <template #title>
                      <view class="flex items-center gap-10 pl-40">
                        <view class="text-30 text-fore-title">{{ grandchild.name }}</view>
                      </view>
                    </template>
                  </uv-cell>
                </uv-cell-group>
              </view>
            </template>
          </uv-collapse-item>
        </uv-collapse>
      </view>
    </template>
  </view>

</template>
<script lang="ts" setup>
import { Career } from '@/types';

const props = defineProps<{
  data: Career.CareerItem[];
  searchMode: boolean;
}>();

const emit = defineEmits<{
  (e: 'node-click', item: Career.CareerItem): void;
}>();
const handleNodeClick = (item: Career.CareerItem) => {
  emit('node-click', item);
}
</script>
<style lang="scss" scoped></style>