<template>
  <div class="catalog-tree" :class="{'roomy':data.length < 10}">
    <p class="no-data" v-if="data.length === 0">暂无数据</p>
    <div v-else>
      <p class="title" :class="{'title-active': titleActive}" @click="handleTitleClick" v-if="title"><i class="fa fa-globe f20"></i> {{title}}
        <slot name="rootOprate"></slot>
      </p>
      <ul class="root-stage" v-if="!isMenu">
        <catalog-tree-node  :node="node" :props="props"  :level1="level1" :active="active" v-for="node in nodes" :key="node[props.key]"></catalog-tree-node>
        <span slot="nodeOprate" slot-scope="{node}">
          <slot name="nodeOprate" :node="node"></slot>
        </span>
      </ul>
      <ul class="root-stage" v-else>
        <menu-tree-node :node="node" :props="props" :expandLevel="expandLevel" :level1="level1" :active="active" v-for="node in nodes" :key="node[props.key]"></menu-tree-node>
      </ul>
    </div>
  </div>
</template>

<script>
import CatalogTreeNode from './CatalogTreeNode.vue'
import MenuTreeNode from './MenuTreeNode.vue'

export default {
  name: 'CatalogTree',
  componentName: 'CatalogTree',
  components: {
    'catalog-tree-node': CatalogTreeNode,
    'menu-tree-node': MenuTreeNode
  },
  props: {
    data: {
      type: Array,
      required: true
    },
    props: {
      type: Object,
      default: function () {
        return {
          children: 'children',
          label: 'name',
          key: 'ID',
          traceback: 'innerCode' // 可用来回溯父节点的属性
        }
      }
    },
    nodeActive: {
      type: [String, Number],
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    lazy: {
      type: Function
    },
    level1: {
      type: Boolean,
      default: true
    },
    isMenu: {
      type: Boolean,
      default: false
    },
    clearSelect: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      active: null,
      titleActive: false,
      expandLevel: 10,
      tooltip: {
        show: false,
        text: '',
        left: 0,
        top: 0
      }
    }
  },
  created () {
    this.$on('node-click', (nodeData, node) => {
      let obj = {}
      obj[this.props.key] = nodeData[this.props.key]
      this.active = obj
      this.titleActive = false
      this.$emit('current-change', nodeData, node)
    })
  },
  computed: {
    nodes () {
      if (this.data.length) {
        return this.data
      }
      return {}
    }
  },
  watch: {
    nodeActive(val) {
      if (val) {
        let obj = {}
        obj[this.props.key] = val
        this.titleActive = false
        this.active = obj
      }
    },
    clearSelect(val) {
      if (val) {
        this.setCurrentNode()
      }
    }
  },
  mounted() {
    // let timer
    // let tooltipEl
    // let lastOverEl
    // this.$el.addEventListener('mouseover', (evt) => {
    //   if (evt.target.className === 'node-text'){
    //     let node = evt.target
    //     if (node.scrollWidth > node.clientWidth) { // 获取label溢出边界的节点
    //       clearTimeout(timer)
    //       tooltipEl = document.getElementById('tooltipForTreeNode')
    //       if (!tooltipEl){
    //         tooltipEl = document.createElement('div')
    //         tooltipEl.id = 'tooltipForTreeNode'
    //         tooltipEl.className = 'el-tooltip__popper is-dark'
    //         tooltipEl.style.position = 'absolute'
    //         tooltipEl.style.zIndex = 2000
    //         tooltipEl.style.display = 'none'
    //         tooltipEl.innerHTML = '<span id="tooltipForTreeNodeInner"></span><div x-arrow="" class="popper__arrow" style="top: 11px;"></div>'
    //         tooltipEl.setAttribute('x-placement', 'right')
    //         document.body.appendChild(tooltipEl)
    //       }
    //       let rect = node.getBoundingClientRect()
    //       tooltipEl.style.display = 'block'
    //       document.getElementById('tooltipForTreeNodeInner').innerHTML = node.innerText
    //       tooltipEl.style.top = rect.top + window.scrollY + 'px'
    //       tooltipEl.style.left = rect.left + window.scrollX + node.clientWidth + 'px'
    //       lastOverEl = node
    //     }
    //   }
    // }, false)
    // this.$el.addEventListener('mouseout', (evt) => {
    //   if (evt.target.className === 'node-text'){
    //     let node = evt.target
    //     let toEl = evt.toElement
    //     if (node === lastOverEl && toEl && toEl !== node && !node.contains(toEl)) { // 获取label溢出边界的节点
    //       timer = setTimeout(_ => {
    //         if (tooltipEl){
    //           tooltipEl.style.display = 'none'
    //         }
    //       }, 200)
    //     }
    //   }
    // }, false)
  },
  methods: {
    // {Number|Object} id或{innerCode:innerCode}， 用来指定哪个节点要展开，要展开还没有载入的节点，需要传入innerCode配置
    setCurrentNode (idOrFilter) {
      if (!idOrFilter) {
        return
      }
      this.titleActive = false
      if (typeof idOrFilter === 'string' || typeof idOrFilter === 'number') {
        let obj = {}
        obj[this.props.key] = idOrFilter
        this.active = obj
      } else {
        this.active = idOrFilter
      }
    },
    handleTitleClick () {
      if (this.titleActive) {
        return
      }
      this.active = null
      this.titleActive = true
      this.$emit('current-change', this.active)
    },
    async handleLazy (parentNode) {
      if (!this.lazy) {
        return []
      }

      const childNodes = await this.lazy(parentNode)

      parentNode[this.props.children] = childNodes

      return true
    }
  }

}
</script>

<style scoped>
.title {
  position: relative;
}
.title-active {
  color: #41ce8a;
}
.catalog-tree >>> .title .tree-node-oprates {
  top: 0;
  right: 10px;
}
.catalog-tree >>> .tree-node-oprates .btn-oprate {
  margin-left: 3px;
  padding: 0;
}
.catalog-tree >>> .tree-node-oprates i.fa:hover {
  background: rgba(0, 0, 0, 0.6);
}

.catalog-tree >>> .tree-node-oprates {
    display:none;
    position: absolute;
    right: 35px;
  }
.catalog-tree >>> .tree-node-oprates i.fa {
  background: rgba(0, 0, 0, 0.3);
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align:center;
  padding-right: 0;
  font-size:12px;
  border-radius: 50%;
  display:inline-block;
  color:#fff;
}
.catalog-tree >>> .tree-node-oprates .btn-oprate {
  margin-left: 3px;
  padding: 0;
}
.catalog-tree >>> .tree-node-oprates i.fa:hover {
  background: rgba(0, 0, 0, 0.6);
}
.catalog-tree >>> .title:hover .tree-node-oprates, .catalog-tree >>> .node-content:hover .tree-node-oprates {
  display:block;
}

</style>
