<template>
  <div class="box">
        <el-select size="small" placeholder="请选择" clearable v-model="selectLabel" @clear="selectClear">
            <el-option class="option-style" :label="selectLabel" :value="selectValue">
                <el-input class="search" size="small" placeholder="输入关键字进行过滤" v-model="keywork" @click.stop.native></el-input>
                <el-tree
                 v-loading="treeLoading"
                ref="tree"
                :data="date"
                :props="props"
                :show-checkbox="showCheckbox"
                :filter-node-method="filterNode"
                @node-click="nodeClick"
                @check-change="checkChange">
                    <div slot-scope="{node, data}">
                        <!-- <span :class="[{'tree-click': treeClick==data.value}]">{{data.label}}</span> -->
                    </div>
                </el-tree>
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default{
  props:{
    treeDate: {//树状数据
      type: Array,
      default: () => []
    },
    treeProps: {//树状规则
      type: Object,
      default: () => { }
    },
    treeLoading:{
      type: Boolean,
      default: false
    },
    showCheckbox: {//是否可选择
      type: Boolean,
      default: true
    }
  },
    data(){
      return{
        loading:false,
        treeClick: null,　　　　　　//点击样式
        keywork: null,　　　　　　　//搜索关键字
        selectLabel: null,    　　//下拉框显示名称
        selectValue: null,    　　//下拉框显示ID
        date: [],
        props: {
          children: "children",
          label: "label"
        }
      }
    },
    methods:{
      selectClear(){
        this.treeClick = null;
        this.selectLabel = null;
        this.selectValue = null;
      },
      filterNode(value, data){
        if(!value){
          return true;
        }
        return data.label.indexOf(value) !== -1;
      },
      nodeClick(obj, node){
        this.treeClick = obj.value;
        this.selectLabel = obj.label;
        this.selectValue = obj.value;
        console.log(obj, node);
      },
      checkChange(obj, node){
        console.log(obj, node);
      },
    },
    watch:{
      keywork(val){
        this.$refs.tree.filter(val);
      },
      treeDate(data){ 
        this.data = this.treeData
      },
      treeProps(data){
          this.props = this.treeProps
      },
      loading(data){
        this.loading = this.treeLoading
      }
    },
    created(){
        this.data = this.treeData
        this.props = this.treeProps
        this.loading = this.treeLoading
        console.log( this.data)
    },
}
</script>

<style scoped>
.box{
    width: 100%;
    height: 100%;
}
.search{
  width: calc(100% - 8px - 0.5rem);
  margin: 0 0.5rem;
}
.option-style{
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
}
.tree-click{
  color: #4D74D6;
  font-weight: 600;
}
/deep/ .el-tree-node__content{
  padding: 0.25rem;
}
/deep/ .el-icon-caret-right{
  font-size: 0;
}
</style>
