<template>
  <div style="text-align: center;overflow-y: auto;height: 410px;">
    <ul :id="treeName" class="ztree" />
  </div>
</template>
<script>
/**
 * 组织Ztree
 */
import { sysOrg } from '../../api'
let treeObj
export default {
  data() {
    return {
      treeName: '' // 区别tree id
    }
  },
  methods: {
    _getZtree: async function(name, currentId) {
      this.treeName = name + 'OrginTree'
      const setting = {
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pid'
          }
        },
        callback: {
          onClick: this.zTreeOnClick
        }
      }
      const result = await sysOrg.orgTreeList()
      if (result) {
        $.fn.zTree.init($('#' + this.treeName), setting, result)
        treeObj = $.fn.zTree.getZTreeObj(this.treeName)
        if (currentId !== undefined) {
          const nodeId = treeObj.getNodeByParam('id', currentId, null)
          treeObj.checkNode(nodeId, true, true)
          treeObj.expandNode(nodeId, true, true, true)
          treeObj.selectNode(nodeId)
        } else {
          treeObj.expandAll(true)
        }
      }
    },
    zTreeOnClick(event, treeId, treeNode) {
      this.$emit('on-result-change', treeNode)
    }
  }
}
</script>
