<template>
  <div>
      <el-dialog
        v-dialogDrag
        :visible.sync="showOrgModal"
        title="分配组织"
      >
      <div style="text-align: center;overflow-y: auto;height: 450px" v-loading="isLoading">
        <ul :id="treeId" class="ztree" style="overflow-x: auto;"></ul>
      </div>
      <div slot="footer" class="btn-width">
        <el-button @click="_cancel" type="default" style="margin-left: 8px">取消</el-button>
        <el-button @click="_ok" type="primary">确定</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>
/**
 *选择组织tree（添加编辑界面）
 */
import { sysOrg, sysUser } from '../../../../api'
export default {
  data() {
    return {
      treeId: '',
      key: '',
      isLoading: true,
      modalVal: false,
      showOrgModal: false,
      orgObj: {
        idsList: [],
        namesList: []
      },
      ORGLISTIDS: [],
      treeObj: {},
      setting: {
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pid'
          }
        },
        view: {
          showIcon: false
        },
        check: {
          enable: true,
          // 单选
          // chkStyle: "radio",
          // radioType: 'all',
          // 多选
          chkStyle: 'checkbox',
          // 选中自己（父子级互不干涉）
          chkboxType: { Y: '', N: '' }
        },
        callback: {
          onClick: this._zTreeOnClick
        }
      }
    }
  },
  methods: {
    _openOrginZtree(id) {
      this.showOrgModal = true
      this.modalVal = true
      this.treeId = 'selOrg0' + this.$randomCode()
      this._getZtree(id)
    },
    // 编辑回显 tree name
    _editOrgZtee(id) {
      this.showOrgModal = false
      this.modalVal = false
      this.treeId = 'selOrg1' + this.$randomCode()
      this._getZtree(id)
    },
    _getZtree(id) {
      this.isLoading = true
      const data = {}
      if (this.key) {
        data.keyword = this.key
      }
      this._page(data, id)
    },
    _page: async function(data, id) {
      const result = await sysOrg.orgTreeList(data)
      if (result) {
        this.treeObj = $.fn.zTree.init(
          $('#' + this.treeId),
          this.setting,
          result
        )
        if (id !== undefined) {
          this._echoTree(id)
        } else {
          setTimeout(() => {
            this.isLoading = false
            this.treeObj.expandAll(true)
          }, 300)
        }
      }
    },
    // 点击tree
    _zTreeOnClick(event, treeId, treeNode, clickFlag) {
      this.treeObj.checkNode(treeNode, !treeNode.checked, true)
    },
    // 回显选中的节点树
    _echoTree: async function(id) {
      const orgIds = await sysUser.orginSelectIds(id)
      this.treeObj.expandAll(true)
      if (orgIds.length > 0) {
        for (let i = 0; i < orgIds.length; i++) {
          const node = this.treeObj.getNodeByParam('id', orgIds[i].orgId, null)
          if (node) {
            this.treeObj.checkNode(node, true)
          }
        }
      }
      this.isLoading = false
      if (this.modalVal === false) {
        this._ok()
      }
    },
    // 确定
    _ok() {
      const nodesIdsList = []
      const nodesNameList = []
      const nodes = this.treeObj.getCheckedNodes(true)
      for (let i = 0; i < nodes.length; i++) {
        nodesIdsList.push(nodes[i].id)
        nodesNameList.push(nodes[i].name)
      }
      this._resultChange(nodesIdsList, nodesNameList)
    },
    // 取消
    _cancel() {
      this._resultChange('', '')
    },
    _resultChange: function(ids, names) {
      this.orgObj.idsList = ids // 所选中的ids
      this.orgObj.namesList = names // 所选中的names
      this.$emit('on-result-change', this.orgObj)
      this.showOrgModal = false
    }
  }
}
</script>
