<template>
  <div>
      <el-dialog
        v-dialogDrag
        :visible.sync="showModal"
        :close-on-click-modal="false"
        title="分配角色"
      >
      <div style="text-align: center;overflow-y: auto;height: 450px" v-loading="isLoading">
        <ul id="assignRoleTree" class="ztree"></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 { sysRole, sysUser } from '../../../../api'
let setting
let treeObj
export default {
  data() {
    return {
      key: '',
      isLoading: true,
      showModal: false,
      idObj: {
        // 要提交的id数据
        id: '',
        idsList: []
      }
    }
  },
  methods: {
    _openRoleZtree(id) {
      this.showModal = true
      this._getZtree(id)
      this.idObj.id = id
    },
    _getZtree(id) {
      this.isLoading = true
      setting = {
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pid'
          }
        },
        view: {
          showIcon: false
        },
        check: {
          enable: true,
          // 多选
          chkStyle: 'checkbox',
          // 选中父级及自己，不选中子级
          // chkboxType: { Y: 'p', N: 's' }
          // 选中自己
          chkboxType: { Y: '', N: '' }
        },
        callback: {
          onClick: this._zTreeOnClick
        }
      }
      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) {
        treeObj = $.fn.zTree.init($('#assignRoleTree'), setting, result)
        if (id !== undefined) {
          this._echoTree(id)
        }
      }
    },
    // 点击tree
    _zTreeOnClick(event, treeId, treeNode, clickFlag) {
      treeObj.checkNode(treeNode, !treeNode.checked, true)
    },
    // 回显选中的节点树
    _echoTree: async function(id) {
      const roleIds = await sysUser.roleSelectIds(id)
      if (roleIds.length > 0) {
        for (let i = 0; i < roleIds.length; i++) {
          const node = treeObj.getNodeByParam('id', roleIds[i].roleId, null)
          if (node) {
            treeObj.checkNode(node, true)
          }
        }
      }
      this.isLoading = false
    },
    // 确定
    _ok() {
      this.loading = true
      const nodesList = []
      const nodes = treeObj.getCheckedNodes(true)
      for (let i = 0; i < nodes.length; i++) {
        nodesList.push(nodes[i].id)
      }
      if (nodesList.length === 0) {
        this.$message.warning('请选择要分配的角色！')
        this.loading = false
      } else {
        this.idObj.idsList = nodesList
        this._okResult()
      }
    },
    _okResult: async function() {
      const result = await sysUser.roleTreeIds(this.idObj)
      if (result) {
        this.showModal = false
        this.$message.success('角色分配成功')
      }
      this.loading = false
    },
    // 取消
    _cancel() {
      this.showModal = false
    }
  }
}
</script>
