<template>
  <!-- 权限管理 -->
  <div>
    <actionBar menuTitle="权限管理" :operateList="operateList" :formList="formList" :ruleForm="searchRuleForm"
      @openModel="openModel" @searchProtocol="searchProtocol"></actionBar>
    <tables :key="Math.random()" :tableList="tableList" :tableData="tableData" @buttonData="buttonData"></tables>
    <!-- 分页 -->
    <div class="paging_bottom" v-if="Total">
      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
        @changeCurrent="changeCurrent">
      </pagination>
    </div>
    <el-dialog :title="staffTitle" :visible.sync="jurisdictionDialog" width="600px" :close-on-click-modal="false"
      @close="closeDialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="card_menus">
              <el-form-item label="菜单">
                <el-tree ref="tree" :data="treeDataList" show-checkbox node-key="id" :props="defaultProps">
                </el-tree>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="jurisdictionDialog = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="addPermission">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getRole,
    getRoleDetails,
    addRole,
    putRole,
    delRole,
  } from '@/api/power'
  import {
    getMenu,
    getMenuRole,
    getMenuRoleSelect
  } from '@/api/menu'
  import actionBar from '@/components/actionBar'
  import tables from '@/components/tables'
  import pagination from '@/components/pagination'
  export default {
    components: {
      actionBar,
      tables,
      pagination,
    },
    data() {
      return {
        staffTitle: '添加',
        jurisdictionDialog: false,
        Pagination: {
          PageIndex: 1,
          PageSize: 10,
        },
        formList: [{
          type: 'input',
          label: '权限名称',
          field: 'name',
          placeholder: '权限名称',
        }],
        searchRuleForm: {
          name: '',
        },
        operateList: [{
          type: 'add',
          title: '添加',
          icon: 'el-icon-plus',
        }],
        tableList: [{
          field: 'name',
          label: '权限',
          align: 'center',
        }, {
          field: 'remark',
          operation: true,
          label: '备注',
          align: 'center',
        }, {
          field: 'action',
          label: '操作',
          colWidth: '200px',
          align: 'center',
          labelButton: [{
            type: 'edit',
            label: '修改',
            icon: 'el-icon-edit',
            style: 'primary',
          }, {
            type: 'del',
            label: '删除',
            icon: 'el-icon-delete',
            style: 'danger',
          }]
        }],
        rules: {
          name: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }],
        },
        tableData: [],
        Total: 0,
        treeDataList: [],
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        form: {
          name: '',
          remark: ''
        },
        loading: false,
        rolePermission: {},
        operationType: '',
        roleId: '',
        searchValue: {},
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      // 搜索
      searchProtocol(value) {
        this.searchValue = value
        this.getList()
      },
      // 获取权限列表
      getList() {
        var params = {
          page: this.Pagination.PageIndex,
          pageSize: this.Pagination.PageSize,
          ...this.searchValue
        }
        getRole(params).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.Total = res.data.count
          }
        })
      },
      // 获取菜单
      getMenuList() {
        getMenuRoleSelect().then(res => {
          if (res.code == 200) {
            this.treeDataList = res.data
            if (this.operationType == 'edit') {
              this.setCheckedKeys()
            }
          }
        })
      },
      // 详情赋值
      setCheckedKeys() {
        var stairIds = []
        this.treeDataList.forEach(item => {
          stairIds.push(item.id)
        })
        var pitchonIds = this.rolePermission.menuIds
        let arrRole = []
        if (pitchonIds) {
          arrRole = pitchonIds.filter(item => !stairIds.some(ele => ele === item));
        }
        this.form.name = this.rolePermission.name
        this.form.remark = this.rolePermission.remark
        this.$refs.tree.setCheckedKeys(arrRole);
      },
      // 添加权限
      addPermission() {
        var menuIds = this.$refs.tree.getCheckedKeys()
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.operationType == 'add') {
              this.loading = true
              addRole({
                name: this.form.name,
                remark: this.form.remark,
                menuIds: menuIds
              }).then(res => {
                this.loading = false
                if (res.code == 200) {
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  });
                  this.jurisdictionDialog = false
                  this.getList()
                }
              })
            } else {
              this.putPermission()
            }
          } else {
            return false;
          }
        });
      },
      // 修改角色权限
      putPermission() {
        this.loading = true
        var menuIds = this.$refs.tree.getCheckedKeys()
        putRole({
          id: this.roleId,
          name: this.form.name,
          remark: this.form.remark,
          menuIds: menuIds
        }).then(res => {
          this.loading = false
          if (res.code == 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.jurisdictionDialog = false
            this.getList()
          }
        })
      },
      openModel(type) {
        this.operationType = type
        if (type == 'add') {
          this.staffTitle = '添加'
          this.getMenuList()
        }
        this.jurisdictionDialog = true
      },
      buttonData(row, type) {
        this.operationType = type
        if (type == 'edit') {
          this.roleId = row.id
          this.staffTitle = '编辑'
          this.roleDetails(row.id)
          this.jurisdictionDialog = true
        } else if (type == 'del') {
          this.deleteItem(row.id)
        }
      },
      // 获取角色权限
      roleDetails(id) {
        getRoleDetails(id).then(res => {
          if (res.code == 200) {
            this.rolePermission = res.data
            this.getMenuList()
          }
        })
      },
      // 删除
      deleteItem(id) {
        this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delRole({
            id: id,
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.getList()
            }
          })
        }).catch(() => {});
      },
      changeSize(val) {
        this.Pagination.PageSize = val
        this.getList()
      },
      changeCurrent(val) {
        this.Pagination.PageIndex = val
        this.getList()
      },
      closeDialog() {
        this.$refs.tree.setCheckedKeys([]);
        this.$refs.form.resetFields();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .card_menus {
    max-height: 450px;
    overflow: auto;
  }
</style>
