<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page isELIgnored="false"%>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>宠爱王国接口平台</title>
<link href="<%=request.getContextPath()%>/js/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/js/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/apiDoc/site.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/apiDoc/style.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/js/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/js/jquery/jquery-1.11.2.js"></script>
<script src="<%=request.getContextPath()%>/js/bootstrap/js/bootstrap.js"></script>
<script src="<%=request.getContextPath()%>/js/ztree/js/jquery.ztree.all.js"></script>

	<style type="text/css">
	.navbar-inverse {
    background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
    background-image: -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
    background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
}
	body{
		    background-color: white;
	}
	.list-group-item{
		text-shadow:none !important;
	}
	</style>
</head>
<body>
	<div class="wrap">
		<nav  class="navbar-inverse navbar-fixed-top navbar"
			role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse"
						data-target="#w0-collapse">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="<%=request.getContextPath() %>/" style="color:white;"><img style="display: inline;height: 25px; margin: -10px 0px -8px 0;" src="<%=request.getContextPath() %>/logo.png">
                    	宠爱王国接口管理系统</a>
				</div>

			</div>
		</nav>

		<div class="container">
			<div class="col-xs-2 main-left margin-left-0 pull-left padding-5">
				<div>
					<div style="margin: 5px 0 0 0;">
						<div class="zTreeDemoBackground left">
							<ul id="tree" class="ztree"></ul>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-10 margin-left-0 pull-left padding-0">
			    <div id="mainShow" style="font-size:18px;">
			        <div class="info" style="font-size:14px;">
			            <span style="font-size:30px;" class="glyphicon glyphicon-grain" aria-hidden="true"></span> <span style="font-size:16px;">欢迎使用接口管理工具 </span><br>
			            <pre class="info" style="margin:10px 34px 10px 34px">
接口管理平台说明
1.接口文档是唯一权威的接口标准
2.所有的文档修改必须同步修改接口文档
			            </pre>
			        </div>
		        </div>
		        <div id="contentShow" style="display:none;">
				    	<div class="full-height-scroll" style="float:left;overflow: auto; width: 30%; height: 100%;border-right:1px solid #e7eaec;">
				    		<ul id="interfaceList" class="list-group elements-list" style="">

				    		</ul>
				    	</div>
				    	<div class="row" style="float:left;width:70%;margin:0;background-color: #f3f3f4;height:100%;overflow:auto;">
				    	<div class="col-lg-12" >
				    		<div class="ibox">
				    			<div class="ibox-title">
				    				<h5>接口描述</h5>
				    				<div class="ibox-tools">
				    					<button  class="btn btn-sm" onclick="turnForm(false);">添加接口</button> <button onclick="turnForm(true);" class="btn btn-sm">修改接口</button>
				    					<script type="text/javascript">
				    						function turnForm(isEdit){
				    							if(isEdit){
				    								if(globalId != ""){
				    									window.location.href="<%=request.getContextPath() %>/apiDoc/apiForm.do?id="+globalId;
				    								}
				    							}else{
				    								window.location.href="<%=request.getContextPath() %>/apiDoc/apiForm.do";
				    							}

				    						}
				    					</script>
				    				</div>
				    			</div>
				    			<div class="ibox-content no-padding">
				    				<ul class="list-group">
				    					<li class="list-group-item">
				    						<p id="iName">
				    							请先选择一个接口
				    						</p>
				    						<p id="iUrl">
				    						</p>
				    					</li>
				    					<li class="list-group-item">
				    						<h5>接口参数</h5>
				    						<p id="iParams">
				    						</p>
				    						<p>
				    							<textArea id="content" style="width:50%;height:100px;float:left;" placeholder="请输入测试用的json数据"></textArea>
				    							<textArea id="result" style="width:50%;height:100px;float:left;" placeholder="请求响应的结果"></textArea>
				    							<br/>
				    							<span>请求token:</span><span id="token"></span> <button class="btn btn-sm" onclick="send()">测试</button>
				    						</p>
				    					</li>
				    					<li class="list-group-item">
				    						<h5>接口请求参数与响应说明</h5>
				    						<p id="iDescription">

				    						</p>
				    					</li>
				    				</ul>
				    			</div>
				    		</div>
				    	</div>
				    	</div>
			    </div>
			    <script type="text/javascript">
			    	height = $(window).height();
			    	$("#contentShow").height(height-115);
			    </script>
		    </div>
		</div>
	</div>
</div>
<!-- ztree -->
	<SCRIPT type="text/javascript">
	<!--
	var setting = {
		view: {
			selectedMulti: false
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onClick: doCategory
		}
	};

	var zNodes =${categorys};
	var log, className = "dark";

	$(document).ready(function(){
		$.fn.zTree.init($("#tree"), setting, zNodes);
	});

	function doCategory(event, treeId, treeNode){
		if(!treeNode.isParent){
			initInterface(treeNode.id);
			$("#mainShow").hide();
			$("#contentShow").show();
		}
	}
	//-->
	</SCRIPT>

	<script type="text/javascript">
	var obj;
	var globalParams = [];//参数列表
	var globalUrl = "";//发送url
	var globalToken = "";
	var method="";
	var globalId = "";
	function initInterface(id){
	    $.ajax({
	        type: 'GET',
	        url: 'testInterface/getByPId.do?id='+id,
	        data: {},
	        dataType: 'json',
	        cache : false,
	        timeout: 30000,
	        success: function(json){
	        	   var list = json.items;
	        	   if(list!=null &&list.length>0){
	        		   var html="";
	        		   obj = json;
	        		   $.each(list,function(index,item){
	        			   html+="<li class=\"list-group-item\"><a href=\"#\" onclick=\"changeinter('"+index+"')\"><label class=\"label  pull-right\">"+item.method+"</label> <strong>"+item.interName+"</strong> </a></li>"
	        		   });
	        		   $("#interfaceList").html(html);
	        	   }else{
	        		   $("#interfaceList").html("");
	        	   }
	        },
	        error: function(xhr, type){

	        }
	    });
	}

	//辛宏伟token
	function getToken(){
	    $.ajax({
	        type: 'GET',
	        url: 'cku/ckuLogin.do',
	        data: {
	        	userName:'xinhongwei',
	        	dynamic:'0192e012-1519-4bf2-a748-ca381db79a9f',
	        	passWord:'78fea4481d3f5c904e02387c71c4cc18'

	        },
	        dataType: 'json',
	        cache : false,
	        timeout: 30000,
	        success: function(json){
	        	if(json.rc==0){
	        		globalToken = json.item.token;
	        		$("#token").html(json.item.token);
	        	}else{
	        		$("#token").html("请求失败");
	        	}

	        },
	        error: function(xhr, type){
	        	$("#token").html("请求失败");
	        }
	    });
	}
	getToken();
	function changeinter(index){
		globalId = obj.items[index].id;
		var c = obj.items[index];
		globalUrl = c.interUrl;
		method = c.method;
		$("#iName").html("接口名："+c.interName);
		$("#iUrl").html("请求方式："+c.method+"<br/>接口地址："+c.interUrl);
		$("#iDescription").html(c.description);
		globalId = c.id;
		if(globalId!=-1){

			getParams(globalId,c.interUrl);
		}
		return false;
	}
	function getParams(id){
		if(globalId==-1){
			alert("请选择接口!");
			return;
		};
	    $.ajax({
	        type: 'GET',
	        url: 'testInterface/getParams.do',
	        data: {interfaceId:id},
	        dataType: 'json',
	        cache : false,
	        timeout: 30000,
	        success: function(json){
	        	   var list = json.items;
	        	   if(list!=null &&list.length>0){
	        		   var html=" ";
	        		   $.each(list,function(index,item){
	        			   html+="<div class=\"input-group\"><span class=\"input-group-addon\" id=\"param"+item.paramsName+"\">"+item.paramsName+"</span>"+
	        				  "<input type=\"text\" class=\"form-control\" id=\"val"+item.paramsName+"\" value=\""+(item.paramsName=='token'?globalToken:'')+"\" placeholder=\""+item.paramsType+":"+item.paramsLimit+"\" aria-describedby=\"basic-addon1\"></div>";
	        				  globalParams.push(item.paramsName);
	        		   });
	        		   html+="<div class=\"well\">"
	        		   $.each(list,function(index,item){
	        		   html+=item.paramsName+"&nbsp:&nbsp"+item.remarks+"<br>"
	        		   });
	        		   html+="</div>"
	        		   $("#iParams").html(html);
	        	   }else{
	        		   $("#iParams").html("");
	        	   }

	        },
	        error: function(xhr, type){

	        }
	    });
	}


	function send(){
		var params = {};
		if(globalParams.length>0){
			for(var i=0;i<globalParams.length;i++){
				var inne = globalParams[i];
				if($("#val"+inne).val()==''){

				}else{
					params[inne] = $("#val"+inne).val();
				}
			}
		}
		console.log(params);
		var i =0;
		for(param in params){
			if(i==0){
				globalUrl+="?"+param+"="+encodeURI(params[param]);
			}else{
				globalUrl+="&"+param+"="+encodeURI(params[param]);
			}
			i++;
		}

		if(method == null){
			method = "POST";
		}

		var content = $("#content").val();
	    $.ajax({
	        type: method,
	        url: globalUrl,
	        data:JSON.stringify(content),
	        dataType: 'json',
	        contentType:"application/json;charset=UTF-8",
	        cache : false,
	        timeout: 30000,
	        success: function(json){
	       		$("#result").html(formatJson(json));
	        },
	        error: function(xhr, type){
	        	$("#result").html("请求出错！");
	        }
	    });
	}
	var formatJson = function(json, options) {
		var reg = null,
			formatted = '',
			pad = 0,
			PADDING = '    '; // one can also use '\t' or a different number of spaces

		// optional settings
		options = options || {};
		// remove newline where '{' or '[' follows ':'
		options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
		// use a space after a colon
		options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;

		// begin formatting...
		if (typeof json !== 'string') {
			// make sure we start with the JSON as a string
			json = JSON.stringify(json);
		} else {
			// is already a string, so parse and re-stringify in order to remove extra whitespace
			json = JSON.parse(json);
			json = JSON.stringify(json);
		}

		// add newline before and after curly braces
		reg = /([\{\}])/g;
		json = json.replace(reg, '\r\n$1\r\n');

		// add newline before and after square brackets
		reg = /([\[\]])/g;
		json = json.replace(reg, '\r\n$1\r\n');

		// add newline after comma
		reg = /(\,)/g;
		json = json.replace(reg, '$1\r\n');

		// remove multiple newlines
		reg = /(\r\n\r\n)/g;
		json = json.replace(reg, '\r\n');

		// remove newlines before commas
		reg = /\r\n\,/g;
		json = json.replace(reg, ',');

		// optional formatting...
		if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
			reg = /\:\r\n\{/g;
			json = json.replace(reg, ':{');
			reg = /\:\r\n\[/g;
			json = json.replace(reg, ':[');
		}
		if (options.spaceAfterColon) {
			reg = /\:/g;
			json = json.replace(reg, ': ');
		}

		$.each(json.split('\r\n'), function(index, node) {
			var i = 0,
				indent = 0,
				padding = '';

			if (node.match(/\{$/) || node.match(/\[$/)) {
				indent = 1;
			} else if (node.match(/\}/) || node.match(/\]/)) {
				if (pad !== 0) {
					pad -= 1;
				}
			} else {
				indent = 0;
			}

			for (i = 0; i < pad; i++) {
				padding += PADDING;
			}

			formatted += padding + node + '\r\n';
			pad += indent;
		});

		return formatted;
	};

	</script>
	<%@include file="footer.jsp" %>
</body>

</html>
