<!--
  @description: 系统设置->角色管理->权限管理弹窗
  @author: change by zhangfan
  @routerPath:
  @date:  2020/5/9-17:39
-->
<template>
  <el-dialog
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    :lock-scroll="false"
    title="角色权限配置"
    width="600px"
    custom-class="el-dialog__body-p0"
  >
    <section class="tools p0-16 pt16 clearfix">
      <el-tabs type="border-card">
        <!-- 菜单权限-->
        <el-tab-pane label="菜单权限">
          <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"
          />
        </el-tab-pane>
        <!-- 接口权限-->
        <el-tab-pane label="接口权限">
          <el-tree
            ref="Apitree"
            :props="Apiprops"
            :default-checked-keys="selectApiIds"
            :default-expanded-keys="selectApiIds"
            :load="ApiloadNode"
            lazy
            node-key="id"
            show-checkbox
            check-on-click-node
            @check-change="ApihandleCheckChange"
          />
        </el-tab-pane>
        <!--数据权限-->
        <el-tab-pane label="数据权限">
          <el-tree
            ref="Datatree"
            :props="Dataprops"
            :default-checked-keys="selectDataIds"
            :default-expanded-keys="selectDataIds"
            :load="DataloadNode"
            lazy
            node-key="id"
            show-checkbox
            check-strictly
            @check-change="DatahandleCheckChange"
          />
        </el-tab-pane>
      </el-tabs>
      <!--操作按钮-->
      <div class="but_footer" style="text-align: center;margin:30px 0 50px 0">
        <el-button type="primary" @click="submitSave">
          确认
        </el-button>
        <el-button type="primary" @click="cancelDialog">
          取消
        </el-button>
      </div>
    </section>
  </el-dialog>
</template>

<script>
import { getFunction, getAuthInterfaceTree, getAuthfaceTree, getHasAuthRole, setFunction, saveAuthRole } from '@api/common/roleManage'
export default {
  name: 'RoleManagePowerDialog',
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return
      }
    },
    roleId: {
      type: String,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      Dataprops: {
        // 设置数据权限参数
        label: 'interfaceName',
        children: 'children',
        isLeaf: ''
      },
      Apiprops: {
        // 设置接口权限参数
        label: 'interfaceName',
        children: 'children',
        isLeaf: ''
      },
      menuTreeProps: {
        // 设置菜单权限参数
        children: 'children',
        label: 'functionname'
      },
      menuData: [], // 设置角色数据
      selectMenuIds: [], // 选择菜单打勾
      selectDataIds: [], // 选择数据打勾
      selectApiIds: [], // 选择接口打勾
      removeDataList: [], // 删除勾选的数据
      removeApiList: [] // 删除勾选的接口
    }
  },

  created() {
    this.getMenuList(this.roleId) // 菜单列表
    this.GetHasAuthRole(this.roleId, 0) // 获取勾选的接口列表
    this.GetHasAuthRole(this.roleId, 1) // 获取勾选的数据列表
  },
  methods: {
    // 获取菜单权限列表
    getMenuList(roleId) {
      getFunction(roleId).then(res => {
        console.log(res)
        this.menuData = res.data.res.functionList
        this.selectMenuIds = res.data.res.funcIds // 菜单勾选的数据
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取数据权限列表
    getDataTreeData(obj, resolve) {
      getAuthInterfaceTree(obj).then(res => {
        resolve(res.data)
      }).catch(() => {
      })
    },
    // 获取数据权限列表
    getApiTreeData(obj, resolve) {
      getAuthfaceTree(obj).then(res => {
        resolve(res.data)
      }).catch(() => {
      })
    },
    // 加载数据权限所有节点
    DataloadNode(node, resolve) {
      if (node.level === 0) {
        const obj = {
          'interfaceName': '',
          'parentInterfacePath': ''
        }
        this.getDataTreeData(obj, resolve) // 父级节点
      } else {
        const obj = {
          'interfaceName': '',
          'parentInterfacePath': node.data.interfacePath
        }
        this.getDataTreeData(obj, resolve) // 所有子节点
      }
    },
    // 加载接口权限所有节点
    ApiloadNode(node, resolve) {
      if (node.level === 0) {
        const obj = {
          'interfaceName': '',
          'parentInterfacePath': ''
        }
        this.getApiTreeData(obj, resolve) // 获取父级节点
      } else {
        const obj = {
          'interfaceName': '',
          'parentInterfacePath': node.data.interfacePath
        }
        this.getApiTreeData(obj, resolve) // 获取所有子节点
      }
    },
    // 获取权限被选中的数据和接口列表
    GetHasAuthRole(roleId, authType) {
      const params = {
        'roleId': roleId,
        'authType': authType
      }
      getHasAuthRole(params).then(res => {
        if (params.authType === 1) {
          this.selectDataIds = res.data // 获取默认被选中的数据权限Id
        } else {
          this.selectApiIds = res.data // 获取默认被选中的接口权限Id
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 勾选接口权限
    ApihandleCheckChange(data, checked, indeterminate) {
      this.selectApiIds.filter(item => {
        if (item === data.id) {
          this.removeApiList.push(item) // 接口权限  在已勾选的数据里面，若取消勾选了，将取消勾选的id添到数组传给后端
        }
      })
    },
    // 勾选数据权限
    DatahandleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.$refs.Datatree.setCheckedNodes([data]) // 数据权限限制子节点单选
      }
      this.selectDataIds.filter(item => {
        if (item === data.id) {
          this.removeDataList.push(item) // 数据权限  在已勾选的数据里面，若取消勾选了，将取消勾选的id添到数组传给后端
        }
      })
    },
    // 菜单权限  判断用户的权限情况及选中的效果和取消的效果
    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)
      }
    },
    // 保存勾选的数据  一个保存确认按钮，分别调用了菜单，接口，数据三个保存数据的接口方法
    submitSave() {
      var checkedKeys = this.$refs.menuTree.getCheckedKeys() // 获取菜单权限勾选的数据
      const functionId = checkedKeys.join(',')
      const data = {
        roleId: this.roleId,
        functionId
      }
      setFunction(data).then(response => {
        this.DataSave() // 调用保存数据勾选
      })
    },
    // 勾选数据权限保存
    DataSave() {
      var DatacheckedKeys = this.$refs.Datatree.getCheckedKeys() // 获取数据权限勾选的数据
      const data = {
        roleId: this.roleId, // 角色id
        addList: DatacheckedKeys, // 勾选的数据
        reomveList: this.removeDataList, // 删除的数据
        authType: 1 // 类别，数据1 接口0
      }
      saveAuthRole(data).then(res => {
        this.ApiSave() // 调用保存接口勾选
      }).catch(err => {
        console.log(err)
      })
    },
    // 勾选接口权限保存
    ApiSave() {
      var ApicheckedKeys = this.$refs.Apitree.getCheckedKeys() // 获取接口权限勾选的数据
      const data = {
        roleId: this.roleId, // 角色id
        addList: ApicheckedKeys, // 勾选的数据
        reomveList: this.removeApiList, // 删除的数据
        authType: 0 // 类别，数据1 接口0
      }
      saveAuthRole(data).then(res => {
        this.$message({
          message: '设置成功',
          type: 'success'
        })
        this.$emit('cancelDialog', false) // 关闭弹窗
      }).catch(err => {
        console.log(err)
      })
    },
    // 取消关闭弹窗
    cancelDialog() {
      this.$emit('cancelDialog', false)
    }
  }
}
</script>

<style scoped>
  /*控制了树状结构的高度*/
  /deep/ .el-tree {
    height: 300px;
    overflow-y:auto
  }
</style>
