<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" icon="el-icon-search">查询</el-button>
            <el-button type="warning" @click="reset" icon="el-icon-refresh">重置</el-button>
            <el-button type="info" @click="getError">错误日志</el-button>
        </div>

        <el-dialog v-dialogDrag title="错误日志" width="69%" :visible.sync="outerVisible">
            <div style="min-height: 600px;width: 100%" v-show="errorLog.length>0">
                <div style="min-height: 600px;width: 27%;border-right: 1px solid #b2b7b7;float: left;overflow:auto">
                    <ul>
                        <li v-for="(it,index) in errorLog" :key="index">
                            <span>日志{{index+1}}，</span><el-button type="text" @click="showMessage(it.value)">{{it.name}}</el-button>
                        </li>
                    </ul>
                </div>
                <div style="height: 600px;width: 70%;float: right;overflow:auto">
                    <div v-html="concreteLog"></div>
                </div>

            </div>
        </el-dialog>

        <el-dialog v-dialogDrag title="操作数据" width="69%" :visible.sync="operationDataVisible">
            <div style="min-height: 300px;width: 100%">
                {{currentOperationData}}
            </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 align="center" label="操作数据">
                    <template slot-scope="scope">
                        <el-button type="text" class="operatorBtn" @click="openDetail(scope.row)">打开</el-button>
                    </template>
                </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 class="pagination">
            <el-pagination background layout="prev, pager, next,total" :total="total"
                           :current-page="pageNo"       :page-size="pageSize"    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

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

                total: 0,
                pageNo: 1,
                pageSize: 50,

                outerVisible: false,
                innerVisible: false,
                operationDataVisible: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": this.startValue,
                        "endTime": this.endValue,
                        "pageNo": this.pageNo,
                        "pageSize": this.pageSize
                    };
                getLogData(data).then((res)=>{
                    console.log(res.result);
                    this.tableData = res.result.records;
                    this.total = res.result.total
                })
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.getData();
            },
            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;
                  if(this.errorLog.length>0){
                      this.concreteLog = this.errorLog[this.errorLog.length-1].value;
                  }
              })
            },
            showMessage(data){
                this.concreteLog = data;
            },
            reset(){
                this.startValue = "";
                this.endValue = "";
            },
            openDetail(data){
                this.operationDataVisible = true;
                this.currentOperationData = data.operationJson;
            }
        },
        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;
    }

    ul{
        list-style-type: circle;
    }
    li{
        display:block;
        margin:10px;
    }

    .pagination {
        padding: 18px 0;
    }

</style>