<%@ page import="com.lightinit.hsdataplatform.dictionary.DicResourceCatelogType" %>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getContextPath();
%>
<jsp:include page="../../../common/admin/modal_content_pre.jsp">
    <jsp:param name="modal_title" value="新增接口"/>
</jsp:include>
<form id="apiInterFaceAdd"  action="<%=basePath%>/admin/data_register_api/apiInterface_validate.action" method="post" class="form-horizontal">
    <div class="form-group">
        <div class="form-group">
            <label for="interfaceName" class="col-sm-3 control-label"><span style="color: red;">*</span>接口名称</label>
            <div class="col-sm-8">
                <input type="text" id="interfaceName" name="interfaceName" class="form-control" />
                <span class="field-validation-valid help-block"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="interfaceIdentity" class="col-sm-3 control-label">接口标识</label>
            <div class="col-sm-8">
                <input type="text" id="interfaceIdentity" name="interfaceIdentity" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label for="url" class="col-sm-3 control-label">接口地址</label>
            <div class="col-sm-8">
                <input type="text" id="url" name="url" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label for="isAuth" class="col-sm-3 control-label">是否授权</label>
            <div class="col-sm-8">
                <select id="isAuth" name="isAuth" class="form-control">
                    <option value="0" selected="selected">否</option>
                    <option value="1">是</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="requestMethod" class="col-sm-3 control-label">请求方式</label>
            <div class="col-sm-8">
                <select id="requestMethod" name="requestMethod" class="form-control">
                    <option></option>
                    <c:forEach items="${dicAPIInterFaceRequestMethod}" var="item" >
                        <option value="${item.key}">${item.value}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="responseFormat" class="col-sm-3 control-label">返回格式</label>
            <div class="col-sm-8">
                <select id="responseFormat" name="responseFormat" class="form-control">
                    <option></option>
                    <c:forEach items="${dicAPIInterFaceReturnFormat}" var="item" >
                        <option value="${item.key}">${item.value}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="interfaceInput" class="col-sm-3 control-label">输入参数</label>
            <table id="interfaceInput" name="interfaceInput" style="width: 68%"
                   class="table table-hover  table-condensed table-bordered " align="center">
                <thead>
                <tr>
                    <th>参数名</th>
                    <th>是否必添</th>
                    <th>数据类型</th>
                    <th>说明</th>
                    <th width="20%">操作</th>
                </tr>
                </thead>
            </table>
            <button id="btnAdd1" type="button" class="btn btn-sm btn-primary btn-position" style="margin-right:20%">
                <i class="fa fa-plus"></i>新增接口
            </button>
        </div>
        <div class="form-group">
            <label for="interfaceOutput" class="col-sm-3 control-label">输出参数</label>
            <table id="interfaceOutput" style="width: 68%" class="table table-hover  table-condensed table-bordered "
                   align="center">
                <thead>
                <tr>
                    <th>参数名</th>
                    <th>数据类型</th>
                    <th>说明</th>
                    <th width="20%">操作</th>
                </tr>
                </thead>
            </table>
            <button id="btnAdd2" type="button" class="btn btn-sm btn-primary btn-position" style="margin-right:20%">
                <i class="fa fa-plus"></i>新增接口
            </button>
        </div>
        <div class="form-group">
            <label for="requestDemo" class="col-sm-3 control-label">请求示例</label>
            <div class="col-sm-8">
                <textarea type="text" id="requestDemo" name="requestDemo" class="form-control" value=""/>
            </div>
        </div>
        <div class="form-group">
            <label for="responseDemo" class="col-sm-3 control-label">返回示例</label>
            <div class="col-sm-8">
                <textarea type="text" id="responseDemo" name="responseDemo" class="form-control" value=""/>
            </div>
        </div>
        <div class="form-group">
            <label for="remark" class="col-sm-3 control-label">备注</label>
            <div class="col-sm-8">
                <textarea type="text" id="remark" name="remark" class="form-control" value=""/>
            </div>
        </div>
    </div>
</form>
<jsp:include page="../../../common/admin/modal_content_post.jsp"></jsp:include>
<jsp:include page="../../../common/admin/modal_footer_pre.jsp"></jsp:include>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i>取消</button>
<button type="button" id="btnApiInterfaceSave" class="btn btn-primary"><i class="fa fa-check"></i>保存</button>
<jsp:include page="../../../common/admin/modal_footer_post.jsp"></jsp:include>
<script type="text/javascript">
    var i = 0;
    var s = 0;
    $("#btnAdd1").click(function () {
        var tables = $('#interfaceInput');
        var addtr = $("<tr>" +
            "<td><input type='text' id='in_paramName_"+i+"' name='in_paramName' style='width: 100%'/></td>" +
            "<td><select id='in_isRequired_"+i+"' name='in_isRequired'>" +
            "<option value='0'>是</option>" +
            "<option value='1'>否</option>" +
            "</select></td>" +
            "<td><input type='text' id='in_dataType_"+i+"' name='in_dataType' style='width: 100%'/></td>" +
            "<td><input type='text' id='in_description_"+i+"' name='in_description' style='width: 100%'/></td>" +
            "<td><a onclick='deleteTrRow(this);'>&nbsp;删除</a></td>" +
            "</tr>");
        addtr.appendTo(tables);
        i++;
    });
    $("#btnAdd2").click(function () {
        var tables = $('#interfaceOutput');
        var addtr = $("<tr>" +
            "<td><input type='text' id='out_paramName_"+s+"' name='out_paramName' style='width: 100%'/></td>" +
            "<td><input type='text' id='out_dataType_"+s+"' name='out_dataType' style='width: 100%'/></td>" +
            "<td><input type='text' id='out_description_"+s+"' name='out_description' style='width: 100%'/></td>" +
            "<td><a onclick='deleteTrRow(this);'>&nbsp;删除</a></td>" +
            "</tr>");
        addtr.appendTo(tables);
        s++;
    });


    $("#btnApiInterfaceSave").click(function () {
        $('#apiInterFaceAdd').ajaxValSubmit({
            ajaxSubmitOptions: {
                onSuccess: function () {
                    var api_badge = $("#api_badge").val();
                    var addinterfaceInput = "" ;
                    var addinterfaceOutput = "" ;
                    for (var z=0;z<i;z++){
                        addinterfaceInput = addinterfaceInput +
                            "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].interfaceInputModelList["+z+"].paramName' value='" + $("#in_paramName_"+z+"").val() + "'>" +
                            "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].interfaceInputModelList["+z+"].isRequired' value='" + $("#in_isRequired_"+z+"").val() + "'>" +
                            "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].interfaceInputModelList["+z+"].dataType' value='" + $("#in_dataType_"+z+"").val() + "'>" +
                            "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].interfaceInputModelList["+z+"].description' value='" + $("#in_description_"+z+"").val() + "'>" ;
                    }
                    for (var y=0;y<s;y++){
                        addinterfaceOutput = addinterfaceOutput +
                            "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].interfaceOutputModelList["+y+"].paramName' value='" + $("#out_paramName_"+y+"").val() + "'>" +
                            "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].interfaceOutputModelList["+y+"].dataType' value='" + $("#out_dataType_"+y+"").val() + "'>" +
                            "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].interfaceOutputModelList["+y+"].description' value='" + $("#out_description_"+y+"").val() + "'>"  ;
                    }
                    var tables = $('#testaaa');
                    var addtr = $("<tr>" +
                        "<td>" + $("#interfaceName").val() + "</td>" +
                        "<td>" + $("#interfaceIdentity").val() + "</td>" +
                        "<td>" + $("#url").val() + "</td>" +
                        "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].interfaceName' value='" + $("#interfaceName").val() + "' />" +
                        "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].interfaceIdentity' value='" + $("#interfaceIdentity").val() + "'/>" +
                        "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].url' value='" + $("#url").val() + "'/>" +
                        "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].isAuth' value='" + $("#isAuth option:selected").val() + "' />" +
                        "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].requestMethod' value='" + $("#requestMethod option:selected").val() + "'/>" +
                        "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].responseFormat' value='" + $("#responseFormat option:selected").val() + "' />" +
                        "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].requestDemo' value='" + $("#requestDemo").val() + "'/>" +
                        "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].responseDemo' value='" + $("#responseDemo").val() + "'/>" +
                        "<input type='hidden' name='addAPIInterfaceModelList[" + api_badge + "].remark' value='" + $("#remark").val() + "'/>" +
                        addinterfaceInput +
                        addinterfaceOutput +
                        "<td><a onclick='deleteTrRow(this);'>&nbsp;删除</a></td>" +
                        "</tr>");
                    addtr.appendTo(tables);
                    $(" #api_badge ").val(api_badge * 1 + 1);
                    var modal = $.getJqObj(wysharpDefaultModalContainerSelector);
                    modal.modal('hide');
                }
            }
        });
    });

    function deleteTrRow(tr) {
        //多一个parent就代表向前一个标签,
        //本删除范围为<td><tr>两个标签,即向前两个parent
        //如果多一个parent就会删除整个table
        $(tr).parent().parent().remove();
    }


    $(".input-group.date").datetimepicker({
        format: "YYYY-MM-DD",
        locale: "zh-cn"
    });
</script>