<!--
 * @Author: ysh
 * @Date: 2024-04-18 15:14:45
 * @LastEditors: wrh
 * @LastEditTime: 2024-07-04 13:06:39
-->
<template>
  <div>
    <el-scrollbar style="height:400px">
      <el-tree class="filter-tree" icon-class="el-icon-caret-right" :data="treeData" :props="defaultProps"
        @node-click="handleNodeClick" default-expand-all highlight-current ref="tree">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <!-- <svg-icon icon-class="folder" class="svgIcon" style="margin-right:5px;" /> -->
          <svg-icon v-if="!data.children" icon-class="file" class="svgIcon" />
          <svg-icon v-else-if="node.expanded" icon-class="folder" class="svgIcon" />
          <svg-icon v-else icon-class="folder_close" class="svgIcon" />
          <span class="fontSize14" :title="node.label || '-'">{{ node.label }}</span>
        </span>
      </el-tree>
      <el-divider></el-divider>

    </el-scrollbar>
    <div class="text-center mt20">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="$emit('close')">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    definitionList: {
      type: Array,
      require: true,
    },
  },
  watch: {
    definitionList(newval, oldval) {
      this.initTree();
    },
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      clickNode: {}
    };
  },
  mounted() { },
  methods: {
    initTree() {
      this.treeData = [
        {
          name: "经营类",
          children: [],
        },
        {
          name: "生产类",
          children: [],
        },
        {
          name: "财务类",
          children: [],
        },
        {
          name: "办公类",
          children: [],
        },
        {
          name: "考核类",
          children: [],
        },
      ];
      for (let i of this.definitionList) {
        if (i.category == "business") {
          this.treeData[0].children.push(i);
        }
        else if (i.category == "project") {
          if (i.name != "项目预算" && i.name != "安全交底" && i.name != "技术交底" && i.name != "技术方案")
            this.treeData[1].children.push(i);
        } else if (i.category == "finance") {
          this.treeData[2].children.push(i);
        } else if (i.category == "oa") {
          this.treeData[3].children.push(i);
        } else if (i.category == "assess") {
          this.treeData[4].children.push(i);
        }
      }
    },
    handleNodeClick(data) {
      this.clickNode = data
    },
    confirm() {
      this.$emit('confirm', this.clickNode)
    }
  },
};
</script>

<style lang="scss" scoped>
.svgIcon {
  margin-right: 5px;
}
</style>
