<template>
  <treeList v-for="model in list" v-bind="$attrs" :model="model" :key="model.id" @detail-node="onDetail">
    <template #icon="slotProps">
      <slot name="icon" v-bind="slotProps"></slot>
    </template>
    <template #operation="slotProps">
      <slot name="operation" v-bind="slotProps"></slot>
    </template>
  </treeList>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import treeList from './treeList.vue';
  const emit = defineEmits(['detailNode']);
  interface IFileSystem {
    id: string;
    title: string;
    pid: string;
    isFolder: boolean;
    isAdd: boolean;
    children?: IFileSystem[];
  }
  const props = withDefaults(
    defineProps<{
      list: IFileSystem[];
    }>(),
    {}
  );
  // 递归寻找父组件
  function findParent(pid, Tree) {
    let targetNode = null;
    function find(item, flattenTree) {
      flattenTree.find((ele) => {
        if (ele.id == pid) {
          targetNode = ele;
          return true;
        } else {
          if (ele.children) {
            find(pid, ele.children);
          }
        }
      });
    }
    find(pid, Tree);
    return targetNode.children;
  }
  // 删除
  const onDetail = (node) => {
    emit('detailNode', {
      ...node,
      eventType: 'detail',
    });
  };
</script>
<style scoped></style>
