<template>
  <div class="w-s-t">
    <div :class="[showVal == false ? 'show' : 'none']">
      <el-select
        class="user-select-tree"
        v-model="textStr"
        :placeholder="placeholder"
        ref="select"
        :filterable="true"
        :remote="true"
        :remote-method="remoteMethod"
        :clearable="clearable"
        @clear="clearSelect"
        @visible-change="visibleChange"
        :disabled="disabledVal"
        :popper-append-to-body="false"
        style="width: 100%"
      >
        <el-option v-model="value" style="height: 100%; max-height: 200px; overflow-y: auto; padding: 0; background-color: #ffffff">
          <el-tree :data="treeList" :props="treeProps" :filter-node-method="filterNode" :current-node-key="currentKey" highlight-current default-expand-all :node-key="nodeKey" ref="selectTree" :check-strictly="true" @node-click="handleTreeClick">
            <span slot-scope="{ data }" :title="data[treeProps.label]" class="ellipsis">
              {{ data[treeProps.label] }}
            </span>
          </el-tree>
        </el-option>
      </el-select>
    </div>
    <div :class="[showVal == false ? 'none' : 'show']">{{ textStr }}</div>
  </div>
</template>

<script>
export default {
  name: 'WSelectTree',
  props: {
    treeList: {
      type: Array
    }, //树形原始数据
    treeProps: Object, //树形配置
    nodeKey: String, //树形唯一键值
    valueLabel: String,
    defaultSelect: {
      //默认选择
      type: Boolean,
      default: true
    },
    disabledVal: Boolean,
    showVal: Boolean,
    defaultData: {
      type: Object,
      default: null
    },
    clearable: { type: Boolean, default: false },
    placeholder: { type: String, default: '请选择' },
    paramsKey: String
  },
  data() {
    return {
      textStr: '',
      value: '',
      filterText: '',
      currentKey: '',
      highlightNode: -1
    }
  },
  watch: {
    filterText(val) {
      if (this.$refs.selectTree) {
        this.$refs.selectTree.filter(val)
      }
    },

    defaultData(val) {
      if (this.treeList.length == 0) return
      if (val[this.treeProps.value] == undefined) return

      if (this.highlightNode === -1) {
        this.setEdit(val)
      }
    },

    treeList(val) {
      // if (val.length > 0) {
      //   this.$nextTick(() => {
      //     if (this.defaultSelect) {
      //       this.value = val[this.treeProps.value]
      //       this.highlightNode = this.value
      //       this.currentKey = this.value
      //       if (this.$refs.selectTree) {
      //         this.textStr = this.$refs.selectTree.getNode(this.highlightNode)[this.treeProps.label]
      //         this.$refs.selectTree.setCurrentKey(this.highlightNode)
      //       }
      //       this.$emit('handleNodeClick', this.value)
      //     }
      //   })
      // }
    }
  },
  mounted() {
    // this.$nextTick(() => {
    // })
  },
  methods: {
    setEdit(obj) {
      this.value = obj[this.treeProps.value]
      this.$nextTick(() => {
        this.highlightNode = this.value
        this.currentKey = this.value
        this.textStr = this.$refs.selectTree.getNode(this.value).data[this.treeProps.label]
        if (this.$refs.selectTree) {
          this.$refs.selectTree.setCurrentKey(this.highlightNode)
        }
      })
    },
    visibleChange() {
      this.filterText = ''
    },
    filterNode(value, data) {
      if (!value) return true
      return data[this.treeProps.label].indexOf(value) !== -1
    },
    remoteMethod(query) {
      setTimeout(() => {
        this.filterText = query
      }, 100)
    },
    // 设备类型点击赋值
    handleTreeClick(data, checked) {
      this.filterText = ''
      if (checked) {
        // //判断是否是父子
        if (data[this.treeProps.children] !== undefined && data[this.treeProps.children].length !== 0) {
          this.$refs.selectTree.setCurrentKey(this.highlightNode)
        } else {
          this.value = data[this.nodeKey]
          this.textStr = data[this.treeProps.label]
          this.$forceUpdate()
          this.currentKey = this.value
          this.highlightNode = data[this.nodeKey]
          this.$emit('handleNodeClick', this.value)
          this.$emit('update:paramsKey', this.value)
          if (this.$refs.selectTree) {
            this.$refs.selectTree.setCheckedKeys([this.highlightNode])
            this.$refs.select.blur()
          }
        }
      }
    },
    clearFun() {
      this.value = ''
      this.textStr = ''
      this.currentKey = undefined
      this.highlightNode = undefined
      this.$refs.selectTree.setCurrentKey(this.highlightNode)
    },
    clearSelect() {
      this.value = ''
      this.textStr = ''
      this.$refs.selectTree.setCurrentKey()
      this.$emit('handleNodeClick', '')
    }
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
