<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>
<script th:include="sys/common/metaCSS" th:remove="tag"></script> 
<script th:include="sys/common/metaJS" th:remove="tag"></script> 
<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/sys/js/My97DatePicker/WdatePicker.js}"></script>
</head>
<style>
	.tablelink{margin-right:10px;}
	.stylecss{
	      color: red;
	}
	.select_width{
	     width: 220px;
	}
	.date_width{
	     width: 150px;
	}
	#joinServiceEdit label{
		font-size: 13px;
	}
	
	
	.tablelist th,td{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>

<body>
<div class="place">
	<span>位置：</span>
	<ul class="placeul">
		<li><a th:href="@{/sys/log/list}">日志列表</a></li>
	</ul>
</div>
<div class="rightinfo">
	<form id="seachform" th:action="@{/sys/log/list}" method="post">
	  <input type="hidden" name="reportType" id="reportType" />
		<ul class="seachform">
			<li>
			  <input style="width: 150px;" name="methodName" placeholder="API接口/API名称/方法名称" type="text" class="scinput" th:value="${search.get('methodName')}"/>
		    </li>
		    <li>
			  <input style="width: 150px;" name="userId" placeholder="用户ID/请求TOKEN" type="text" class="scinput" th:value="${search.get('userId')}"/>
		    </li>
		    <li>
			  <input style="width: 150px;" name="postBody" placeholder="请求参数/请求的BODY" type="text" class="scinput" th:value="${search.get('postBody')}"/>
		    </li>
		    <li>
			  <input style="width: 150px;" name="ipAddress" placeholder="请求IP地址" type="text" class="scinput" th:value="${search.get('ipAddress')}"/>
		    </li>
		    <li>
		    	<input type="text" id="startTime" name="startTime"  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" autocomplete="off" th:value="${search.get('startTime')}" class="scinput date_width " placeholder="开始时间">
		    </li>
		     <li>
		    	<input type="text" id="endTime" name="endTime"  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startTime\')}'})" autocomplete="off" th:value="${search.get('endTime')}" class="scinput date_width " placeholder="开始时间">
		    </li>
		    
		    <li>
			  <input type="button" class="scbtn" value="查询" />
		    </li>
		    
		    <li>
				<label>自动刷新</label>
				<select class="scinput select_width" name="refresh" id="refresh" style="width: 100px;">
					<option value="0" th:selected="${search.get('refresh') eq '0' ? 'true' : 'false'} ">不刷新</option>
					<option value="5" th:selected="${search.get('refresh') eq '5' ? 'true' : 'false'} ">5秒</option>
					<option value="10" th:selected="${search.get('refresh') eq '10' ? 'true' : 'false'} ">10秒</option>
					<option value="30" th:selected="${search.get('refresh') eq '30' ? 'true' : 'false'} ">30秒</option>
					<option value="60" th:selected="${search.get('refresh') eq '60' ? 'true' : 'false'} ">60秒</option>
				</select>
			</li>
		</ul>
	</form>

	<table class="tablelist">
		<thead>
		    <tr>
<!-- 		    	<th style="width: 7%">手机串号 </th> -->
<!-- 		    	<th style="width: 7%">手机系统</th> -->
<!-- 		    	<th style="width: 7%">机型</th> -->
<!-- 		    	<th style="width: 7%">客户端线上版本号</th> -->
<!-- 		    	<th style="width: 7%">平台</th> -->
<!-- 		    	<th style="width: 7%">客户端开发版本号</th> -->
				<th style="width: 7%">请求时间</th>
		    	<th style="width: 7%">API接口</th>
		    	<th style="width: 7%">API名称</th>
		    	<th style="width: 7%">方法名称</th>
		    	<th style="width: 7%">请求IP地址</th>
		    	<th style="width: 7%">请求TOKEN</th>
		    	<th style="width: 7%">用户ID</th>
<!-- 		    	<th style="width: 7%">请求参数</th> -->
<!-- 		    	<th style="width: 7%">POST请求的BODY</th> -->
		    </tr> 
		</thead>
		<tbody>
			<tr th:each="item:${list}" th:onclick="${'infoLog('''+item.id+''')'}">
<!-- 				<td th:text="${item.phoneimei}"></td> -->
<!-- 				<td th:text="${item.phonesys}"></td> -->
<!-- 				<td th:text="${item.phonetype}"></td> -->
<!-- 				<td th:text="${item.version}"></td> -->
<!-- 				<td th:text="${item.platform}"></td> -->
<!-- 				<td th:text="${item.build}"></td> -->
				<td th:text="${#dates.format(item.requestDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
				<td th:text="${item.apiUrl}"></td>
				<td th:text="${item.apiName}"></td>
				<td th:text="${item.methodName}"></td>
				<td th:text="${item.ipAddress}"></td>
				<td th:text="${item.accessToken}"></td>
				<td th:text="${item.userId}"></td>
<!-- 				<td th:text="${item.requestMap}"></td> -->
<!-- 				<td th:text="${item.postBody}"></td> -->
			</tr>
		</tbody>
	</table>


	<!-- 分页 -->
	<div class="pagin">
    	<div class="message">共<i class="blue">[[${page.rowCnt}]]</i>条记录，当前显示第&nbsp;<i class="blue">[[${page.pageNo }]]&nbsp;</i>页</div>
    	<div th:utext='${listNavigatHtml}' th:remove="tag" ></div>
   	</div>
</div>

<script type="text/javascript">

function infoLog(id){
	layer.open({
	    type: 2,
	    title: "日志明细",
	    closeBtn: 1, //不显示关闭按钮
	    shift: 0.8,
	    offset: '50px',
	    area: ['60%', '80%'],
	    content: '[[${sysUrl}]]/sys/log/info.html?id='+id
	});
}

$(function (){
	var time =null;
	var refresh=$("#refresh").val();
	
	if(refresh>0){
		time=setInterval(function() {
			$("#seachform").submit();
		}, 1000*refresh);
	}
	
  	$('#refresh').change(function(){
  		clearInterval(time);
  		refresh=$("#refresh").val();
  		if(refresh>0){
  			time=setInterval(function() {
  				$("#seachform").submit();
  			}, 1000*refresh);
  		}
    });

})

	
	
</script>


</html>