<template>
  <div>
      <el-dialog
        v-dialogDrag
        :visible.sync="showRoleModal"
        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" style="margin-left: 8px">取消</el-button>
        <el-button @click="_ok" type="primary">确定</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>
/**
 *选择角色tree（添加编辑界面）
 */
import { sysRole, sysUser } from '../../../../api'
export default {
  data() {
    return {
      treeId: '',
      key: '',
      isLoading: true,
      modalVal: false,
      showRoleModal: false,
      orgObj: {
        idsList: [],
        namesList: []
      },
      treeObj: {},
      setting: {
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pid'
          }
        },
        view: {
          showIcon: false
        },
        check: {
          enable: true,
          // 多选
          chkStyle: 'checkbox',
          // 选中自己
          chkboxType: { Y: '', N: '' }

          // 勾选的时候影响子级，不勾选的时候影响父子级
          // chkboxType: { Y: 's', N: 'ps' }
        },
        callback: {
          onClick: this._zTreeOnClick
        }
      }
    }
  },
  methods: {
    _openRoleZtree(id) {
      this.showRoleModal = true
      this.modalVal = true
      this.treeId = 'selRole0' + this.$randomCode()
      this._getZtree(id)
    },
    // 编辑回显 tree name
    _editRoleZtee(id) {
      this.showRoleModal = false
      this.modalVal = false
      this.treeId = 'selRole1' + 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 sysRole.roleTreeList(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 roleIds = await sysUser.roleSelectIds(id)
      this.treeObj.expandAll(true)
      if (roleIds.length > 0) {
        for (let i = 0; i < roleIds.length; i++) {
          const node = this.treeObj.getNodeByParam(
            'id',
            roleIds[i].roleId,
            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.showRoleModal = false
    }
  }
}
</script>
