<!--
  @description: 角色管理--设置权限弹框
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-9-17-9:52
-->
<template>
  <el-dialog
    :visible.sync="dialogFormMenuVisible"
    :close-on-click-modal="false"
    title="设置权限"
    width="800px"
  >
    <el-row v-loading="loading" :gutter="20">
      <el-col :span="6">
        <div class="page-title" style="text-align: right">
          操作权限
        </div>
      </el-col>
      <el-col :span="18">
        <el-scrollbar class="scrollbar" style="height:500px;">
          <el-tree
            ref="menuTree"
            :data="menuData"
            :props="menuTreeProps"
            :default-checked-keys="selectMenuIds"
            :check-strictly="true"
            :expand-on-click-node="false"
            default-expand-all
            show-checkbox
            check-on-click-node
            node-key="id"
            @node-click="nodeClick"
            @check="checkChange"
          />
        </el-scrollbar>
      </el-col>
    </el-row>
    <div slot="footer" style="text-align:center;">
      <el-button type="primary" @click="handleChangeMenus">
        设置权限
      </el-button>
      <el-button @click="dialogFormMenuVisible = false">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

import { queryRoleFunction, setRoleFunction } from '../../../api/appManagement/role'
export default {
  name: 'SetAccessDialog',
  data() {
    return {
      loading: true,
      dialogFormMenuVisible: false,
      menuData: null, // 设置角色数据
      selectCurentRoleId: '', // 角色id
      selectMenuIds: [], // 选择打勾
      // 设置权限参数
      menuTreeProps: {
        children: 'children',
        label: 'appName'
      }
    }
  },
  methods: {
    // 获取权限设置列表
    getRoleMenus(id) {
      this.dialogFormMenuVisible = true // 打开弹框
      this.selectCurentRoleId = id // 角色id
      queryRoleFunction({ id }).then(response => {
        this.menuData = response.data.functionList
        this.selectMenuIds = response.data.roleFunctionIds
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 设置权限确定事件
    handleChangeMenus() {
      const checkedKeys = this.$refs.menuTree.getCheckedKeys()
      const functionIds = checkedKeys?.join(',')?.split(',')
      const data = {
        roleId: this.selectCurentRoleId,
        functionIds
      }
      setRoleFunction(data).then(response => {
        this.dialogFormMenuVisible = false
        this.$message.success(response.header.msg)
        this.$emit('getList') // 设置成功重新获取列表数据
        // 判断修改的角色权限是否是当前登陆的角色，如果是则重新获取当前用户菜单列表
        if (data.roleId === this.$store.getters.info.currentRol.id) {
          this.$store.dispatch('setMenu')
        }
      })
    },
    // 点击复选框触发
    checkChange(data) {
      const node = this.$refs.menuTree.getNode(data)
      this.nodeClick(data, node)
    },
    // 点击文本触发-判断用户的权限情况及选中的效果和取消的效果
    nodeClick(data, node) {
      this.childNodesChange(node)
      this.parentNodesChange(node)
    },
    // 子节点改变
    childNodesChange(node) {
      const len = node.childNodes.length
      for (let i = 0; i < len; i++) {
        if (node.checked) {
          node.childNodes[i].checked = true
        } else {
          node.childNodes[i].checked = false
        }
        this.childNodesChange(node.childNodes[i])
      }
    },
    // 父节点改变
    parentNodesChange(node) {
      if (node.parent) {
        let isChecked = false
        node.parent.childNodes.map(item => {
          if (item.checked) {
            isChecked = true
          }
        })
        if (!isChecked) {
          node.parent.checked = isChecked
        } else {
          node.parent.checked = true
        }
        this.parentNodesChange(node.parent)
      }
    }
  }
}
</script>

<style scoped>

</style>
