<!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="title" class="layui-select formWidth" >
				<option value="">-请选择-</option>
				<option value="根据卡号获取患者">根据卡号获取患者</option>
				<option value="获取科室">获取科室</option>
				<option value="获取科室排班">获取科室排班</option>
				<option value="预约">预约</option>
				<option value="取消预约">取消预约</option>
				<option value="预约记录">预约记录</option>
				<option value="检查报告">检查报告</option>
				<option value="门诊充值">门诊充值</option>
				<option value="充值记录">充值记录</option>
				<option value="缴费主信息">缴费主信息</option>
				<option value="缴费明细信息">缴费明细信息</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="请选择开始时间 " th:value="${startTime}"  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="请选择结束时间 " th:value="${endTime}" 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"></i>查询</button>
			<button class="layui-btn layui-btn-sm" data-type="detail" id="detail"><i class="layui-icon"></i>详情</button>
		</div>
    </div>
    
	<table id="demo" lay-filter="test"></table>	
	   
	<!-- 显示详细信息 -->
	<div id="showInformation" style="display:none;">
		<form id="" class="" style="margin-top:20px;">
			<div class="layui-form-item">
                <label class="layui-form-label" lay-verify="required">接口名称:</label>
                <div class="layui-input-block">
                    <input type="text"  id="d-title"  class="layui-input" style="width:300px">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">请求内容:</label>
                <div class="layui-input-block">
                    <textarea style="width:300px;height:100px" id="d-request"></textarea>
                </div>
            </div>
			<div class="layui-form-item">
				<label class="layui-form-label">响应内容:</label>
				<div class="layui-input-block">
					<textarea style="width:300px;height:100px" id="d-response"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">创建时间:</label>
				<div class="layui-input-block">
					<input type="text"  id="d-create_time"  class="layui-input" style="width:300px">
				</div>
			</div>
		</form>
	</div>
	</div>	
</body>   
</html>

<script>
	var tHeight = $(".toolbar").height()+6;
    layui.use(['element','table','laydate','layer','form','tree','util'], function(){
		var element = layui.element,
	    table = layui.table,
	    laydate = layui.laydate,
	    layer = layui.layer,
	    form = layui.form,
	    tree = layui.tree,
	    util = layui.util;
	    //表格加载
		table.render({
			elem: '#demo',
			height: 'full-'+40,
			data:[],
			title: '日志表',
			page: true ,//开启分页
			limit:20,
			limits:[20,30,50],
			//toolbar: '', //开启工具栏，此处显示默认图标，可以自定义模板
			defaultToolbar: [],	 
			id:'test', 
			escape:false,
			cols: [
			 [ //表头
			   {type: 'checkbox', fixed: 'left'},
			   {field: 'TITLE', title: '接口',width:100},
			   {field: 'REQUEST_CONTENT', title: '请求内容',width:300,templet:function(d){
			    return util.escape(d.REQUEST_CONTENT);
			   }},
			   {field: 'RESPONSE_CONTENT', title: '响应内容',width:300} ,
			   {field: 'CREATE_DATE', title: '创建日期', sort: false,width:120},
			   {field: 'CREATE_TIME', title: '创建时间', sort: false,width:180} 
			 ]
			]
		});
						
		//时间控件
		laydate.render({
	  		elem:'#startTime', //指定元素
	  		eventElem: '.date-input-icon',
	  		trigger: 'click',
		});
		laydate.render({
	  		elem:'#endTime', //指定元素
	  		eventElem: '.date-input-icon',
	  		trigger: 'click',
		});
		
		//查询
		$("#search").on('click',function(){
			findHisLog();
		})
		findHisLog();
		function findHisLog(){
			var title = $("#title").val();
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			table.reload('test', {
            	method: 'get',
            	url:'/findHisLog',
                where: {
                    'title':title,
                    'startTime':startTime,
                    'endTime':endTime
                },
                page: {
                    curr: 1
                }
            });
		}
		//详情
		$("#detail").on('click',function(){
			var checkStatus = table.checkStatus('test');
      		var length = checkStatus.data.length;
      		if(length!=1){
      			layer.msg('请选择一条数据');
      			return;
      		}
      		$("#d-title").val(checkStatus.data[0].TITLE);
      		$("#d-request").val(checkStatus.data[0].REQUEST_CONTENT);
      		$("#d-response").val(checkStatus.data[0].RESPONSE_CONTENT);
      		$("#d-create_time").val(checkStatus.data[0].CREATE_TIME);
			layer.open({
                type:1,
                title:"显示信息",
                shade:0,
                area: ['500px', '500px'],
                offset:'auto',
                content: $("#showInformation")
            });
		})
    });
    </script>