<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志管理</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="icon" th:href="@{image/sgl.png}" sizes="32x32">
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<style>
.div-inline{display:inline-block;float:right;margin-right:10px;}
.divAll{width:100%;}
.divTitle {background-color: #f2f2f2;padding-left: 15px;border-bottom: 1px solid #e6e6e6;line-height:38px;}
.divContent{border:1px solid #e6e6e6;}
.divLeft{width:200px;overflow:auto;position:absolute;top:5px;left:5px;bottom:0;}
.divRight{position:absolute;top:5px;left:212px;bottom:0;right:5px;}
.active{color:#ccc}
.btn{border: 1px solid #C9C9C9;background-color: #eee;color: #333;height: 30px;line-height: 30px;width:40px;font-size: 12px;border-radius: 2px;margin-left:-4px;cursor: pointer;}
.btn:hover{color: #555;}
.layui-table-view {margin: 0;}
#row1,#row2 {overflow: overlay;}
.move-bar div {cursor: n-resize;}
.layui-tab-card{box-shadow:none;border-radius: 0px;}
.layui-tab{margin:0;}
.layui-tab-content{padding:0;}
.layui-form-radio{margin:0;}
.tdBackground-color{background-color:#ff0000;}
</style>

<body class="layui-layout-body">

	<div class="toolbar">           	
    	
    	<div class="layui-inline">
			<span>类型搜索：</span>
			<select id="loggerType" class="layui-select formWidth" >
				<option value="">-请选择-</option>
				<option value="INFO">信息</option>
				<option value="ERROR">错误</option>
			</select>
		</div>
        
		<div class="layui-inline">
			<span>时间搜索：</span>
			<!-- <i class="layui-icon layui-icon-date date-input-icon"></i> -->
            <input type="text" id="startTime" placeholder="请选择时间 " autocomplete="off" class="layui-input formWidth" />
        </div>
        <div class="layui-inline">
			<span>至&nbsp;&nbsp;&nbsp;</span>
			<!-- <i class="layui-icon layui-icon-date date-input-icon"></i> -->
            <input type="text" id="endTime" placeholder="请选择时间 " autocomplete="off" class="layui-input formWidth" />
        </div>
        <div class="layui-inline">
			<button class="layui-btn layui-btn-sm" data-type="search" id="search"><i class="layui-icon">&#xe615;</i>查询</button>
		</div>
    </div>
    
	<table id="demo" lay-filter="test"></table>	
	   
	<!-- 显示详细信息 -->
	<div id="showInformation" style="display:none;">
		<form id="zj" style="margin-left:20px;">
			<textarea style="width:99%;height:450px" id="information"></textarea>
		</form>
	</div>	
</body>   
</html>

<script>
	var tHeight = $(".toolbar").height()+6;
    layui.use(['element','table','laydate','layer','form','tree'], function(){
		var element = layui.element,
	    table = layui.table,
	    laydate = layui.laydate,
	    layer = layui.layer,
	    form = layui.form,
	    tree = layui.tree;
	    
	    //表格加载
		table.render({
			elem: '#demo',
			height: 'full-'+tHeight,
			url: '/findLogger', //数据接口
			title: '用户表',
			page: true ,//开启分页
			limit:20,
			limits:[20,30,50],
			//toolbar: '', //开启工具栏，此处显示默认图标，可以自定义模板
			defaultToolbar: [],	 
			id:'test', 
			cols: [
			 [ //表头
			   //{type: 'checkbox', fixed: 'left'},
			   {field: 'logType', title: '信息类型',width:100},
			   {field: 'information', title: '内容', event:'showInformation'},
			   {field: 'create_time', title: '错误时间',width:200} ,
			   {field: 'user_id', title: '用户Id', sort: false,width:100},
			   {field: 'ip', title: 'IP地址', sort: false,width:150} 
			 ]
			]
		});
						
		//监听单元格事件
		table.on('tool(test)', function(obj){
		    var data = obj.data;
		    if(obj.event === 'showInformation'){
		    	$("#information").val(data.information);
		    	layer.open({
                    type:1,
                    title:"显示信息",
                    shade:0,
                    area: ['500px', '500px'],
                    offset:'auto',
                    content: $("#showInformation")
                });
		    }
		});
	
		//时间控件
		laydate.render({
	  		elem:'#startTime', //指定元素
	  		eventElem: '.date-input-icon',
	  		trigger: 'click',
		});
		laydate.render({
	  		elem:'#endTime', //指定元素
	  		eventElem: '.date-input-icon',
	  		trigger: 'click',
		});
		
		//查询
		$("#search").on('click',function(){
			var loggerType = $("#loggerType").val();
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			table.reload('test', {
            	method: 'get',
            	url:'/findLogger',
                where: {
                    'loggerType':loggerType,
                    'startTime':startTime,
                    'endTime':endTime
                },
                page: {
                    curr: 1
                }
            });
		})
		
		
		
    });
    
   
    </script>