<template>
    <div>
        <div style="margin-bottom:10px;">
            <el-button type="primary" size="small" @click="addRole">新增角色</el-button>
        </div>
      <el-table :data="tableData" style="width: 100%;border-radius:6px;" stripe>
        <el-table-column type="index" label="序号" align="center"> </el-table-column>
        <el-table-column prop="title" label="名称" align="center"> </el-table-column>
        <el-table-column prop="value" label="值" align="center"> </el-table-column>
        <!-- <el-table-column prop="menuIds" label="可见菜单" align="center"> </el-table-column> -->
        <el-table-column prop="updatedBy" label="更新者" align="center"> </el-table-column>
        <el-table-column prop="updatedAt" label="更新时刻" align="center"> </el-table-column>
        <el-table-column  label="操作" align="center"> 
            <template slot-scope="scope">
                <el-button type="text" @click="editItem(scope.row)">编辑</el-button>
                <el-button type="text" @click="deleteItem(scope.row)" style="color:#f56c6c;">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class="tablePageBox iflexJustRight" v-show="tableData.length > 0">
        <el-pagination
          @current-change="changePage"
          background
          layout="prev, pager, next"
          :page-size="pageData.pageSize"
          :total="pageData.total"
        >
        </el-pagination>
      </div>
      <el-dialog :title="form.name" :visible.sync="dialogVisible" width="480px">
        <el-form :model="form" ref="form" label-width="80px">
          
          <el-form-item label="名称" prop="title" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
            <el-input v-model="form.title" size="small"></el-input>
          </el-form-item>
          <el-form-item label="值" prop="value" :rules="[{ required: true, message: '请输入值', trigger: 'blur' }]">
            <el-input v-model="form.value"  size="small"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        tableData: [],
        pageData:{
            pageNum:1,
            pageSize:20,
            total:0,
            current:1,
        },
        dialogVisible: false,
        form: {
            name:"",
            title:"",
            value:""
        }
      };
    },
    mounted(){
        this.getRoles()
    },
    methods:{
        getRoles(){
            let {pageNum,pageSize} = this.pageData;
            this.$api.user.getRoles({pageNum,pageSize}).then(res=>{
                if(res.code==200){
                    this.tableData = res.data.records;
                    this.pageData.total = Number(res.data.total);
                    this.pageData.pageSize = Number(res.data.size);
                }
            })
        },
        changePage(e) {
            console.log(e);
            this.pageData.pageNum = e;
            this.getRoles();
        },
        addRole(){
            this.form={
                name:"新增角色",
                title:"",
                edit:false,
                value:""
            }
            this.dialogVisible=true;
            this.$refs.form.resetFields();
        },
        editItem(rowData){
            this.form={
                name:"编辑角色",
                title:rowData.title,
                id:rowData.id,
                edit:true,
                value:rowData.value,
               
            }
            this.dialogVisible=true;
            if(this.$refs.form!==undefined){
                this.$refs.form.resetFields();
            }
        },
        deleteItem(rowData){
            this.$api.user.deleteRoles({ids:[rowData.id]}).then(res=>{
                if(res.code==200){
                    this.getRoles();
                    this.$message.success(res.msg)
                }
            }).catch(err=>console.log(err))
        },
        closeDialog() {
            this.dialogVisible = false;
            this.resetForm();
        },
        resetForm() {
            this.form={
                name:"",
                title:"",
                edit:false,
                value:""
            }
        },
        submitForm(){
            if(this.form.edit){
                this.$api.user.editRoles(this.form).then(res=>{
                    if(res.code==200){
                        this.dialogVisible=false;
                        this.getRoles();
                        this.$message.success(res.msg)
                    }
                }).catch(err=>console.log(err))
            }else{
                this.$api.user.addRoles(this.form).then(res=>{
                    if(res.code==200){
                        this.dialogVisible=false;
                        this.getRoles();
                        this.$message.success(res.msg)
                    }
                }).catch(err=>console.log(err))
            }
        },
    }
  };
  </script>
  
  <style scoped lang="scss">
  :deep() .el-table tr th.el-table__cell{
    background: #F0F2F5;
  }
  </style>
  