<template>
    <div class="bodyBoxs">
        <div class="boxs">
            <div class="titles">系统日志</div>
            <el-table
                :data="tableData"
                style="width:100%;margin:0 auto;"
                :cell-style="rowStyle"
                :header-cell-style="headerStyle"
                v-loading="loading"
                >
                <el-table-column
                prop="id"
                label="序列">
                </el-table-column>
                <el-table-column
                prop="info"
                label="系统事项">
                </el-table-column>
                <el-table-column
                prop="account"
                label="操作账户">
                </el-table-column>
                <el-table-column
                prop="createdAt"
                label="操作时间">
                </el-table-column>

                <el-table-column
                prop="ip"
                label="登录IP">
                </el-table-column>
            </el-table>
            <el-pagination
            align="center"
            layout="prev, pager, next, jumper,total"
            :page-size="pageSize"
            :total="total"
             @current-change="handleCurrentChange" 
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
    data(){
        return{
            tableData: [],
            loading:false,
            total:0,
            pages:1,
            pageSize:15,
        }
    },
    created(){
        this.getListData();
    },
    methods:{
        getListData(){
            this.loading=true;
            this.$api.logs({
                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;
                }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"
        }
    }
}
</script>
<style scoped>
 .bodyBoxs{
        padding: 40px;
    }
    .boxs{
        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;
    }
      .demo-ruleForm{
         width: 100%;
         box-sizing: border-box;
         padding: 24px 60px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid #ababab;
     }
     .demo-ruleForm-box{
         display: flex;
         justify-content: flex-start;
         align-items: center;
     }
     .el-form-item{
         margin: 0 15px 0 0;
     }
     .formDiv{
         margin-right: 10px;
     }
     .tatle_title{
         width: 100%;
         text-align: center;
         color: #5d5d5d;
         margin: 20px 0;
     }
     .demo-ruleForm2{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100% - 120px);
        margin: 0 auto;
     }
     .formItemBox{
        display: flex;
        justify-content: space-between;
        align-content: flex-start;
        width: 850px;
        flex-wrap: wrap;

     }
     .formItem{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
     }
     .formItem .formDiv{
        width: 100px;
     }
     .btnBox2,.btnBox1{
         margin-top: 20px;
     }
</style>