<#include "/incloud/header.ftl"/>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<@header></@header>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <@top></@top>
    <@left></@left>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                日志管理
                <small>Optional description</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
                <li class="active">Here</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content container-fluid" id="app">
            <div class="box-body">
                <!--查询区域-->
                <div class="query">
                    <el-form :inline="true" :model="con" class="demo-form-inline">
                     	 <el-form-item label="生成日期" :label-width="queryLabelWidth">
		                    <el-date-picker
						      v-model="tempCon.time"
						      type="datetimerange"
						      range-separator="至"
						      start-placeholder="开始日期"
						      end-placeholder="结束日期"
                              value-format = "yyyy-MM-dd HH:mm:ss">
						    </el-date-picker>
					    </el-form-item>
					    <el-form-item label="日志类型" :label-width="queryLabelWidth">
		                    <el-select v-model="con.type" placeholder="请选择">
		                    	<el-option :key="0" :label="'全部'" :value="0"></el-option>
                                <el-option v-for="item in type " :key="item.val" :label="item.key" :value="item.val"></el-option>
							 </el-select>
					    </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="con.currentPage = 1;loadTable1()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--功能按钮区-->
                <!--表格区-->
                <el-table border
                          :data="tableData"
                          style="width: 100%">

                    <el-table-column min-width="100px"
                                     label="日志类型"
                                     prop="order_name">
                        <template slot-scope="scope">
                            {{scope.row.type|getEnumKey(type)}}
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="创建时间"
                                     prop="time">
                    </el-table-column>

                    <el-table-column min-width="130px"
                                     label="账户"
                                     prop="account">
                    </el-table-column>

                    <el-table-column min-width="130px"
                                     label="ip"
                                     prop="ip">
                    </el-table-column>

                    <el-table-column min-width="130px"
                                     label="方法名"
                                     prop="method_name">
                    </el-table-column>

                    <el-table-column min-width="130px"
                                     label="类名"
                                     prop="class_name">
                    </el-table-column>
                    <el-table-column min-width="130px"
                                     label="异常信息"
                                     prop="error_msg">
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="con.currentPage"
                            :page-sizes="[1,10, 50, 200, 500]"
                            :page-size="con.pageSize"
                            layout="total, sizes, prev, pager, next, jumper, slot"
                            :total="con.total">
                    </el-pagination>
                </div>

            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- Main Footer -->
    <@footer></@footer>
</div>
</body>
<script src="/js/util/dyAjax.js"></script>
<script>
    $(function () {
        var option = {
            mixins: [dyMixin],
            data() {
                return {
                    tempCon:{time:[]},
                    con: {currentPage: 1, pageSize: 10, total: 0},//查询条件
                    tableData: [],
                    type: [// 订单状态
                        {key: '一般日志', val: 1}, {key: '异常日志', val: 2}
                    ]
                }
            },
            mounted: function () {
                this.loadTable1();
            },
            methods: {
                //翻页大小改变事件
                handleSizeChange(val) {
                    var _this = this;
                    _this.con.pageSize = val;
                    _this.loadTable1();
                },
                //翻页翻页事件
                handleCurrentChange(val) {
                    var _this = this;
                    _this.con.currentPage = val;
                    _this.loadTable1();
                },
                //加载表数据
                loadTable1: function (callback) {
                    var _this = this;
                    if(this.tempCon.time){
                        this.con.startTime = this.tempCon.time[0]
                        this.con.endTime = this.tempCon.time[1]
                    }else{
                        this.con.startTime = undefined
                        this.con.endTime = undefined
                    }
                    this.con.type = this.con.type==0?undefined:this.con.type;
                    $.dyAjax('/logs/page', this.con, function (data) {
                        callback && callback(data);
                        console.log(data)
                        _this.tableData = data.list;
                        _this.con.total = data.total;
                        _this.con.currentPage = data.pageNum;
                        _this.con.pageSize = data.pageSize;
                    });
                },
            }
        };
        var app = Vue.extend(option);
        new app().$mount('#app');
    });
</script>
</html>