<template>
  <div class="select-wrap" @click.stop="wrapClickHandler">
    <span class="label-name">站点：</span><div class="site-select-wrap">
      <i class="el-select__caret el-input__icon el-icon-arrow-up arrow"></i>
      <el-input :value="inputValue" :readonly="true" :disabled="disabled" :icon="isOpenTree ? 'caret-top' : 'caret-bottom'" @click.stop="inputClickHandler">
      </el-input>
    </div>
    <div class="tree-wrap" v-show="isOpenTree">
      <el-toolbar>
        <el-input style="margin-left:20px;margin-right:10px;" placeholder="请输入要搜索的内容" v-model="filterText" width="75%"></el-input>
      </el-toolbar>
      <el-tree :filter-node-method="filterNode" ref="siteTree" :data="siteTreeData" :node-key="treeOptions.key" :current-node-key="currentNodeKey" :props="treeOptions" :default-expand-all="true" :expand-on-click-node="false" :highlight-current="true" @node-click="treeNodeClickHandler" :render-content="renderContent">
      </el-tree>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      treeOptions: { key: 'ID', label: 'name', children: 'children' },
      siteTreeData: [],
      isOpenTree: false,
      filterText: '',
      inputValue: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.siteTree.filter(val)
    }
  },
  async created() {
    if (this.disabled) {
      return
    }
    let obj = {
      name: this.name,
      path: this.path
    }
    let getSiteListTreeData = await axios.get('/ui/sites', obj)
    this.siteTreeData = getSiteListTreeData.data.data
    this.currentSiteID = getSiteListTreeData.data.siteID
    this.inputValue = getSiteListTreeData.data.siteName
  },
  methods: {
    inputClickHandler() {
      if (this.disabled) {
        return
      }
      this.isOpenTree = !this.isOpenTree
    },
    async wrapClickHandler() {
      if (!this.isOpenTree) {
        this.isOpenTree = true
      }
    },
    treeNodeClickHandler(data) {
      let val = {}
      if (data[this.treeOptions.key] > 0) {
        val[this.treeOptions.label] = data[this.treeOptions.label]
        val[this.treeOptions.key] = data[this.treeOptions.key]
        this.$emit('callback', data[this.treeOptions.key])
        this.inputValue = data[this.treeOptions.label]
        this.isOpenTree = false
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    renderContent: function(createElement, { node, data, store }) {
      let icon = 'fa fa-home'
      if (node.data.ID === 0) {
        icon = 'fa fa-desktop'
      }
      let params = {
        h: createElement,
        treeObj: { node, data, store },
        icon: icon
      }
      return util.renderTreeContent(params)
    }
  },
  computed: {
    currentNodeKey() {
      if (!this.value || !this.treeOptions || !this.treeOptions.key) {
        return ''
      }

      return this.value[this.treeOptions.key] || ''
    }
  },
  props: ['value', 'disabled', 'name', 'path'],
  mounted() {
    let that = this
    document.addEventListener(
      'click',
      () => {
        that.isOpenTree = false
      },
      false
    )
  }
}
</script>

<style scoped>
.select-wrap {
  width: 100%;
  padding: 5px;
  position: relative;
  cursor: pointer;
  display:flex;
}

.select-wrap .tree-wrap {
  overflow: auto;
  position: absolute;
  z-index: 10000;
  padding: 5px;
  top: 42px;
  width: 98%;
  height: 250px;
  background-color: #fff;
  border: 1px solid #d1dbe5;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
  .label-name{
    width: 45px;
    line-height:36px;
    display:inline-block;
  }
  .site-select-wrap{
    position:relative;
    display:inline-block;
    flex:1;
  }
  .site-select-wrap i.arrow{
    color: #c0c6c2;
    font-size: 14px;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    line-height: 16px;
    cursor: pointer;
    position:absolute;
    z-index: 99;
    right: 0;
    bottom: -5px;
  }
  .site-select-wrap i.arrow:before{
    font-family: monospace;
    content: "◤";
    font-size: 14px;
    position: relative;
  }
  .site-select-wrap i.arrow:after {
    content: '';
    height: 100%;
    width: 0;
    display: inline-block;
    vertical-align: middle;
  }
</style>
