<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> 
<link href="sys/css/jsoneditor.min.css" th:href="@{/static/sys/css/jsoneditor.min.css}"  rel="stylesheet" type="text/css">
<script src="sys/js/jsoneditor.min.js" th:src="@{/static/sys/js/jsoneditor.min.js}"></script>
</head>
 <style type="text/css">
	label{
		height: 34px;
		width: 200px;
		color: red;
		font-weight: bold;
	}
	input{
		height: 34px;
		border: solid 1px #ced9df;
		width: 100%
	}
	div.jsoneditor-menu{
		display: none
	}
</style>
<body>
<div class="formbody">
		<ul class="forminfo">
		
			<li>
				<label>请求时间：<b></b></label>
				<input type="text" th:value="${#dates.format(apiLog.requestDate, 'yyyy-MM-dd HH:mm:ss')}"/>
			</li>
			<li>
				<label>API接口：<b></b></label>
				<input type="text" th:value="${apiLog.apiUrl}"/>
			</li>
			<li>
				<label>API名称：<b></b></label>
				<input type="text" th:value="${apiLog.apiName}"/>
			</li>
			<li>
				<label>方法名称：<b></b></label>
				<input type="text" th:value="${apiLog.methodName}"/>
			</li>
		
		
			<li>
				<label>手机串号：</label>
				<input type="text" th:value="${apiLog.phoneimei}"/>
			</li>
			<li>
				<label>手机系统：<b></b></label>
				<input type="text" th:value="${apiLog.phonesys}"/>
			</li>
			
			<li>
				<label>机型：<b></b></label>
				<input type="text" th:value="${apiLog.phonetype}"/>
			</li>
			
			<li>
				<label>客户端线上版本号：<b></b></label>
				<input type="text" th:value="${apiLog.version}"/>
			</li>
			
			<li>
				<label>平台：<b></b></label>
				<input type="text" th:value="${apiLog.platform}"/>
			</li>
			
			<li>
				<label>客户端开发版本号：<b></b></label>
				<input type="text" th:value="${apiLog.build}"/>
			</li>
			
			<li>
				<label>请求IP地址：<b></b></label>
				<input type="text" th:value="${apiLog.ipAddress}"/>
			</li>
			<li>
				<label>请求TOKEN：<b></b></label>
				<input type="text" th:value="${apiLog.accessToken}"/>
			</li>
			<li>
				<label>用户ID：<b></b></label>
				<input type="text" th:value="${apiLog.userId}"/>
			</li>
			<li>
				<label>请求参数：<b></b></label>
				<input type="text" th:value="${apiLog.requestMap}"/>
				<div style="display: none" id="requestMap" th:text="${apiLog.requestMap}"></div>
				<div id="jsoneditorMap" style="width: 100%; height: 200px"></div>	
			</li>
			<li>
				<label style="width: 200px;">POST请求的BODY：<b></b></label>
				<input type="text" th:value="${apiLog.postBody}"/>
				<div style="display: none" id="postBody" th:text="${apiLog.postBody}"></div>
				<div id="jsoneditorBody" style="width: 100%; height: 300px"></div>	
			</li>
		
		</ul>
		
</div>


</body>
<script type="text/javascript">
	var container = document.getElementById("jsoneditorMap");
	var options = {
	        mode: 'tree',
	        onError: function (err) {  
	        }
	};
	var editor = new JSONEditor(container, options, null); 
	$(function (){
		setJSON();
	})
	function setJSON () {
		var jsonObj=JSON.parse($("#requestMap").html());
	    editor.set(jsonObj);
	    $(".jsoneditor-expand-all").click();
	}


	var containerBody = document.getElementById("jsoneditorBody");
	var optionsBody = {
	        mode: 'tree',
	        onError: function (err) {  
	        }
	};
	var editorBody = new JSONEditor(containerBody, optionsBody, null); 
	$(function (){
		setJSONBody();
	})
	function setJSONBody () {
		var jsonObj=JSON.parse($("#postBody").html());
	    editorBody.set(jsonObj);
	    $(".jsoneditor-expand-all").click();
	}
	
	

</script>
</html>