<!--
 注意传递的id 和 treedata 数据的id 数据类型是否一致
-->
<template>
  <div class="app-container">
    <el-select
      ref="selectTree"
      v-model="selectTreeValue"
      class="main-select-tree"
      :style="{ width: '100%' }"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        style="display: none"
        :value="item.value"
      />
      <el-tree
        ref="selecteltree"
        class="universal-tree-select"
        :current-node-key="value"
        :data="treeData"
        default-expand-all
        :expand-on-click-node="expandOnClickNode"
        highlight-current
        :node-key="nodeKey"
        :props="defaultProps"
        @node-click="handleNodeClick"
      />
    </el-select>
  </div>
</template>

<script>
  export default {
    model: {
      prop: 'value',
      event: 'change',
    },
    props: {
      treeData: {
        type: Array, // 必须是树形结构的对象数组
        default: () => {
          return []
        },
      },
      defaultProps: {
        type: Object,
        default: () => {
          return {
            label: 'label',
            children: 'children',
            disabled: 'disabled',
          }
        },
      },
      value: {
        default: () => {
          return null
        },
      },
      nodeKey: {
        type: String,
        default: () => {
          return 'id'
        },
      },
    },
    data() {
      return {
        options: [],
        selectTreeValue: undefined,
        expandOnClickNode: true,
      }
    },
    watch: {
      value(val) {
        this.selectTreeValue = val
      },
      treeData(data) {
        this.options = this.formatData(data)
      },
    },
    methods: {
      // 四级菜单
      formatData(data) {
        let options = []
        let labelName = this.defaultProps.label
        let childrenName = this.defaultProps.children
        let nodeKeyName = this.nodeKey

        if (data) {
          data.forEach((item) => {
            options.push({ label: item[labelName], value: item[nodeKeyName] })
            if (item[childrenName]) {
              options.push.apply(
                options,
                this.getChildrenData(item[childrenName])
              )
            }
          })
        }
        return options
      },
      getChildrenData(data) {
        let options = []
        let labelName = this.defaultProps.label
        let childrenName = this.defaultProps.children
        let nodeKeyName = this.nodeKey

        data.forEach((item) => {
          options.push({ label: item[labelName], value: item[nodeKeyName] })
          if (item[childrenName]) {
            options.push.apply(
              options,
              this.getChildrenData(item[childrenName])
            )
          }
        })
        return options
      },
      handleNodeClick(node) {
        if (node.children && node.children.length > 0) return
        this.$refs.selectTree.blur()
        this.selectTreeValue = node[this.nodeKey]
        this.$emit('change', node[this.nodeKey])
        // this.value = node.id
      },
    },
  }
</script>
<style>
  .universal-tree-select .el-tree-node .is-current > .el-tree-node__content {
    font-weight: bold;
    color: #409eff;
  }
  .universal-tree-select .el-tree-node.is-current > .el-tree-node__content {
    font-weight: bold;
    color: #409eff;
  }
</style>
