<template>
  <div>
    <TreeSelect
      :id="selectId"
      v-model="valueMine"
      :multiple="multiple"
      :style="'width:'+width+'px'"
      :disabled="disabled"
      sort-value-by="LEVEL"
      :disable-branch-nodes="disableBranchNodes"
      :show-count="false"
      noChildrenText="没有子选项"
      noOptionsText="没有可选选项"
      noResultsText="未找到相关选项"
      :options="dictTreeList"
      :placeholder="placeholder"
      :searchable="true"
      @select="selected"
      @open="opened"
      @close="closed"
      :normalizer="normalizer"
    >
    <template #option-label>
      <label slot-scope="{ node, labelClassName }" :class="labelClassName">
        <div :title="node.label">{{ node.label }}</div>
      </label>
    </template>
    </TreeSelect>
  </div>
</template>

<script>
  // 引入 下拉树组件
  import TreeSelect from '@riophae/vue-treeselect'
  // 引入 下拉树组件样式
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import bcDictUtil from "../bc-dict/index.js"
  export default {
    name: 'bcDictSelect',
    components: {
      TreeSelect,
    },
    props: {
      disabled:{
        type: Boolean,
        default:false
      },
      width: {
        type: String,
        default: '300'
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
      dictTreeListOther: {
        type: Array,
        default: function () {
          return []
        }
      },
      dictValue:{
        type: [String,Array],
        default: null
      },
      dictCode:{
        type:String,
        default:''
      },
      childrenCode:{
        type:String,
        default:''
      },
      disableBranchNodes:{
        type:Boolean,
        default:true
      },
      multiple:{
        type:Boolean,
        default:false
      },
      selectId:{
        type:String,
        default:'dictSelect'
      }
    },
    data() {
      return {
        valueMine:null,
        map:{},
        dictTreeList:[]
      }
    },
    methods:{
      opened(){
        this.$emit("onOpened")
      },
      closed(){
        this.$emit("onClosed")
      },
      getDictData(){
        if(this.dictCode){
          bcDictUtil.getDictCascade(this.dictCode, dict => {
            if(this.childrenCode){
              let newDict = this.loopFind(dict, this.childrenCode);
              if(newDict){
                let newDictChildren = newDict.children;
                if(newDictChildren&&newDictChildren.length>0){
                  dict = newDictChildren;
                }
              }
            }
            this.dictTreeList = dict;
          });
        }
      },
      loopFind(dict,dn){
        if(dict&&dict.length>0){
          for(let d of dict){
            if(d.value==dn){
              return d;
            }else{
              let r = this.loopFind(d.children,dn);
              if(r){
                return r;
              }
            }
          }
        }
      },
      selected(e,instanceId){
        this.$emit("onSelected",e)
      },
      deselect(e,instanceId){
        this.$emit("update:dictValue",null)
        this.$emit("onDeselect",e)
      },
      normalizer(node) {
        if(node.children==null||node.children=='null') {
          delete node.children;
        }
        return {
          id: node.value,
          label: node.name,
          children:node.children
        }
      },
    },
    mounted() {
    },
    watch:{
      dictValue:{
        immediate:true,
        handler:function () {
          if(this.dictValue && this.valueMine !== this.dictValue){
            this.valueMine=this.dictValue
          }
        }
      },
      dictCode:{
        immediate:true,
        handler:function () {
          if(this.dictCode && this.dictTreeListOther.length===0){
            this.getDictData()
          }
        }
      },
      dictTreeListOther:{
        immediate:true,
        handler:function () {
          if(this.dictTreeListOther.length>0){
            this.dictTreeList=this.dictTreeListOther
          }
        }
      },
      valueMine:{
        immediate:true,
        handler:function () {
          if(this.valueMine || typeof this.valueMine === 'undefined'){
            this.$emit("update:dictValue",this.valueMine)
            if(typeof this.valueMine === 'undefined'){
              this.$emit("onClear")
            }
          }

        }
      }
    }
  }
</script>
