<!-- 角色管理 -->
<template>
  <div class="innerMargin">
    <el-card class="box-card">
      <div style="cursor: default">
          <template>
            <!-- 添加角色按钮 -->
            <el-row>
                <el-col>
                  <el-button type="blueInfo" @click="AddRoleDialogVisible=true">添加角色</el-button>
                </el-col>
            </el-row>
                  <!-- 角色列表 -->
            <el-table :data="roleList" border stripe>
            <!-- 索引列 -->
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="角色名称" prop="role_name"></el-table-column>
            <el-table-column label="角色描述" prop="role_message"></el-table-column>
            <el-table-column label="操作" width="300px">
                <template slot-scope="scope">
                  <el-button type="blueInfo" plain icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
                  <el-button type="redInfo" plain icon="el-icon-delete" size="mini" @click="removeRoleById(scope.row)">删除</el-button>
                  <el-button
                  type="greenInfo"
                  icon="el-icon-setting"
                  size="mini"
                  plain
                  @click="showSetRightDialog(scope.row)"
                  >分配权限</el-button>
                </template>
            </el-table-column>
            </el-table>
          </template>
          <!-- 添加角色对话框 -->
          <el-dialog title="添加角色" :visible.sync="AddRoleDialogVisible" width="40%" @close="addRoleDialogClosed">
            <el-form
            :model="addRoleForm"
            ref="addRoleFormRef"
            :rules="addRoleFormRules"
            label-width="100px"
            >
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="addRoleForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="roleDesc">
                <el-input v-model="addRoleForm.roleDesc"></el-input>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button type="grayInfo" @click="AddRoleDialogVisible = false">取 消</el-button>
            <el-button type="blueInfo" @click="addRoles">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 编辑角色对话框 -->
          <el-dialog title="编辑角色" :visible.sync="editRoleDialogVisible" width="40%" @close="editRoleDialogClosed">
            <el-form
            :model="editRoleForm"
            ref="editRoleFormRef"
            :rules="editRoleFormRules"
            label-width="100px"
            >
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="editRoleForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="roleDesc">
                <el-input v-model="editRoleForm.roleDesc"></el-input>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button type="grayInfo" @click="editRoleDialogVisible = false">取 消</el-button>
            <el-button type="blueInfo" @click="editRoles">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 分配权限 -->
          <el-dialog
            title="分配权限"
            :visible.sync="setRightDialogVisible"
            width="50%"
            top="180px"
            @close="setRightDialogClosed"
          > 
            <div style="height:500px;overflow-y:auto">
              <el-tree
              :data="rightsList"
              :props="treeProps"
              ref="treeRef"
              show-checkbox
              node-key="pur_id"
              default-expand-all
              :default-checked-keys="defKeys"
              ></el-tree>
            </div>
            
            <span slot="footer" class="dialog-footer">
            <el-button type="grayInfo" @click="setRightDialogVisible = false">取 消</el-button>
            <el-button type="blueInfo" @click="allotRights">确 定</el-button>
            </span>
          </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
   export default {
      data(){
         return {
            AddRoleDialogVisible:false,
            editRoleDialogVisible:false,
            setRightDialogVisible:false,
            roleList:[],
            menuList: [
               {
                  name: "农林植保",
                  id: "1",
                  children: [
                     {
                     name: "设备列表",
                     path: "/page1",
                     id: "11"
                     },
                  ]
               },
               {
                  name: "可视化系统",
                  id: "8",
                  children: [
                     {
                     name: "可视化系统",
                     path: "/monitor",
                     id: "88"
                     }
                  ]
               },
               {
                  name: "智能灌溉系统",
                  id: "2",
                  children: [
                     {
                     name: "系统管理",
                     path: "/page3",
                     id: "22"
                     }
                  ]
               },
               {
                  name: "农业水价改革",
                  id: "3",
                  children: [
                     {
                     name: "设备列表",
                     path: "/page1"
                     }
                  ]
               },
               {
                  name: "农业地理信息",
                  id: "4",
                  children: [
                     {
                     name: "设备列表",
                     path: "/page1"
                     }
                  ]
               },
               {
                  name: "农产品追溯",
                  id: "5",
                  children: [
                     {
                     name: "设备列表",
                     path: "/page1"
                     }
                  ]
               },
               {
                  name: "系统管理",
                  id: "6",
                  children: [
                     {
                     name: "用户管理",
                     path: "/page4",
                     id: "22"
                     },
                     {
                     name: "角色管理",
                     path: "/page6",
                     id: "22"
                     },
                     {
                     name: "主题定制",
                     path: "/page7",
                     id: "22"
                     },
                  ]
               },
               {
                  name: "设备管理",
                  id: "6",
                  children: [
                     {
                     name: "设备列表",
                     path: "/page8",
                     id: "22"
                     }
                  ]
               }
            ],
            rightsList:[],
            // 当前即将分配权限的Id
            roleId:'',
            //  树形控件的属性绑定对象
            treeProps: {
               label: 'name',
               children: 'children'
            },
            //  默认选中节点ID值
            defKeys: [],
            // 添加角色表单
            addRoleForm: {
               roleName:'',
               roleDesc:''
            },
            // 添加角色表单验证
            addRoleFormRules: {
               roleName: [
                  { required: true, message: '请输入角色名称', trigger: 'blur' }
               ],
               roleDesc: [
                  { required: true, message: '请输入角色描述', trigger: 'blur' }
               ]
            },
            // 编辑角色信息
            editId:'',
            editRoleForm: {
               roleName:'',
               roleDesc:''
            },
            editRoleFormRules: {
               roleName: [
                  { required: true, message: '请输入角色名称', trigger: 'blur' }
               ],
               roleDesc: [
                  { required: true, message: '请输入角色描述', trigger: 'blur' }
               ]
            },
         }
      },
      created(){
         this.getRoleList();
      },
      methods:{
         getRoleList(){
            this.$axios({
               method:'POST',
               url:'/api/api_gateway?method=user.perms.role_list'
            }).then(res=>{
               if(res.data.message==""){
                  this.roleList=res.data.data;
               }
            })
         },
         showEditDialog(row){
            this.editId=row.role_id;
            this.$axios({
               method:'POST',
               url:'/api/api_gateway?method=user.perms.role_list',
               data:this.qs.stringify({
                  role_id:row.role_id,
               })
            }).then(res=>{
               if(res.data.message==""){
                  this.editRoleForm.roleName = res.data.data[0].role_name;
                  this.editRoleForm.roleDesc = res.data.data[0].role_message;
               }else{
                  this.$message.error('查询角色信息失败！')
               }
            })
            this.editRoleDialogVisible = true
         },
         removeRoleById(row){
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
               }).then(() => {
                  this.$axios({
                     method:'POST',
                     url:'/api/api_gateway?method=user.perms.add_role',
                     data:this.qs.stringify({
                        make_type:4,
                        role_id:row.role_id,
                        role_name:row.role_name
                     })
                  }).then(res=>{
                     if(res.data.message==""){
                        this.$message.success('删除角色成功！')
                        this.getRoleList();
                     }else{
                        this.$message.error(res.data.message)
                     }
                  })
               }).catch(() => {
                  this.$message({
                     type: 'info',
                     message: '已取消删除'
                  });          
            });
         },
         showSetRightDialog(role){
            this.roleId=role.role_id;
            this.$axios({
               method:'POST',
               url:'/api/api_gateway?method=user.perms.all_pur_list',
            }).then(res=>{
               if(res.data.message==""){
                  this.rightsList=res.data.data;
               }else{
                  this.$message.error('获取权限列表失败!')
               }
            })
            this.defKeys = [];
            this.getLeafkeys(role,this.defKeys);
            
            this.setRightDialogVisible=true;
         },
         getLeafkeys(node,arr){
            if(!node.children){
               return arr.push(node.pur_id) 
            }
            node.children.forEach(item=>this.getLeafkeys(item,arr))
         },
         setRightDialogClosed(){
            this.rightsList=[];
         },
         addRoleDialogClosed(){
            this.$refs.addRoleFormRef.resetFields();
         },
         editRoleDialogClosed(){
            this.$refs.editRoleFormRef.resetFields();
         },
         // 添加角色
         addRoles(){
            this.$refs.addRoleFormRef.validate(valid=>{
               if(!valid) return
               this.$axios({
                  method:'POST',
                  url:'/api/api_gateway?method=user.perms.add_role',
                  data:this.qs.stringify({
                     role_name:this.addRoleForm.roleName,
                     role_message :this.addRoleForm.roleDesc,
                     make_type:1 
                  })
               }).then(res=>{
                  if(res.data.message==""){
                     this.$message.success('添加角色成功！')
                  }else{
                     this.$message.error('添加角色失败！')
                  }
                  this.AddRoleDialogVisible=false;
                  this.getRoleList()
                  })
               })
         },
         editRoles(){
            this.$refs.editRoleFormRef.validate(valid=>{
               if(!valid){
                  return false;
               }
            })
            this.$axios({
               method:'POST',
               url:'/api/api_gateway?method=user.perms.add_role',
               data:this.qs.stringify({
                  role_name:this.editRoleForm.roleName,
                  role_message :this.editRoleForm.roleDesc,
                  role_id:this.editId,
                  make_type:3 
               })
            }).then(res=>{
               if(res.data.message==""){
                  this.$message.success('编辑角色成功！')
               }else{
                  this.$message.error('编辑角色失败！')
               }
                this.editRoleDialogVisible=false;
                this.getRoleList()
            })
         },
         allotRights(){
            // 获得当前选中的Id
            const keys = [
               ...this.$refs.treeRef.getCheckedKeys(),
               ...this.$refs.treeRef.getHalfCheckedKeys()
               ]
            const idStr = keys.join(',');
            this.$axios({
               method:'POST',
               url:'/api/api_gateway?method=user.perms.allot_perm',
               data:this.qs.stringify({
                  role_id:this.roleId,
                  pur_id:idStr
               })
            }).then(res=>{
               if(res.data.message==""){
                  this.$message.success('分配权限成功!')
                  this. getRoleList()  
               }
               this.setRightDialogVisible=false;  
            })
         }
      }
   }
</script>

<style lang='less' scoped>
/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #0295ff;
    border-color: #0685e1;
}
</style>