<template>
  <el-popover
    :placement="attrs.placement?attrs.placement:'bottom-start'"
    :width="attrs.width?attrs.width:'300'"
    trigger="click"
    v-model="show"
    >
    <el-tree :data="data" :props="defaultProps" :default-expand-all="attrs.defaultExpandAll" :expand-on-click-node="false" @node-click="handleNodeClick" highlight-current node-key="id"></el-tree>
    <el-input :value="titleName" slot="reference" :placeholder="attrs.placeholder?attrs.placeholder:'请选择'" :clearable="attrs.clearable" @clear="clear" suffix-icon="el-icon-arrow-down"></el-input>
  </el-popover>
</template>

<script lang="ts">
/*
  配置说明
  config:{
    attrs:{
      retConfig:{
        retLabel:'name'  //返回的值(示例)
        retValue:'id'  //返回的值(示例)
      }
      width：''  //宽度
      placement:'' //方向
      clearable：true/false  //是否清空
      placeholder：''  //占位符
      label:''  //标签
      children:'' //下一级
      defaultExpandAll:false/true  //是否默认展开所有节点
    },
    request:{}
  }
*/
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'
@Component
export default class SelectTree extends VueViews {
  data:Array<any>=[]
  titleName='';
  show=false;
  @Watch('propValue')
  propValueChange(v:any){
    this.setValue(v);
  }
  get defaultProps(){
    let c:any={
      children: 'children',
      label: 'label'
    }
    if(this.attrs.label){
      c.label = this.attrs.label
    }
    if(this.attrs.children){
      c.children = this.attrs.children
    }
    return c;
  }

  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
    if(this.propValue){
      this.setValue(this.propConfig)
    }
  }

  mounted(){
    this.$nextTick(()=>{
      if(this.requestConfig){
        this.request();
      }else if(this.attrs.data){
        this.setData(this.attrs.data)
      }
    })
  }
  clear(){
    this.value='';
    let obj:any = {};
    this.titleName = '';
    try{
      if(this.attrs.retConfig){
        for(const key in this.attrs.retConfig){
          obj[key] = ''
        }
      }
    }catch(e){
      console.log('selectTree:retConfig报错！')
    }
    this.$emit('onChange',obj);
  }
  setData(data:Array<any>){
    this.data = data;
    if(this.value){
      this.getLabel(this.data);
    }
  }

  getLabel(data:Array<any>){
    for(const item of data){
      let t = false;
      for(const key in this.attrs.retConfig){
        const code = this.attrs.retConfig[key];
        if(item[code] == this.value){
          this.titleName = item[this.defaultProps.label]
          t = true;
          break;
        }
      }

      if(!t && item[this.defaultProps.children]){
        this.getLabel(item[this.defaultProps.children]);
      }
    }
  }

  setValue(v:any){
    this.value = v;
    if(v && this.data.length > 0){
      this.getLabel(this.data);
    }else{
      this.titleName = '';
    }
  }

  getValue(){
    return this.value;
  }

  handleNodeClick(data:any){
    this.titleName = data[this.defaultProps.label];
    let obj:any = {};
    try{
      if(this.attrs.retConfig){
        for(const key in this.attrs.retConfig){
          obj[key] = data[this.attrs.retConfig[key]]
        }
      }
    }catch(e){
      console.log('selectTree:retConfig报错！')
    }
    this.$emit('onChange',obj);
    this.$emit('handleNodeClick',data);
    this.show = false;
  }

   //请求url
   request(){
    if(!this.requestConfig || !this.requestConfig.url){
      return
    }
    let parame = (this as any).$lodash.cloneDeep(this.requestConfig);
    parame.success = (res:any) => {
      if(res.data){
        this.setData(res.data);
      }
    }
    parame.fail = (err:any) => {}
    this.requestHandle(parame);
  }
}
</script>

<style lang="scss" scoped>

</style>