<template>
  <div class="roleConfig">
    <el-form ref="selectionRoleForm" :inline="true" label-width="auto" size="small" style="margin: 20px" @submit.native.prevent>
       <el-form-item label="角色名称">
            <el-input v-model="formData.name" placeholder="请输入角色名称" clearable style="width: 80%;"></el-input>
          </el-form-item>
           <el-form-item label="创建时间">
            <el-date-picker v-model="createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable>
            </el-date-picker>
          </el-form-item>
         <el-form-item label="状态">
            <el-select v-model="formData.valid" placeholder="角色状态" clearable style="width: 50%;">
              <el-option label="启用" value="1"> </el-option>
              <el-option label="停用" value="2"> </el-option>
            </el-select>
          </el-form-item>
    </el-form>
    <div style="margin:20px">
      <el-button type="primary" icon="el-icon-search" size="mini" :loading="tableLoading" @click="selectRoleList(0)">搜索
      </el-button>
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="addRole" v-hasPermi="['system:role:add']">新增角色
      </el-button>
    </div>
    <Tables ref="role" ductName="role" :data="data" :headerData="tableHeader" :totalCount="total"
      :limitSize="formData.size" :page="formData.page" :pageSizes="[20, 30, 40, 50]" :loading="tableLoading"
      :height="tableHeight" @sizeChange="sizeChange" @currentChange="currentChange">
      <template slot="optionColumn">
        <el-table-column header-align="center" align="center" label="操作" min-width="210px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="buttonClick(scope, 0)" class="btn-mb-4">查看</el-button>
            <el-button type="primary" size="mini" @click="buttonClick(scope, 1)" v-hasPermi="['system:role:update']" class="btn-mb-4">修改
            </el-button>
            <el-button :type="scope.row.valid == 1 ? 'warning' : 'primary'" size="mini"
              v-hasPermi="['system:role:openClose']" @click="roleStatus(scope)" class="btn-mb-4">{{ scope.row.valid == 1 ? "停用" : "启用" }}
            </el-button>
            <el-button type="danger" size="mini" @click="removeRole(scope)" v-hasPermi="['system:role:delete']" class="btn-mb-4">删除角色
            </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 {
  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: this.tableHeaders['role'], //表头数据
      roleData: {}, //角色详情
      createTime: [],
      drawer: false,
      drawerTitle: "",
      roleFormDisabled: false,
      tableLoading: false,
      total: 0,
      tableHeight: null
    };
  },
  created() {
    if (this.$store.state.tagsView.cachedViews.length == 0) {
      this.selectRoleList();
    }
    // this.$nextTick(()=>{
    //   let height = window.innerHeight - this.$refs.selectionRoleForm.$el.offsetHeight - 250;
    //   if(height < 300){
    //     this.tableHeight = 300;
    //   }else{
    //     this.tableHeight = height;
    //   }
    // })
  },
  mounted() {
      this.tableHeight = window.innerHeight - this.$refs.selectionRoleForm.$el.offsetHeight - 250
  },
  activated() {
    this.selectRoleList();
  },
  deactivated() {
    this.data = []
  },
  methods: {
    //角色列表
    selectRoleList(val) {
      if (val == 0) {
        this.formData.page = 1
      }
      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.msgWarning(res.msg)
          }
        })
        .catch((err) => {
          this.tableLoading = false;
          console.log(err);
        });
    },
    //角色详情
    roleDetail(id) {
      detailRole(id)
        .then((res) => {
          if (res.code === 200) {
            this.roleData = res.data;
          } else {
            this.msgWarning(res.msg)
          }
        })
        .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 = status == 0 ? "查看角色" : "修改角色";
    },
    //修改角色状态
    roleStatus(row) {
      let msg = "";
      let status = {};
      status.id = row.row.id;
      row.row.valid == 1
        ? ((msg = "是否关闭此角色"), (status.valid = 2))
        : ((msg = "是否启用此角色"), (status.valid = 1));
      this.$confirm(msg, "注意", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateRoleStatus(status).then((res) => {
            if (res.code === 200) {
              this.msgSuccess('操作成功')
              this.selectRoleList();
            } else {
              this.msgWarning(res.msg)
            }
          });
        })
        .catch(() => []);
    },
    //删除角色
    removeRole(row) {
      this.$confirm(
        "如删除此角色，角色下所有用户将从中被剔除，可能会对用户操作造成影响！",
        "注意",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          updateRoleStatus({
            id: row.row.id,
            valid: 0,
            confirmDel: false,
          }).then((res) => {
            if (res.code === 200) {
              this.msgSuccess('删除成功')
              this.selectRoleList();
            } else if (res.code === 202) {
              this.$confirm(res.msg, "注意", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  updateRoleStatus({
                    id: row.row.id,
                    valid: 0,
                    confirmDel: true,
                  }).then((res) => {
                    if (res.code === 200) {
                      this.msgSuccess('操作成功')
                      this.selectRoleList();
                    }
                  });
                })
                .catch(() => { });
            } else {
              this.msgWarning(res.msg)
            }
          });
        })
        .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>