<template>
    <div class="bodyBoxs">
        <div class="boxs">
            <el-button type="primary" @click="showAddAdmin" size="mini" style="margin-bottom: 10px">新增管理员</el-button>
            <el-table
                :data="tableData"
                style="width:100%;margin:0 auto;"
                v-loading="loading">
                <el-table-column prop="id" label="序列"/>
                <el-table-column prop="name" label="姓名"/>
                <el-table-column prop="account" label="账户"/>
                <el-table-column prop="" label="密码">
                  <template slot-scope="scope">
                    <el-input type="text" :show-password="true" :value="scope.row.dispalyPassword"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="queryGroup.title" label="权限"/>
                <el-table-column prop="ip" label="登录IP"/>
                <el-table-column prop="updatedAt" label="最后进入时间"/>
                <el-table-column fixed="right" label="操作">
                  <template slot-scope="scope">
                    <!-- <el-button @click="showExit(scope.row)" type="warning" size="mini">编辑</el-button> -->
                    <el-button @click="showExit(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button @click="deleteAdmin(scope.row.id)" type="danger" icon="el-icon-delete" circle></el-button>
                    <!-- <el-button @click="deleteAdmin(scope.row.id)" type="danger" size="mini">删除</el-button> -->
                  </template>
                </el-table-column>
            </el-table>
            <el-pagination align="left" layout="prev, pager, next, jumper,total" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"/>
          <el-dialog :title="title" :visible.sync="showExitState" width="400px" :before-close="handleClose">
                <el-form ref="form" :model="form" label-width="100px">
                  <el-form-item label="管理员姓名">
                    <el-input v-model="form.name" max="20"></el-input>
                  </el-form-item>
                  <el-form-item label="管理员账号">
                    <el-input v-model="form.account" max="20"></el-input>
                  </el-form-item>
                  <el-form-item label="管理员密码">
                    <el-input   :readonly="false" :show-password="true" v-model="form.password"></el-input>
                  </el-form-item>
                  <el-form-item label="管理员角色">
                    <el-select v-model="form.right_id" placeholder="请选择角色">
                      <el-option  :label="item.title" :value="item.id" v-for="item in role"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否禁用">
                    <el-switch v-model="form.disable"></el-switch>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="showExitState = false">取 消</el-button>
                  <el-button :loading="loading" type="primary" @click="exitData">确 定</el-button>
                </span>
          </el-dialog>
        </div>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
    data(){
        return{
            form: {
              id:0,
              name: '',
              account: '',
              right_id: '',
              password: '',
              disable: false
            },
            role:[],
            title:'新增管理员',
            showExitState:false,
            tableData: [],
            loading:false,
            total:0,
            pages:1,
            pageSize:15,
        }
    },
    created(){
        this.getListData();
    },
    methods:{
      exitData(){
        this.loading = true;
        this.$api.setAdmin(
          {
            id:this.form.id,
            name:this.form.name,
            account:this.form.account,
            right_id:this.form.right_id,
            password:this.form.password,
            disable:this.form.disable == false ? 0 : 1
          }
        ).then((res) => {
          if(res.code === 0){
            this.$message({
              message: res.message,
              type: 'success'
            });
            this.showExitState = false
            this.getListData();
          }else{
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        }).catch((res) => {
          this.loading = false;
        })
      },
      deleteAdmin(id) {
        this.$confirm('确定删除该管理员，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          this.$api.deleteAdmin({
            id: id,
          }).then((res) => {
            if(res.code === 0){
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.getListData();
            }else{
              this.$message({
                message: res.message,
                type: 'warning'
              });
            }
          }).catch((res) => {
            this.loading = false;
          })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消'
          });
        });
      },
        getListData(){
            this.loading=true;
            this.$api.getAdminData({
                size:this.pageSize,
                page:this.pages
            }).then((res) => {
                this.loading=false;
                if(res.code ==0){
                    this.tableData=res.data.data;
                    this.total=res.data.total;
                    this.role = res.data.role;
                }else{
                    this.$message(res.message);
                }
            }).catch((res) => {
                this.loading=false;
            });
        },
         handleCurrentChange(val){
            this.pages= val;
            this.getListData();
        },
        handleEdit(i,r){
            console.log(i,r)
        },
        rowStyle() {
            return "text-align:center;border:none;color:#727272";
        },
        headerStyle(){
            return "text-align:center;background:#3f88bb;font-weight:blod;color:#fff"
        },
        showExit(row){
          this.title = '编辑管理员';
          this.showExitState = true;
          this.form.id=row.id
          this.form.name=row.name
          this.form.account=row.account
          this.form.right_id = row.rightId
          this.form.disable  = row.disable == 0 ? false : true
        },
        handleClose(res){
          console.log(res)
          this.showExitState = false;
        },
        showAddAdmin(){
          this.title = '新增管理员';
          this.showExitState = true;
          this.form.id=0
            this.form.name=''
            this.form.account=''
            this.form.right_id=''
            this.form.password=''
            this.form.disable= false

        }
    }
}
</script>
<style scoped>
 .bodyBoxs{
        padding: 15px;
    }
    .boxs{
      padding: 15px;
        width: 100%;
        background: #fff;
        border-radius: 15px;
    }
    .titles{
        width: 100%;
        height: 90px;
        /*border-bottom: 1px solid #ababab;*/
        line-height: 90px;
        font-size: 26px;
        color: #1b1b1b;
        padding-left: 20px;
        font-weight: bold;
    }


</style>
