<template>
  <div class="m-4 mr-0 overflow-hidden bg-white">
    <BasicTree
      ref="asyncExpandTreeRef"
      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
      :clickRowToExpand="false"
      :treeData="treeData"
      :fieldNames="{ key: 'id', title: 'name' }"
      @select="handleSelect"
    />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, nextTick, unref } from 'vue';
  import { BasicTree, TreeItem, TreeActionType } from '@/components/Tree';
  import { getChildrenTree } from '@/api/demo/system';
  import { isArray } from '@/utils/is';

  const emit = defineEmits(['select']);

  const treeData: any = ref([]);
  const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);

  async function fetch() {
    treeData.value = [
      {
        id: 'meitiku',
        name: '媒体库',
        children: [
          {
            id: 'allResource',
            name: '全部资源',
          },
          {
            id: 'wideAngle',
            name: '广角照片',
          },
          {
            id: 'zoom',
            name: '变焦照片',
          },
          {
            id: 'infrared',
            name: '红外照片',
          },
          {
            id: 'video',
            name: '视频资源',
          },
        ],
      },
      {
        id: 'achievementModel',
        name: '成果模型',
        children: [
          {
            id: '2d',
            name: '二维正摄',
          },
          {
            id: '3d',
            name: '三维模型',
          },
        ],
      },
      // {
      //   id: 'gas',
      //   name: '气体探测',
      // },
      // {
      //   id: 'vr',
      //   name: 'VR全景',
      // },
    ];

    // 显示到一级
    nextTick(() => {
      unref(asyncExpandTreeRef)?.filterByLevel(1);
    });
  }

  function handleSelect(keys) {
    emit('select', keys[0]);
  }

  onMounted(() => {
    fetch();
  });
  defineExpose({
    fetch,
  });
</script>
