<%@ 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>
<script type="text/javascript" charset="utf-8" src="<%=request.getContextPath() %>/js/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=request.getContextPath() %>/js/ueditor.all.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="<%=request.getContextPath() %>/js/lang/zh-cn/zh-cn.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="contentShow" >

				    	<div class="row" style="float:left;width:100%;margin:0;background-color: #f3f3f4;height:100%;overflow:auto;">
				    	<div class="col-lg-12" >
				    		<div class="ibox">
				    			<div class="ibox-title">
				    				<h5>添加/修改接口</h5>
				    			</div>
				    			<div class="ibox-content no-padding">
				    				<ul class="list-group">
				    					<li class="list-group-item">
				    						<p id="iName">
												<div class="input-group">
											  	<span class="input-group-addon" id="basic-addon1">分类ID</span>
											  	<input type="text" class="form-control" value=" " id="categoryId" placeholder="参考左分类，填入分类的id" aria-describedby="basic-addon1">
											  	</div>
												<div class="input-group">
											  	<span class="input-group-addon" id="basic-addon1">接口名称</span>
											  	<input type="text" class="form-control" id="interName" placeholder="interName" aria-describedby="basic-addon1">
											  	</div>
											  	<div class="input-group">
											  	<span class="input-group-addon" id="basic-addon1">接口地址</span>
											  	<input type="text" class="form-control" id="interUrl" placeholder="interUrl" aria-describedby="basic-addon1">
											  	</div>
											  	<div class="input-group">
											  	<span class="input-group-addon" id="basic-addon1">请求方式</span>
											  	<select class="form-control" id="method">
											  		<option value="GET">GET</option>
											  		<option value="POST">POST</option>
											  		<option value="PUT">PUT</option>
											  		<option value="DELETE">DELETE</option>
											  	</select>
											  	</div>
				    						</p>

				    						<button class="btn btn-sm" onclick="add();">添加参数</button>
			    							<p id="params">
				    						</p>
				    					</li>
				    					<li class="list-group-item">
				    						<h5>接口请求参数与响应说明</h5>
				    						<p id="iDescription">
				    							<textarea name="description" id="editor" ><table class="t" width="730"><tbody><tr class="firstRow"><th width="80" style="padding: 7px 0px; border-right-color: rgb(228, 228, 228); border-bottom-color: rgb(228, 228, 228); margin: 0px; font-weight: normal; text-align: center; font-size: 14px; line-height: 20px; background-color: rgb(239, 239, 239);"><strong>参数名称</strong></th><th width="80" style="padding: 7px 0px; border-right-color: rgb(228, 228, 228); border-bottom-color: rgb(228, 228, 228); margin: 0px; font-weight: normal; text-align: center; font-size: 14px; line-height: 20px; background-color: rgb(239, 239, 239);"><strong>是否必须</strong></th><th width="80" style="padding: 7px 0px; border-right-color: rgb(228, 228, 228); border-bottom-color: rgb(228, 228, 228); margin: 0px; font-weight: normal; text-align: center; font-size: 14px; line-height: 20px; background-color: rgb(239, 239, 239);"><strong>类型</strong></th><th style="padding: 7px 0px; border-right-color: rgb(228, 228, 228); border-bottom-color: rgb(228, 228, 228); margin: 0px; font-weight: normal; text-align: center; font-size: 14px; line-height: 20px; background-color: rgb(239, 239, 239);"><strong>描述</strong></th></tr><tr><td style="padding-top: 10px; padding-right: 0px; padding-bottom: 10px; border-right-color: rgb(228, 228, 228); border-bottom-color: rgb(228, 228, 228); margin: 0px; font-family: Tahoma, SimSun; line-height: 18px;"><br/></td><td style="padding-top: 10px; padding-right: 0px; padding-bottom: 10px; border-right-color: rgb(228, 228, 228); border-bottom-color: rgb(228, 228, 228); margin: 0px; font-family: Tahoma, SimSun; line-height: 18px;"><br/></td><td style="padding-top: 10px; padding-right: 0px; padding-bottom: 10px; border-right-color: rgb(228, 228, 228); border-bottom-color: rgb(228, 228, 228); margin: 0px; font-family: Tahoma, SimSun; line-height: 18px;"><br/></td><td style="padding-top: 10px; padding-right: 0px; padding-bottom: 10px; border-right-color: rgb(228, 228, 228); border-bottom-color: rgb(228, 228, 228); margin: 0px; font-family: Tahoma, SimSun; line-height: 18px;"><br/></td></tr><tr><td colspan="1" rowspan="1" style="border-top-color: rgb(228, 228, 228); border-left-color: rgb(228, 228, 228);"><br/></td><td colspan="1" rowspan="1" style="border-top-color: rgb(228, 228, 228); border-left-color: rgb(228, 228, 228);"><br/></td><td colspan="1" rowspan="1" style="border-top-color: rgb(228, 228, 228); border-left-color: rgb(228, 228, 228);"><br/></td><td colspan="1" rowspan="1" style="border-top-color: rgb(228, 228, 228); border-left-color: rgb(228, 228, 228);"><br/></td></tr><tr><td colspan="1" rowspan="1" style="border-top-color: rgb(228, 228, 228); border-left-color: rgb(228, 228, 228);"><br/></td><td colspan="1" rowspan="1" style="border-top-color: rgb(228, 228, 228); border-left-color: rgb(228, 228, 228);"><br/></td><td colspan="1" rowspan="1" style="border-top-color: rgb(228, 228, 228); border-left-color: rgb(228, 228, 228);"><br/></td><td colspan="1" rowspan="1" style="border-top-color: rgb(228, 228, 228); border-left-color: rgb(228, 228, 228);"><br/></td></tr><tr><td colspan="1" rowspan="1" style="border-top-color: rgb(228, 228, 228); border-left-color: rgb(228, 228, 228);"><br/></td><td colspan="1" rowspan="1" style="border-top-color: rgb(228, 228, 228); border-left-color: rgb(228, 228, 228);"><br/></td><td colspan="1" rowspan="1" style="border-top-color: rgb(228, 228, 228); border-left-color: rgb(228, 228, 228);"><br/></td><td colspan="1" rowspan="1" style="border-top-color: rgb(228, 228, 228); border-left-color: rgb(228, 228, 228);"><br/></td></tr></tbody></table><h3 style="white-space: normal; margin: 10px 0px 0px; padding: 0px; font-size: 14px; font-family: &quot;Microsoft Yahei&quot;; font-weight: bolder; line-height: 30px; height: 37px; overflow: hidden; background-color: rgb(255, 255, 255);"><span class="mw-headline" style="line-height: 25px;">调用的json格式例子</span></h3><h3 style="white-space: normal; margin: 10px 0px 0px; padding: 0px; font-size: 14px; font-family: &quot;Microsoft Yahei&quot;; font-weight: bolder; line-height: 30px; height: 37px; overflow: hidden; background-color: rgb(255, 255, 255);"><span class="mw-headline" style="line-height: 25px;">返回码说明</span></h3><table class="t" width="730"><tbody><tr class="firstRow"><th width="150" style="padding: 7px 0px; border-right-color: rgb(228, 228, 228); border-bottom-color: rgb(228, 228, 228); margin: 0px; font-weight: normal; text-align: center; font-size: 14px; line-height: 20px; background-color: rgb(239, 239, 239);">返回码</th><th width="550" style="padding: 7px 0px; border-right-color: rgb(228, 228, 228); border-bottom-color: rgb(228, 228, 228); margin: 0px; font-weight: normal; text-align: center; font-size: 14px; line-height: 20px; background-color: rgb(239, 239, 239);">含义说明</th></tr><tr><td style="padding-top: 10px; padding-right: 0px; padding-bottom: 10px; border-right-color: rgb(228, 228, 228); border-bottom-color: rgb(228, 228, 228); margin: 0px; font-family: Tahoma, SimSun; line-height: 18px;"><br/></td><td style="padding-top: 10px; padding-right: 0px; padding-bottom: 10px; border-right-color: rgb(228, 228, 228); border-bottom-color: rgb(228, 228, 228); margin: 0px; font-family: Tahoma, SimSun; line-height: 18px;"><br/></td></tr></tbody></table></textarea>
				    						</p>
				    					</li>
				    					<li class="list-group-item">
				    						<button class="btn" onclick="save()">提交</button>
				    					</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
			}
		}
	};

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

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


	//-->
	</SCRIPT>
	<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    ue = UE.getEditor('editor',{
        catchRemoteImageEnable:false,
		toolbars: [
			[
				//'anchor', //锚点
				'undo', //撤销
				'redo', //重做
				'bold', //加粗
				'indent', //首行缩进
				'snapscreen', //截图
				'italic', //斜体
				'underline', //下划线
				'strikethrough', //删除线
				'subscript', //下标
				'fontborder', //字符边框
				'superscript', //上标
				'formatmatch', //格式刷
				'source', //源代码
				'blockquote', //引用
				'pasteplain', //纯文本粘贴模式
				'selectall', //全选
				//'print', //打印
				//'preview', //预览
				'horizontal', //分隔线
				'removeformat', //清除格式
				'time', //时间
				'date', //日期
				//'unlink', //取消链接
				'insertrow', //前插入行
				'insertcol', //前插入列
				'mergeright', //右合并单元格
				'mergedown', //下合并单元格
				'deleterow', //删除行
				'deletecol', //删除列
				'splittorows', //拆分成行
				'splittocols', //拆分成列
				'splittocells', //完全拆分单元格
				'deletecaption', //删除表格标题
				'inserttitle', //插入标题
				'mergecells', //合并多个单元格
				'deletetable', //删除表格
				'cleardoc', //清空文档
				'insertparagraphbeforetable', //"表格前插入行"
				//'insertcode', //代码语言
				'fontfamily', //字体
				'fontsize', //字号
				'paragraph', //段落格式
				'simpleupload', //单图上传
				'insertimage', //多图上传
				'edittable', //表格属性
				'edittd', //单元格属性
				'link', //超链接
				//'emotion', //表情
				'spechars', //特殊字符
				'searchreplace', //查询替换
				//'map', //Baidu地图
				//'gmap', //Google地图
				//'insertvideo', //视频
				//'help', //帮助
				'justifyleft', //居左对齐
				'justifyright', //居右对齐
				'justifycenter', //居中对齐
				'justifyjustify', //两端对齐
				'forecolor', //字体颜色
				'backcolor', //背景色
				'insertorderedlist', //有序列表
				'insertunorderedlist', //无序列表
				//'fullscreen', //全屏
				'directionalityltr', //从左向右输入
				'directionalityrtl', //从右向左输入
				'rowspacingtop', //段前距
				'rowspacingbottom', //段后距
				//'pagebreak', //分页
				//'insertframe', //插入Iframe
				'imagenone', //默认
				'imageleft', //左浮动
				'imageright', //右浮动
				//'attachment', //附件
				'imagecenter', //居中
				'wordimage', //图片转存
				'lineheight', //行间距
				'edittip ', //编辑提示
				'customstyle', //自定义标题
				'autotypeset', //自动排版
				//'webapp', //百度应用
				'touppercase', //字母大写
				'tolowercase', //字母小写
				'background', //背景
				//'template', //模板
				//'scrawl', //涂鸦
				//'music', //音乐
				'inserttable', //插入表格
				//'drafts', // 从草稿箱加载
				'charts', // 图表
			]
		]
    });
    </script>

    <script>
    var globalNum = 0;
	function add(){
	var html = "<div id=\"div"+globalNum+"\" class=\"input-group\">"+
  	"<span class=\"input-group-addon\">参数名称</span>"+
  	"<input type=\"text\" class=\"form-control\" id=\"paramName"+globalNum+"\" placeholder=\"paramName\" aria-describedby=\"basic-addon1\">"+
  	"<span class=\"input-group-addon\">参数类型</span>"+
  	"<input type=\"text\" class=\"form-control\" id=\"paramType"+globalNum+"\"  placeholder=\"paramType\" aria-describedby=\"basic-addon1\">"+
  	"<span class=\"input-group-addon\">参数限制</span>"+
  	"<input type=\"text\" class=\"form-control\" id=\"paramLimit"+globalNum+"\"  placeholder=\"paramLimit\" aria-describedby=\"basic-addon1\">"+
  	"<span class=\"input-group-addon\">参数说明</span>"+
  	"<input type=\"text\" class=\"form-control\" id=\"paramRem"+globalNum+"\"  placeholder=\"paramRem\" aria-describedby=\"basic-addon1\">"+
  	"<span onclick=\"removeLi("+globalNum+")\" class=\"input-group-addon\">删除</span></div>";
	$("#params").append(html);
	globalNum = globalNum+1;
	};
	function removeLi(no){
		$("#div"+no).remove();
	}
    </script>

    <script>
    function save(){
		var params={};
		var method = $("#method").val();
		var interName = $("#interName").val();
		var interUrl = $("#interUrl").val();
		var description = ue.getContent();
		var categoryId = $("#categoryId").val();
		params.method = method;
		params.description = description;
		params.interName = interName;
		params.interUrl = interUrl;
		params.categoryId = categoryId;
		var paramList = [];
		for(var i=0;i<globalNum;i++){
			var paramMap = {};
			if($("#div"+i).html()!=undefined){
				var paramName = $("#paramName"+i).val();
				var paramType = $("#paramType"+i).val();
				var paramLimit = $("#paramLimit"+i).val();
				var paramRem = $("#paramRem"+i).val();
				paramMap.paramsName = paramName;
				paramMap.paramsType = paramType;
				paramMap.paramsLimit = paramLimit;
				paramMap.remarks = paramRem;
				paramList.push(paramMap);
			}
		}
		params.paramList = paramList;
		console.log(params);
		console.log(JSON.stringify(params));
	    $.ajax({
	        type: 'POST',
	        url: '<%=request.getContextPath() %>/testInterface/add.do',
	        contentType:"application/json",
            data:JSON.stringify(params),
	        dataType: 'json',
	        timeout: 30000,
	        success: function(json){
	        	alert("添加成功！");
	        	window.go(-1);
	        },
	        error: function(xhr, type){

	        }
	    });
	}
    </script>

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

</html>
