<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.username" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="filters.methodname" placeholder="系统动作"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="filters.modelnamecn" placeholder="操作模块"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getRoles()">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="logs" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="logid" label="ID" width="80" sortable>
            </el-table-column>
            <el-table-column prop="username" label="操作账号" width="120" sortable>
            </el-table-column>
            <el-table-column prop="ip" label="IP" width="100" sortable>
            </el-table-column>
            <el-table-column prop="logcreattime" label="操作时间" width="200" sortable>
            </el-table-column>
            <el-table-column prop="methodname" label="系统动作" width="120" sortable>
            </el-table-column>
            <el-table-column prop="operatenamecn" label="动作描述" width="120" sortable>
            </el-table-column>
            <el-table-column prop="modelnamecn" label="操作模块" width="120" sortable>
            </el-table-column>
            <!--<el-table-column prop="parameters" label="参数" width="100" sortable>-->
            <!--</el-table-column>-->
            <el-table-column prop="classname" label="系统类" show-overflow-tooltip="true" width="100" sortable>
            </el-table-column>
            <el-table-column prop="result" label="操作结果" min-width="200" sortable>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
    import util from '../../common/js/util'
    import NProgress from 'nprogress'
    import moment from 'moment'
    import { getList } from '../../api/log_api';
    export default {
        data() {
            return {
                filters: {},
                logs: [],
                total: 0,
                pageNum: 1,
                pageSize: 10,
                listLoading: false,
                sels: [],//列表选中列
            }
        },
        methods: {
            //性别显示转换
            formatSex: function (row, column) {
                return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
            },
            formatState: function (row, column) {
                return row.state == true ? '是' : row.state == false ? '否' : '未知';
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getRoles();
            },
            //获取角色列表
            getLogs() {
                let para = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                };
                this.listLoading = true;
                //NProgress.start();
                getList(para).then((res) => {
                    this.total = res.data.total;
                    this.logs = res.data.list;
                    this.listLoading = false;
                    //NProgress.done();
                }).catch((error) => {

                    this.listLoading = false;
                    if(null!= error.response && error.response!==undefined){
                        let status= error.response.status;
                        let msg = error.response.statusText;
                        alert(status+msg);
                    }else {
                        alert(error);
                    }



                });

            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = { ids: ids };
                    batchRemove(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getRoles();
                    });
                }).catch(() => {

                });
            }
        },
        mounted() {
            this.getLogs();
        }
    }

</script>

<style scoped>

</style>