<template>
  <el-select clearable ref="selectTree" v-model="selectValue" :placeholder="placeholder" popper-class="popperTreeSelect">
    <el-option
        v-for="item in tree"
        :label="item[label]"
        :value="item[nodeKey]"
        :key="item[nodeKey]"
        style="display: none;"/>
    <el-tree
        ref="tree"
        :data="tree"
        :node-key="nodeKey"
        :props="{children:children,label:label}"
        @node-click="handleNodeClick"
    >
    </el-tree>
  </el-select>
</template>

<script>
export default {
  name: "selectTree",
  model:{
    prop:'value',
    event:'input'
  },
  props:{
    value:{
      type:[String,Number],
      default:''
    },
    tree:{
      type:Array,
      default: function () {
        return []
      }
    },
    children:{
      type:String,
      default:'children'
    },
    label:{
      type:String,
      default:'label'
    },
    placeholder:{
      type:String,
      default:'请选择'
    },
    nodeKey:{
      type:String,
      default:'id'
    }
  },
  data () {
    return {
      selectValue:''
    }
  },
  methods:{
    handleNodeClick(data, node, b){
      this.$emit('input', data.id);
      this.$emit('change', data)
      this.selectValue = data.name;
      this.$refs.selectTree.blur();
    },
    getValueName(arr){
      arr.map(item => {
        if(item[this.nodeKey] == this.value){
          console.log( item[this.label])
          this.selectValue = item[this.label]
          return false
        }
        if(item[this.children] && item[this.children].length > 0){
          this.getValueName(item[this.children])
        }
      })
    }
  },
  watch:{
    tree:{
      handler(newDate){
        this.getValueName(newDate)
      },
      immediate:true
    }
  }
}
</script>

<style scoped>

</style>