<template id="tree-select">
  <div class="tree-select">
    <el-select ref="selectRef" style="width: 350px;" popper-class="tree-select-pop" :filter-method="(val) => $refs.selectTree.filter(val.trim())" :filterable="searchAble" :value="valueTitle" :clearable="clearable" @clear="clearHandle" size="small">
      <el-option :value="valueTitle" :label="valueTitle">
        <el-tree show-checkbox :filter-node-method="(value, data) =>{
              if (!value) return true;
              return data[props.label].indexOf(value) !== -1;
            }" id="tree-option" ref="selectTree" :accordion="accordion" :data="options" :props="props" :node-key="props.value" :default-expanded-keys="defaultExpandedKey" @node-click="handleNodeClick" :disabled="disabled" :expand-on-click-node="false">
          <template slot-scope="{data, node}">
            <div>
              {{test(data,node)}}
              <!-- <i v-if="data.icon" :class="data.icon" style="margin-right:3px"></i> -->
              <svg v-if="data.hasOwnProperty('icon')" t="1687243116815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3616" width="14" height="14">
                <path d="M256 68.693333a160 160 0 0 1 48.768 7.616l277.333333 88.746667A160 160 0 0 1 693.333333 317.44v146.922667l87.125334-55.424a96 96 0 0 1 129.856 25.472l2.666666 3.968a96 96 0 0 1 15.018667 51.541333V896h21.333333a32 32 0 0 1 0 64h-874.666666a32 32 0 0 1 0-64h21.333333V228.693333a160 160 0 0 1 154.816-159.914666z m0 64a96 96 0 0 0-96 96V896h469.333333V317.44a96 96 0 0 0-62.378666-89.92l-4.373334-1.514667-277.333333-88.746666A96 96 0 0 0 256 132.693333z m602.986667 340.053334a32 32 0 0 0-44.16-9.813334L693.333333 540.224V896h170.666667V489.92a32 32 0 0 0-3.221333-14.016zM288 533.333333a32 32 0 0 1 32 32v106.666667a32 32 0 0 1-64 0v-106.666667a32 32 0 0 1 32-32z m0-256a32 32 0 0 1 32 32v106.666667a32 32 0 0 1-64 0v-106.666667a32 32 0 0 1 32-32z" fill="#fff" p-id="3617"></path>
              </svg>
              <span>{{data.name}}</span>
            </div>
          </template>
        </el-tree>
      </el-option>
    </el-select>
    <div ref="buttons">
      <el-button v-show="!searchAble" type="primary" size="small" icon="el-icon-search" @click="searchAble = true, $nextTick(() => $refs.selectRef.focus())">
      </el-button>
      <el-button v-show="searchAble" type="primary" size="small" icon="el-icon-close" tabindex="1" @click="searchAble = false" @blur="searchAble = false">
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  // template: '#tree-select',
  props: {
    /* 配置项 */
    props: {
      type: Object,
      default: () => {
        return {
          value: 'id',             // ID字段名
          label: 'title',         // 显示名称
          children: 'children'    // 子级字段名
        }
      }
    },
    /* 选项列表数据(树形结构的对象数组) */
    options: {
      type: Array,
      default: () => { return [] }
    },
    /* 初始值 */
    value: {
      type: String,
      default: () => { return null }
    },
    /* 可清空选项 */
    clearable: {
      type: Boolean,
      default: () => { return false }
    },
    /* 自动收起 */
    accordion: {
      type: Boolean,
      default: () => { return false }
    },
    disabled: {
      type: Boolean,
      default: () => { return false }
    },
    treeNodeDisabled: Function,
    autoClose: {
      type: Boolean,
      default: () => { return true }
    },
    popperHeight: {
      type: String,
      default: "400px"
    }
  },
  data () {
    return {
      valueId: this.value,    // 初始值
      valueTitle: '山西路桥建设集团有限公司',
      defaultExpandedKey: [1],
      searchAble: false,
      id: null,
    }
  },
  mounted () {
    //   this.initHandle()
    //   console.log(this.$refs.buttons);
    //   window.addEventListener("click", (e) => {
    //     console.log('this.$refs.buttons.contains',this.$refs.buttons.contains);
    //   console.log(this.$refs.buttons.contains(e.target));
    //   if (!this.$refs.buttons.contains(e.target)) {
    //       this.searchAble = false
    //   }
    //   })
    document.body.style.setProperty('--tree-select-popper-height', this.popperHeight)
  },
  methods: {
    // 计算缩放比例
    getScale (w = 263, h = 322) {
      const ww = window.innerWidth / w
      const wh = window.innerHeight / h
      return ww < wh ? ww : wh
    },

    test (...v) {
      // console.log(...v);
    },
    // 初始化值
    // initHandle() {
    //     // alert('this.valueId=' + this.valueId)
    //     let that = this
    //     // 这里要延迟执行，否则有BUG
    //     setTimeout(function () {
    //         if (that.valueId !== undefined) {
    //             that.valueTitle = that.$refs.selectTree.getNode(that.valueId).data[that.props.label]     // 初始化显示
    //             that.$refs.selectTree.setCurrentKey(that.valueId)       // 设置默认选中
    //             that.defaultExpandedKey = [that.valueId]      // 设置默认展开
    //         } else {
    //             that.valueTitle = null // 初始化显示
    //             that.$refs.selectTree.setCurrentKey(null) // 设置默认选中
    //         }
    //     }, 200)
    //     this.$nextTick(() => {
    //         let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
    //         let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
    //         scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
    //         scrollBar.forEach(ele => ele.style.width = 0)
    //     })

    // },
    // 切换选项
    handleNodeClick (node) {
      this.name = node.name;
      this.id = node.id;
      this.level = node.level
      this.$emit('id-change', this.id);
      this.$emit('name-change', this.name);
      this.$emit('level-change', this.level)
      if (!node.disabled) {
        this.valueTitle = node[this.props.label]
        this.valueId = node[this.props.value]
        //this.$emit('getValue',this.valueId)
        this.$emit('input', this.valueId, node)
        this.defaultExpandedKey = []
      }
      if (this.autoClose) {
        this.$refs.selectRef.blur()
      }
    },
    // 清除选中
    clearHandle () {
      this.valueTitle = ''
      this.valueId = null
      this.defaultExpandedKey = []
      this.clearSelected()
      //this.$emit('getValue',null)
      this.$emit('input', "", null)
    },
    /* 清空选中样式 */
    clearSelected () {
      let allNode = document.querySelectorAll('#tree-option .el-tree-node')
      allNode.forEach((element) => element.classList.remove('is-current'))
    }
  },
  watch: {
    value () {
      this.valueId = this.value
      // this.initHandle()
    },
    // 当按钮取消时候，清空输入的选择
    searchAble (val) {
      if (val)
        this.$refs.selectTree.filter("")
    }
  }
}
</script>
<style lang="scss">
.el-tree {
  background: #031647;
}
// 将tree控件的ul的高度设置为254px
.el-scrollbar__view {
  height: 254px;
}
.el-select-dropdown__item {
  overflow-x: hidden;
}
// 想要的滑块
.el-select-dropdown__item::-webkit-scrollbar {
  background: #031647;
  width: 10px;
}
// 滑动块的样式
.el-select-dropdown__item::-webkit-scrollbar-thumb {
  background: #fff;
  width: 5px;
  border-radius: 5px;
}
/* 1、修改节点选中后的背景样式 */
.el-tree-node:focus > .el-tree-node__content {
  color: #fff;
  background-color: rgb(217, 217, 217, 0.5); //背景色
}
/* 2、节点hover后的背景样式 */
.el-tree-node__content {
  &:hover {
    background: none;
  }
}
.tree-select {
  display: flex;
  line-height: 1;
  align-items: center;
  margin-left: -15%;
  margin-top: -15px;
}

.tree-select .el-select {
  flex-grow: 1;
}
.tree-select .el-input input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: rgb(1, 19, 70);
  width: 210px;
  color: white;
}
.tree-select .el-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0;
  background-color: rgb(1, 19, 70);
  border: none;
}
.tree-select-pop .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: 254px;
  max-height: var(--tree-select-popper-height);
  padding: 0;
  overflow: auto;
  overflow-y: auto;
}
.tree-select-pop .el-select-dropdown__item.selected {
  font-weight: normal;
}
.tree-select-pop .el-tree-node__label {
  font-weight: normal;
}
.tree-select-pop .el-tree-node.is-current > .el-tree-node__content {
  color: #fff;
}
.tree-select-pop .is-disabled,
.is-disabled > .is-disabled {
  display: none;
}
.tree-select-pop .is-disabled ~ div {
  color: #fff;
  cursor: default;
}
.tree-select-pop .el-tree-node__content > .el-checkbox {
  display: none;
}
.tree-select-pop .el-tree {
  padding: 10px;
}
.tree-select-pop .el-tree-node__content {
  height: 35px;
}
.tree-select-pop .el-tree-node__content:hover,
.el-upload-list__item:hover {
  color: #fff;
}
// 清除滚动条样式
.el-scrollbar__bar.is-vertical {
  width: 0px !important;
  top: 0px !important;
}
// 树形控件的字体
.el-tree-node {
  color: #fff;
}
.el-select-dropdown {
  border: 1px solid #01468b !important;
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
  border-bottom-color: #01468b !important;
}
.el-select-dropdown__list {
  padding: 0;
}
.el-select-dropdown__item {
  background: #031647 !important;
}
</style>