<!--单选下拉树-->
<template>
  <el-popover placement="bottom-start" width="315" @hide="popoverHide" trigger="click" v-model="isShowSelect" :disabled="disabled" >
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    <el-tree
      style="height:300px;overflow-y: scroll;margin-top:10px;"
      v-show="isShowSelect"
      :current-node-key="selectedId"
      :data="treeData"
      :check-strictly="true"
      :node-key="nodeKey"
      :show-checkbox="multiple"
      :expand-on-click-node="multiple"
      :default-expanded-keys="defaultExpandedKeys"
      :default-checked-keys="defaultCheckedKeys"
      :default-expand-all="defaultExpandAll"
      highlight-current
      @node-click="handleNodeClick"
      :props="defaultProps"
      :filter-node-method="filterNode"
      ref="tree"
      :render-content="renderContent"
    ></el-tree>
    <el-select :class="'select-tree '+className" slot="reference" ref="select" v-model="selectedId" :clearable="false" :multiple="multiple" :placeholder="tipText"  :disabled="disabled">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-popover>
</template>
<script>
  import { isNull  } from '@/utils/util'
  export default {
    model: {    // 使用model， 这儿2个属性，prop属性说，我要将msg作为该组件被使用时（此处为aa组件被父组件调用）v-model能取到的值，event说，我emit ‘cc’ 的时候，参数的值就是父组件v-model收到的值。
      prop: 'selectedId',
      event: 'selected'
    },
    props: {
      //　是否默认展开所有
      className: {
        type: String,
        default: ''
      },
      //　是否默认展开所有
      disabled: {
        type: Boolean,
        default: false
      },
      //　下拉树的数据
      treeData: { type: Array, required: true },
      //　是否默认展开所有
      defaultExpandAll: {
        type: Boolean,
        default: false
      },
      //　下拉菜单隐藏回调
      popoverHide: {
        type: Function,
        default: function () { }
      },
      //　已选
      selectedId: {
        type: String,
        default: ''
      },
      //　作为下拉树节点ｋｅｙ的属性
      nodeKey: { type: String, default: 'id' },
      //　默认提示信息
      tipText: { type: String, default: '请选择' },
      //　树组件默认参数
      defaultProps: {
        type: Object,
        default: ()=>({
          children: 'children',
          label: 'name'
        })
      },
      renderContent: {
        type: [Function,Boolean],
        default: function(h, { node, data, store }){
          return (
            <span>
              <i class={data.className||'2323'}></i>
            <span>{node.label}</span>
            </span>
          );
        }
      }
    },
    data () {
      return {
        //　设定当前为多选
        multiple: false,
        //　过滤树的参数
        filterText: '',
        // 是否显示树状选择器
        isShowSelect: false,
        //　ｓｅｌｅｃｔ组件的ｏｐｔｉｏｎ
        options: [],
        //　默认展开的节点
        defaultExpandedKeys: [],
        //　默认选中的节点
        defaultCheckedKeys: [],
        //　树组件返回的选中结果集
        treeValue:[]
      }
    },
    watch: {
      treeData(val){
        this.setTreeCheckNode(this.selectedId)
      },
      isShowSelect (val) {
        // 隐藏select自带的下拉框
        this.$refs.select.blur()
        if (val) {
          // 下拉面板展开-选中节点-展开节点
          this.setTreeCheckNode(this.selectedIdArr)
          this.defaultCheckedKeys = this.selectedIdArr
          this.defaultExpandedKeys = this.selectedIdArr
          // 高亮当前选中项
          this.$refs.tree.setCurrentKey(this.selectedId)
        }
      },
      treeValue (val) {
        this.$emit('selected', val[0])
      },
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      selectedId(val) {
        this.setTreeCheckNode(val)
      },
    },
    computed: {
      // 组件设置是否只读
      selectedIdArr: {
        // getter
        get: function(){
          return (isNull(this.selectedId) ? [] : [this.selectedId])
        },
        // setter
        set: function (newValue) {
        }
      }
    },
    mounted () {
      this.setTreeCheckNode(this.selectedId)
    },
    methods: {
      // 树筛选
      filterNode(value, data) {
        if (!value) return true;
        return data[this.defaultProps.label].indexOf(value) !== -1;
      },
      // 点击数节点
      handleNodeClick (data) {
        let tmpMap = {}
        tmpMap.value = data.id
        tmpMap.label = data[this.defaultProps.label]
        this.options = []
        this.options.push(tmpMap)
        this.treeValue = [data.id]
        this.isShowSelect = !this.isShowSelect
        this.$forceUpdate()
      },
      setTreeCheckNode (id) {
        this.findTreeNode(this.treeData, id)
      },
      // 递归查询树形节点被选中项
      findTreeNode (tree, id) {
        if ((!isNull(tree)) && (!isNull(id))) {
          for (var i = 0; i < tree.length; i++) {
            if (tree[i].id === id) {
              this.options = []
              this.options.push({
                label:tree[i][this.defaultProps.label],
                value:tree[i].id
              })
              this.showValueTmp = tree[i][this.defaultProps.label]
            } else if (tree[i].children != null && tree[i].children.length > 0) {
              this.findTreeNode(tree[i].children, id)
            }
          }
        }
      }
    }
  }
</script>
<style>
  .select-tree .el-select .el-tag__close.el-icon-close{
    display: none;
  }
</style>
