<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="showModal"
      :close-on-click-modal="false"
      title="分配菜单权限"
    >
      <div v-loading="isLoading" style="text-align: center;overflow-y: auto;height: 450px">
        <ul :id="treeId" class="ztree" />
      </div>
      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
/**
 * 菜单+按钮Ztree
 */
import { sysResource, sysRole } from '../../../../api'
export default {
  data() {
    return {
      showModal: false,
      isLoading: true,
      treeId: '',
      idObj: {
        // 要提交的id数据
        id: '',
        idsList: []
      },
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '确定', type: 'primary' }
      ],
      treeObj: '',
      setting: {
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pid'
          }
        },
        view: {
          showIcon: false
        },
        check: {
          enable: true,
          // chkStyle: "checkbox",
          // 未勾选的时候只影响自己，不影响父节点
          chkboxType: { Y: 'ps', N: 's' }
        },
        callback: {
          onClick: this.zTreeOnClick
        }
      }
    }
  },
  methods: {
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '确定':
          this._ok()
          break
      }
    },
    _open(ID) {
      // 回显选中的数据
      this.showModal = true
      this.isLoading = false
      this.treeId = 'menu' + this.$randomCode()
      this._search(ID)
      this.idObj.id = ID
    },
    _search: async function(ID) {
      const result = await sysResource.getMenuTree()
      this.treeObj = $.fn.zTree.init($('#' + this.treeId), this.setting, result)
      // 让第一个父节点展开
      const rootNode0 = this.treeObj.getNodeByParam('pid', 0, null)
      this.treeObj.expandNode(rootNode0, true, false, false, false)
      this._echoTree(ID)
    },
    zTreeOnClick(event, treeId, treeNode) {
      this.treeObj.checkNode(treeNode, !treeNode.checked, true)
    },
    // 回显选中的节点树
    _echoTree: async function(ID) {
      const resourceIds = await sysRole.proSelectIds(ID)
      if (resourceIds.length > 0) {
        for (let i = 0; i < resourceIds.length; i++) {
          const node = this.treeObj.getNodeByParam(
            'id',
            resourceIds[i].resourceId,
            null
          )
          if (node) {
            this.treeObj.checkNode(node, true)
          }
        }
      }
      this.isLoading = false
    },
    _cancel() {
      this.$refs.footerModal._hideLoading()
      this.showModal = false
    },
    _ok: async function() {
      const nodesList = []
      const nodes = this.treeObj.getCheckedNodes(true)
      for (let i = 0; i < nodes.length; i++) {
        nodesList.push(nodes[i].id)
      }
      this.idObj.idsList = nodesList
      const result = await sysRole.assignMenu(this.idObj)
      if (result) {
        this.showModal = false
        this.$message.success('权限分配成功!')
      }
      this.$refs.footerModal._hideLoading()
    }
  }
}
</script>
