<template>
  <div class="select-tree-template">
    <el-select
      v-model="selectValue"
      :clearable="clearable"
      :collapse-tags="selectType == 'multiple'"
      :multiple="selectType == 'multiple'"
      class="vab-tree-select"
      value-key="id"
      @clear="clearHandle"
      @remove-tag="removeTag"
    >
      <el-option :value="selectKey">
        <el-tree
          id="treeOption"
          ref="treeOption"
          :current-node-key="currentNodeKey"
          :data="treeOptions"
          :default-checked-keys="defaultSelectedKeys"
          :default-expanded-keys="defaultSelectedKeys"
          :highlight-current="true"
          :props="defaultProps"
          :show-checkbox="selectType == 'multiple'"
          node-key="id"
          @check="checkNode"
          @node-click="nodeClick"
        ></el-tree>
      </el-option>
    </el-select>
  </div>
</template>

<script>
  export default {
    name: "SelectTreeTemplate",
    props: {
      /* 树形结构数据 */
      treeOptions: {
        type: Array,
        default: () => {
          return [];
        },
      },
      /* 单选/多选 */
      selectType: {
        type: String,
        default: () => {
          return "single";
        },
      },
      /* 初始选中值key */
      selectedKey: {
        type: String,
        default: () => {
          return "";
        },
      },
      /* 初始选中值name */
      selectedValue: {
        type: String,
        default: () => {
          return "";
        },
      },
      /* 可做选择的层级 */
      selectLevel: {
        type: [String, Number],
        default: () => {
          return "";
        },
      },
      /* 可清空选项 */
      clearable: {
        type: Boolean,
        default: () => {
          return true;
        },
      },
    },
    data() {
      return {
        defaultProps: {
          children: "children",
          label: "name",
        },
        defaultSelectedKeys: [], //初始选中值数组
        currentNodeKey: this.selectedKey,
        selectValue:
          this.selectType == "multiple"
            ? this.selectedValue.split(",")
            : this.selectedValue, //下拉框选中值label
        selectKey:
          this.selectType == "multiple"
            ? this.selectedKey.split(",")
            : this.selectedKey, //下拉框选中值value
      };
    },
    mounted() {
      const that = this;
      this.initTree();
    },
    methods: {
      // 初始化树的值
      initTree() {
        const that = this;
        if (that.selectedKey) {
          that.defaultSelectedKeys = that.selectedKey.split(","); // 设置默认展开
          if (that.selectType == "single") {
            that.$refs.treeOption.setCurrentKey(that.selectedKey); // 设置默认选中
          } else {
            that.$refs.treeOption.setCheckedKeys(that.defaultSelectedKeys);
          }
        }
      },
      // 清除选中
      clearHandle() {
        const that = this;
        this.selectValue = "";
        this.selectKey = "";
        this.defaultSelectedKeys = [];
        this.currentNodeKey = "";
        this.clearSelected();
        if (that.selectType == "single") {
          that.$refs.treeOption.setCurrentKey(""); // 设置默认选中
        } else {
          that.$refs.treeOption.setCheckedKeys([]);
        }
      },
      /* 清空选中样式 */
      clearSelected() {
        const allNode = document.querySelectorAll("#treeOption .el-tree-node");
        allNode.forEach((element) => element.classList.remove("is-current"));
      },
      // select多选时移除某项操作
      removeTag(val) {
        this.$refs.treeOption.setCheckedKeys([]);
      },
      // 点击叶子节点
      nodeClick(data, node, el) {
        if (data.rank >= this.selectLevel) {
          this.selectValue = data.name;
          this.selectKey = data.id;
        }
      },
      // 节点选中操作
      checkNode(data, node, el) {
        const checkedNodes = this.$refs.treeOption.getCheckedNodes();
        const keyArr = [];
        const valueArr = [];
        checkedNodes.forEach((item) => {
          if (item.rank >= this.selectLevel) {
            keyArr.push(item.id);
            valueArr.push(item.name);
          }
        });
        this.selectValue = valueArr;
        this.selectKey = keyArr;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow-y: auto;
  }

  .el-select-dropdown__item.selected {
    font-weight: normal;
  }

  ul li > .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
  }

  .el-tree-node__label {
    font-weight: normal;
  }

  .el-tree > .is-current .el-tree-node__label {
    font-weight: 700;
    color: #409eff;
  }

  .el-tree > .is-current .el-tree-node__children .el-tree-node__label {
    font-weight: normal;
    color: #606266;
  }
</style>
<style lang="scss">
  /* .vab-tree-select{
      .el-tag__close.el-icon-close{
        width:0;
        overflow:hidden;
      }
    } */
</style>