<template>
    <div class="" style="padding: 0">
      <el-select
        class="main-select-tree"
        ref="selectTree"
        v-model="value"
        style="width: 100%"
        clearable
        @clear="clearSelectInput"
      >
        <el-option
          v-for="item in formatData(treeData)"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          style="display: none"
        />
        <el-tree
          class="main-select-el-tree"
          ref="selecteltree"
          :data="formatTreeData(treeData)"
          node-key="id"
          highlight-current
          :props="defaultProps"
          @node-click="handleNodeClick"
          :current-node-key="value"
          :expand-on-click-node="true"
          default-expand-all
          :filter-node-method="filterNode"
        />
      </el-select>
    </div>
  </template>
      
      <script>
  export default {
    props: {
      selectValue: {
        type: String,
        default: "",
      },
      treeData: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        filterText: "",
        value: "",
        defaultProps: {
          children: "children",
          label: "label"
        },
      };
    },
    watch: {
      filterText(val) {
        this.$refs.selecteltree.filter(val);
      },
    },
    methods: {
      setTreeKey(key){
        this.$refs.selecteltree.setCurrentKey(key)
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 递归遍历数据
      formatData(data) {
        let options = [];
        const formatDataRecursive = (data) => {
          data.forEach((item) => {
            options.push({ label: item.categoryName, value: item.id });
            if (item.children && item.children.length > 0) {
              formatDataRecursive(item.children);
            }
          });
        };
        formatDataRecursive(data);
        return options;
      },
      formatTreeData(data){
        const formatDataRecursive = (data) => {
          data.forEach((item) => {
            item.label = item.categoryName;
            if (item.children && item.children.length > 0) {
              formatDataRecursive(item.children);
            }
          });
        };
        formatDataRecursive(data);
        return data;
      },
      // 点击事件
      handleNodeClick(node) {
        // if(node.hasOwnProperty('children')&&node.children.length) return;
        this.value = node.id;
        this.$refs.selectTree.blur();
        this.$emit('update:selectValue', {id:node.id,label:node.label});
      },
      // 清空事件
      clearSelectInput() {
        this.value = '';
        this.$emit('update:selectValue', {id:'',label:''});
        // 获取 el-tree 实例的引用
        const elTree = this.$refs.selecteltree;
        // 将当前选中的节点设置为 null
        elTree.setCurrentKey(null);
      },
    },
  };
  </script>
      <style>
  .main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
    font-weight: bold;
    color: #409eff;
  }
  .main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
    font-weight: bold;
    color: #409eff;
  }
  </style>