<template>
  <div style="text-align: center;overflow-y: auto;height: 410px;">
    <ul :id="treeName" class="ztree" />
  </div>
</template>

<script>
/**
 * 组织Ztree
 */
import { sysOrg } from '../../api'

export default {
  data() {
    return {
      treeName: '', // 区别tree id
      treeObj: '',
      setting: {
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pid'
          }
        },
        callback: {
          onClick: this.zTreeOnClick
        }
      }
    }
  },
  methods: {
    _getZtree: async function(currentId) {
      this.treeName = 'orgTree' + this.$randomCode()
      const result = await sysOrg.orgTreeList()
      $.fn.zTree.init($('#' + this.treeName), this.setting, result)
      this.treeObj = $.fn.zTree.getZTreeObj(this.treeName)
      if (currentId !== undefined) {
        const nodeId = this.treeObj.getNodeByParam('id', currentId, null)
        this.treeObj.checkNode(nodeId, true, true)
        this.treeObj.expandNode(nodeId, true, true, true)
        this.treeObj.selectNode(nodeId)
      } else {
        this.treeObj.expandAll(true)
      }
    },
    zTreeOnClick(event, treeId, treeNode) {
      this.$emit('on-result-change', treeNode)
    }
  }
}
</script>
