<template>
  <div class="comp-content">
    <TreeTable :tableName="tableName" :data="treeData" v-bind="$attrs" >
      <template #nodeType="{ row }">
        {{ allNodeTypeMap[row.nodeType] }}
      </template>
      <template #unit="{ row }">
        {{ PERFORMANCE_UNIT.O[row.unit] }}
      </template>
      <template #nodeName="{ row }">
        <div class="node-name">
          <el-icon v-if="row.nodeType === NODE_TYPE.TASK" :size="16" class="blue"><Document /></el-icon>
          <el-icon v-else-if="row.nodeType === NODE_TYPE.PERFORMANCE" :size="16" class="blue"><Operation /></el-icon>
          <el-icon v-else :size="16" class="blue"><Folder /></el-icon>
          <span class="name">{{ row.nodeName }}</span>
        </div>
      </template>
      <template v-for="(name) in Object.keys($slots)" :key="name" #[name]="scope">
        <slot :name="name" v-bind="scope" />
      </template>
    </TreeTable>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import TreeTable from '@/components/common/table/treeTable.vue';
import { Folder, Document, Operation } from '@element-plus/icons-vue';
import { NODE_TYPE } from '@/utils/enum/node';
import { allNodeTypeMap } from '@/utils/project';
import { useDict } from '@/utils/useDict';

const { PERFORMANCE_UNIT } = useDict('PERFORMANCE_UNIT');

interface Props {
  tableName: string;
  data: any;
}

const props = withDefaults(defineProps<Props>(), {
  tableName: '',
  data: [],
});

const treeData = ref<any>([]);

watch(() => props.data, (val: any) => {
  treeData.value = treeDataFormatFun(val, [], '0');
});

const treeDataFormatFun = (data: any, build: any, pId: any) => {
  data.forEach((item: any) => {
    item.parentId = pId;
    build.push(item);
    if (item.children && item.children.length > 0) {
      treeDataFormatFun(item.children, build, item.uuid);
    }
  });
  return build;
};
</script>

<style lang="scss" scoped>
.comp-content {
  .node-name {
    display: flex;
    align-items: center;
    .blue {
      color: var(--el-color-primary);
    }
    .name {
      padding-left: 4px;
    }
  }
}
</style>
