<template>
    <div class="log-content">
        <div class="log-search">
            开始时间：
            <el-date-picker
                    v-model="startValue"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions">
            </el-date-picker>
            结束时间：
            <el-date-picker
                    v-model="endValue"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
            <el-button type="info" @click="getError">错误日志</el-button>
        </div>

        <el-dialog title="错误日志" :visible.sync="outerVisible">
            <div v-for="(item,index) in errorLog" :key="index">
               <span> {{item.name}}</span> <br/>
               <span> {{item.value}}</span>
            </div>
        </el-dialog>

        <div class="log-table">
            <el-table :data="tableData">
                <el-table-column type="index" width="80" align="center" label="序号">
                </el-table-column>
                <el-table-column prop="operationtype" align="center" label="操作类型">
                </el-table-column>
                <el-table-column prop="username" align="center" width="100" label="操作人">
                </el-table-column>
                <el-table-column prop="addtime" align="center" label="操作时间">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {getLogData,getErrorLog} from "@api/manage";
    export default {
        name: "index",
        data(){
            return{
                tableData:[],
                errorLog:[],

                outerVisible: false,
                innerVisible: false,

                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                startValue: '',
                endValue:'',

            }
        },
        methods:{
            getData(){
                let data={
                        "startTime": "",
                        "pageNo": 1,
                        "pageSize": 50
                    };
                getLogData(data).then((res)=>{
                    console.log(res.result);
                    this.tableData = res.result.records;
                })
            },
            query(){
                let data={
                    "startTime": this.startValue,
                    "endTime": this.endValue,
                    "pageNo": 1,
                    "pageSize": 50
                };
                getLogData(data).then((res)=>{
                    console.log(res.result);
                    this.tableData = res.result.records;
                })
            },
            getError(){
              getErrorLog().then((res)=>{
                  console.log(res.result)
                  this.errorLog= res.result;
                  this.outerVisible = true;
              })
            },
            reset(){
                this.startValue = "";
                this.endValue = "";
            }
        },
        mounted() {
            this.getData();
        }
    }
</script>

<style scoped>
    .log-content{
        width: 100%;
        /*border: 1px solid red;*/
    }
    .log-search{
        margin-top: 10px;
        padding-left: 15px;
        padding-top: 20px;
        width: 100%;
        border: 1px solid #a8adad;
        height: 60px;
        background-color: white;
    }
    .log-table{
        margin-top: 10px;
        width: 100%;
        border: 1px solid #a8adad;
    }
    .el-button {
        width: 100px;
        margin-left: 15px;
    }
</style>