<template>
  <el-scrollbar :style="{height: height}">
    <!-- 懒加载时 -->
    <el-tree
      v-show="!isSearch"
      ref="tree"
      :class="treeData.onlyOneSelected?'el-tree-check-none':''"
      :props="defaultProps"
      :load="treeLoadNode"
      :expand-on-click-node="onClickNode"
      :filter-node-method="filterNode"
      check-strictly
      :show-checkbox="showCheckbox"
      :highlight-current="highlightCurrent"
      lazy
      node-key="id"
      @check="checkNode"
      @node-click="treeNodeClick"
    />
    <!-- 搜索时 -->
    <el-tree
      v-show="isSearch"
      ref="searchTree"
      :class="treeData.onlyOneSelected?'el-tree-check-none':''"
      :data="searchData"
      :props="defaultProps"
      :expand-on-click-node="onClickNode"
      check-strictly
      :show-checkbox="showCheckbox"
      :highlight-current="highlightCurrent"
      :empty-text="emptytText"
      node-key="id"
      @check="checkNode"
      @node-click="treeNodeClick"
    />
  </el-scrollbar>
</template>

<script>
/* 接口*/
import { initOrganizationTree, getOrganizationTreeBySearch } from '@/api/common/user.js'// 组织机构树

export default {
  name: 'OrganizationTree',
  props: {
    height: { // 树容器高度
      type: String,
      default: ''
    },
    showCheckbox: { // 是否展示多选框
      type: Boolean,
      default: false
    },
    highlightCurrent: { // 高亮
      type: Boolean,
      default: false
    },
    onClickNode: { // 结点点击
      type: Boolean,
      default: false
    },
    selectCodes: { // 一选中结点
      type: Array,
      default: function() {
        return []
      }
    },
    searchParams: { // 搜索参数
      type: Object,
      default: function() {
        return {}
      }
    },
    singleChoice: { // 单选
      type: Boolean,
      default: false
    },
    treeData: { // 组件数据
      type: Object,
      default: function() {
        return {
          parentId: ''
        }
      }
    }
  },
  data() {
    return {
      node: {}, // 当前选中结点
      resolve: null, // 当前选中结点的resolve
      isSearch: false, // 是否为搜索时
      kedNodes: [],
      defaultProps: {
        children: 'children',
        label: 'departname',
        isLeaf: 'isBottom'
      },
      // ------搜索时的参数------
      emptytText: '', //	内容为空的时候展示的文本
      searchData: []
    }
  },
  watch: {
    selectCodes(val) {
      this.$refs.tree.setCheckedKeys(val)
    },
    searchParams: {
      handler(val) {
        this.search(val)
      },
      deep: true
    }
  },
  methods: {
    // 过滤已选择的数据
    filterNode(value, data) {
      if (!value) return true
      // 过滤掉已选择的数据 && 搜索的数据
      return data.departname.includes(value.departname)
    },
    /*
     搜索
    */
    search(params) {
      if (!params.departName) {
        this.isSearch = false // 非搜索
      } else {
        this.isSearch = true// 搜索
      }
      this.searchData = []
      this.emptytText = '拼命加载中...'
      params.parentId = this.treeData.parentId
      getOrganizationTreeBySearch(params).then(res => {
        this.emptytText = '暂无数据'
        this.searchData = res.data
      })
    },
    /*
    初始化数据
    resolve 添加树节点数据
    */
    initLoad(node, resolve) {
      this.node = node // 当前选中结点
      this.resolve = resolve // 当前选中结点的resolve
      let parentId = ''
      if (node && node.key) {
        parentId = node.key// 父节点id
      } else {
        parentId = this.treeData.parentId
      }
      initOrganizationTree(parentId).then(res => {
        res.data.forEach(item => {
          item.isBottom = item.isBottom !== 'true'// 指定节点是否为叶子节点
        })
        resolve(res.data)// 添加树节点
      })
    },
    refreshData() { // 手动调用加载数据方法
      this.initLoad(this.node, this.resolve)
    },
    // 树节点加载子集事件
    treeLoadNode(node, resolve) {
      this.initLoad(node, resolve)// 初始化数据
    },
    // 结点选中
    checkNode(checkedNodes, checkedKeys) {
      // 是否只能选最后一级且是单选则执行
      if (this.treeData.onlyOneSelected && checkedKeys.checkedKeys.length > 0) {
        this.$refs.tree.setCheckedKeys([checkedNodes.id])
        this.$refs.searchTree.setCheckedKeys([checkedNodes.id])
      }
      if (this.singleChoice) { // 单选
        this.$refs.tree.setCheckedNodes([])
        this.$refs.tree.setCheckedNodes([checkedNodes])
      }
    },
    // 树节点点击
    treeNodeClick(data) {
      this.$emit('nodeClickData', data)
    },
    handelGetCheckedNodes() {
      if (this.isSearch) {
        // 搜索时
        return this.$refs.searchTree.getCheckedNodes()
      } else {
        // 非搜索时
        return this.$refs.tree.getCheckedNodes()
      }
    }
  }
}
</script>

<style scope>
.el-tree>.el-tree-node{
  min-width:100%;
  display: inline-block;
}
</style>

