<template>
  <div class="autocomplete-tree">
    <el-select :placeholder="placeholder" :remote="remote" :title="searchTitle"
               value-key="id" ref="select" @change="handleChanged"  :loading="loading"
               :filterable="true" :default-first-option="true" :multiple="multiple" class="select"
               :disabled="disabled" :clearable="true" :size="size" v-model="tempValue"
               :remote-method="remoteMethod"  :filter-method="filterMethod" @blur="handleBlur">
      <el-option v-for="dataItem in options" :key="dataItem[props.value]" :title="dataItem[props.title]"
                 :label="dataItem[props.label]" :value="dataItem[props.value]">
      </el-option>
    </el-select>
    <div class="result">
      <el-tag class="title">{{resultTitle}}</el-tag>
      <div class="result-button">
        <el-button name="del" plain :tile="resultDeleteTitle" class="btn-del"
                   @click="()=>handleDelete($event)">{{resultDeleteText}}</el-button>
        <el-button name="clear" plain :tile="resultClearTitle" class="btn-clear"
                   @click="()=>handleClear($event,result)">{{resultClearText}}</el-button>
      </div>
      <el-tree ref="tree" :data="result" :show-checkbox="false" class="filter-tree" :props="props"
               @node-click="handleNodeClick" :style="{height:height}">
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  name: 'AutocompleteTree',
  props: {
    value: {
      //type: Array,
      required: true,
      default: () => []
    },options:{
      default: () => []
    },props: {
      default() {
        return {
          children: 'children',
          label: 'name',
          title:'title',
          value: 'id',
          disabled: 'disabled'
        };
      }
    },
    height:{
      type: String,
      default() {
        return '180px'
      }
    },
    remoteMethod: Function,
    filterMethod: Function,
    remote:{
      type: Boolean,
      default: false
    },searchTitle:String,
    resultTitle:{
      type: String,
      default: '已选择：'
    },
    size: String,
    disabled: Boolean,
    placeholder: String,
    loading:Boolean,
    multiple:Boolean,
    resultDeleteText:{
      type: String,
      default:"删除"
    },resultDeleteTitle:{
      type:String,
      default:'点击删除选中'
    },resultClearText:{
      type: String,
      default:"清空"
    },resultClearTitle:{
      type:String,
      default:'点击清空所有'
    }
  },data(){
    return {
      tempValue:'',
      selectedNode:null
    }
  },computed:{
    result:{
      get(){
        if(!this.$core.isArray(this.value))
          return [];
        // this.$core.debug().log("获取值",this.value);
        return this.value;
      },
      set(val){
        this.$emit('input',val);
        this.$core.debug().log("当前选择的结果",val);
        this.emitChange(val);
      }
    }
  // }
  // ,watch:{
  //   value:{
  //     handler(newValue,oldValue){
  //       this.$core.debug().log("探测到新的值",newValue,oldValue);
  //     },immediate: true,
  //   }
  },created() {
    if (this.multiple && !Array.isArray(this.value)) {
      this.$emit('input', []);
    }
    if (!this.multiple && Array.isArray(this.value)) {
      this.$emit('input', '');
    }
  },mounted() {
    if(this.remoteMethod)
      this.remoteMethod();
  }
  ,methods:{
    emitChange(value){
      this.$emit('change',value);
    },handleClear(e,value){
      this.result.splice(0,this.result.length);
    },handleChanged(e){
      let that=this;
      let data= this.options.filter((item)=>{
        if(that.multiple) {
          return e.findIndex((i) => {
            return i === item.id;
          }) >= 0;
        }else{
          return e===item.id;
        }
      })
      let newData= data.filter((item)=>{
        return that.result.findIndex((i) => {
          return i.id === item.id;
        }) < 0;
      })
      this.result=this.result.concat(newData);
      if(!this.multiple)
        this.tempValue='';
    },handleDelete(e){
      // console.log("触发值删除",this.selectedNode);
      if(this.selectedNode){
        let index=this.result.findIndex((item)=>{
          return item.id === this.selectedNode.id;
        })
        if(index>-1)
          this.result.splice(index,1);
      }
    },handleNodeClick(node){
      this.selectedNode=node;
    },handleBlur(){
      console.log("失去焦点...这个一直不行，暂时不知道原因。。。")
      if(this.multiple)
        this.tempValue=[];
      else
        this.tempValue='';
    }
  }
}
</script>
<style scoped lang="scss">
.autocomplete-tree{
  width: 100%;
  .el-select{
    margin-bottom: 5px;
  }
  .result {
    background-color: #F5F7FA;
    border: 1px solid #EDEDED;
    padding: 1px;
    border-radius: 3px;
    .result-button {
      float: right;
      padding-right:5px;
    }
    .filter-tree {
      height: 200px;
    }
  }
}

</style>