<template>
  <div class="roleConfig">
    <el-form ref="selectionRoleForm" label-width="auto" style="margin: 20px">
      <el-row :gutter="50">
        <el-col :span="6">
          <el-form-item label="角色名称">
            <el-input
              v-model="formData.name"
              placeholder="请输入角色名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态">
            <el-select v-model="formData.valid" placeholder="角色状态" clearable>
              <el-option label="开启" value="1"> </el-option>
              <el-option label="关闭" value="1"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin:20px">
      <el-button
        type="primary"
        icon="el-icon-search"
        size="mini"
        :loading="tableLoading"
        @click="selectRoleList"
        >搜索</el-button
      >
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="addRole" v-hasPermi="['system:role:add']"
        >新增角色</el-button
      >
    </div>
    <Tables
      :data="data"
      :headerData="tableHeader"
      :infoData="tableHeader"
      :totalCount="total"
      :limitSize="formData.size"
      :page="formData.page"
      :pageSizes="[20,30,40,50]"
      :loading="tableLoading"
      height="600"
       @sizeChange="sizeChange"
      @currentChange="currentChange"
    >
      <template>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="buttonClick(scope, 0)"
              >查看</el-button
            >
            <el-button type="primary" size="mini" @click="buttonClick(scope, 1)" v-hasPermi="['system:role:update']"
              >修改</el-button
            >
            <el-button
              :type="scope.row.valid == 1 ? 'warning' : 'primary'"
              size="mini"
              v-hasPermi="['system:role:openClose']"
              @click="roleStatus(scope)"
              >{{ scope.row.valid == 1 ? "停用" : "启用" }}</el-button
            >
            <el-button type="danger" size="mini" @click="removeRole(scope)" v-hasPermi="['system:role:delete']"
              >删除角色</el-button
            >
          </template>
        </el-table-column>
      </template>
    </Tables>
    <Drawer
      :drawer="drawer"
      :drawerTitle="drawerTitle"
      :roleFormDisabled="roleFormDisabled"
      :roleData="roleData"
      @handleClose="handleClose"
    ></Drawer>
  </div>
</template>

<script>
import Drawer from "./drawer.vue";
import { MessageBox } from "element-ui";
import {
  getRoleList,
  detailRole,
  updateRoleStatus,
} from "@/api/system/user.js";
export default {
  name:"RoleConfig",
  components: {
    Drawer,
  },
  data() {
    return {
      formData: {
        page: 1,
        size: 20,
        valid: null,
        createStart: null,
        createEnd: null,
        name: null,
      }, //查询条件
      data: [], //表格数据
      tableHeader: [
        {
          type: "index",
          name: "",
          value: "",
          width: "",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "角色名称",
          value: "name",
          width: "150px",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "角色状态",
          value: "valid",
          width: "150px",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "创建人",
          value: "remark",
          width: "150px",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "创建时间",
          value: "createTime",
          width: "150px",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "修改时间",
          value: "updateTime",
          width: "150px",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "备注",
          value: "remark",
          width: "400px",
          align: "center",
          sorTable: false,
          disabled:true
        },
      ], //表头数据
      roleData: {}, //角色详情
      createTime: [],
      drawer: false,
      drawerTitle: "",
      roleFormDisabled: false,
      tableLoading: false,
      total: 0,
    };
  },
  created() {
    if(this.$store.state.tagsView.cachedViews.length == 0){
      this.selectRoleList();
    }
  },
  activated(){
    this.selectRoleList();
  },
  methods: {
    //角色列表
    selectRoleList() {
      this.tableLoading = true;
      if (this.createTime.length > 0) {
        this.formData.createStart = this.createTime[0];
        this.formData.createEnd = this.createTime[1];
      }

      getRoleList(this.formData)
        .then((res) => {
          this.tableLoading = false;
          if (res.code === 200) {
            this.data = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          this.tableLoading = false;
          console.log(err);
        });
    },

    //角色详情
    roleDetail(id) {
      detailRole(id)
        .then((res) => {
          if (res.code === 200) {
            this.roleData = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //新增角色
    addRole() {
      this.roleData = {};
      this.drawer = true;
      this.roleFormDisabled = false;
      this.drawerTitle = "新增角色";
    },

    //修改查看角色
    buttonClick(row, status) {
      this.roleDetail(row.row.id);
      this.roleData = row.row;
      this.drawer = true;
      status == 0
        ? (this.roleFormDisabled = true)
        : (this.roleFormDisabled = false);
      this.drawerTitle = "查看/修改角色";
    },

    //修改角色状态
    roleStatus(row) {
      let msg = "";
      let status = {};
      status.id = row.row.id;
      row.row.valid == 1
        ? ((msg = "是否关闭此角色"), (status.valid = 2))
        : ((msg = "是否启用此角色"), (status.valid = 1));
      MessageBox.confirm(msg, "注意", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateRoleStatus(status).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.selectRoleList();
            } else {
              this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          });
        })
        .catch(() => []);
    },

    //删除角色
    removeRole(row) {
      MessageBox.confirm(
        "如删除此角色，角色下所有用户将从中被剔除，可能会对用户操作造成影响！",
        "注意",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          updateRoleStatus({
            id: row.row.id,
            valid: 0,
            confirmDel: false,
          }).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.selectRoleList();
            } else if (res.code === 202) {
              MessageBox.confirm(res.msg, "注意", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  updateRoleStatus({
                    id: row.row.id,
                    valid: 0,
                    confirmDel: true,
                  }).then((res) => {
                    if (res.code === 200) {
                      this.$message({
                        message: "操作成功",
                        type: "success",
                      });
                      this.selectRoleList();
                    }
                  });
                })
                .catch(() => {});
            } else {
              this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          });
        })
        .catch(() => []);
    },

    handleClose(val) {
      this.drawer = val;
      this.selectRoleList();
    },
    currentChange(val) {
      this.formData.page = val.page;
      this.selectRoleList();
    },
    sizeChange(val){
      this.formData.size = val;
      this.selectRoleList()
    }
  },
};
</script>

<style>
</style>