<template>
  <div class="menutree-container">
    <el-row v-if="title">
      <el-col :span="24" class="title">
        <span class="title-span">{{ title }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="tree">
        <!-- <el-input v-model="input" placeholder="请输入分类名称"></el-input> -->
        <el-scrollbar :style="{ height: 'calc(100vh - ' + activityheight + ')' }">
          <el-tree
            ref="treeref"
            :expand-on-click-node="false"
            :data="treedata"
            :index="0"
            :default-expand-all="true"
            :default-checked-keys="defaultcheCkedKeys"
            :props="configure"
            :node-key="nodeKey"
            :render-content="renderContent"
            :default-expanded-keys="defaultexpandarray"
            :current-node-key="currentNodeKey"
            highlight-current
            @node-click="handleNodeClick"
            @node-expand="nodeexpand"
          />
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'MenuTree',
  props: {
    nodeKey: {
      type: String,
      default: 'id'
    },
    // 计算tree组件外层滚动条的动态高度
    activityheight: {
      type: String,
      default: '205px'
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    // tree树节点的配置选项
    configure: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // tree树节点的渲染数据
    treedata: {
      type: Array,
      required: true
    },
    // 默认选中
    currentNodeKey: {
      type: String || Number
    },
    defaultcheCkedKeys: {},
    // prop如果是数组或者对象，默认必须是一个函数返回
    // tree树节点默认展开的节点的 key 的数组
    defaultexpandarray: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      input: ''
    }
  },
  updated() {
    this.init()
  },
  methods: {
    setChecked(data, checked, deep) {
      console.log(data)
      this.$refs.treeref.setChecked(data, checked, deep)
    },
    handleNodeClick(data, node) {
      this.$emit('TreeNodeclick', data, node)
    },
    // 节点被展开时触发的事件
    nodeexpand(data, node, arrnode) {
      this.$nextTick(() => {
        if (arrnode.$el.children[1].children.length === 1) {
          arrnode.$el.children[1].children[0].children[0].children[1].children[0].className = 'achildelement'
        } else if (arrnode.$el.children[1].children.length > 1) {
          const childrenlength = arrnode.$el.children[1].children.length
          const node = arrnode.$el.children[1].children[childrenlength - 1].children[0].children[1].children[0]
          node.className = 'sonsontopborder thelastonenode'
        }
      })
    },
    init() {
      this.$refs.treeref.setCurrentKey(this.currentNodeKey) //清除树选中key
    },
    // 使用rander函数渲染tree树dom节点
    renderContent(h, { node, data, store }) {
      const keyName = this.configure.keyName
      if (node.parent.childNodes.length === this.treedata.length && node.parent.parent == null) {
        // 最顶层节点数据
        if (node.childNodes.length === 0) {
          // 最顶层节点中没有children
          return (
            <div class="nograndchildcontainer">
              <span class="topnonodeicon"></span>
              <span class="topnonodelabel">
                {node.data[keyName]}
                {node.label}
              </span>
            </div>
          )
        } else if (node.childNodes.length > 0) {
          // 最顶层节点中有children  <span class="topnodeicon"></span>
          return (
            <div class="therearesonsinthetopmostnode">
              <span class="topnodeleftborder"></span>
              <span class="topnodelabel">
                {node.data[keyName]}
                {node.label}
              </span>
            </div>
          )
        }
      } else {
        // 不是最顶层节点的数据
        if (node.childNodes.length === 0) {
          // <span class="sonicon"></span>
          return (
            <div class="sonconter">
              <span class="sontopborder "></span>
              <span class="sonleftborder"></span>
              <span class="sonlabel">
                {node.data[keyName]}
                {node.label}
              </span>
            </div>
          )
          // 最底层的节点
        } else if (node.childNodes.length > 0) {
          // 大于一个儿子的节点 <span class="sonsonicon"></span>
          return (
            <div class="sonsonconter">
              <span class="sonsontopborder "></span>
              <span class="sonsonleftborder"></span>
              <span class="sonsonlabel">
                {node.data[keyName]}
                {node.label}
              </span>
            </div>
          )
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
