<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: '',
          //   name: '全部资源',
          // },
          {
            id: '1',
            name: '可见光',
          },
          {
            id: '2',
            name: '红外照片',
          },
          {
            id: '3',
            name: '变焦照片',
          },
          {
            id: '4',
            name: '广角照片',
          },
          {
            id: '5',
            name: '视频资源',
          },
          {
            id: '0',
            name: '其他文件',
          },
        ],
      },
    ];

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

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

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