<%@ 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="formAdd" action="<%=basePath%>/admin/data_register_api/apiInterface_add.action" method="post"
      class="form-horizontal">
    <div class="form-group">
        <div class="form-group">
            <label for="interfaceName" class="col-lg-3  text-right">接口名称</label>
            <div ID="interfaceName">
                ${resourceAPIInterface.interfaceName}
            </div>
        </div>
        <div class="form-group">
            <label for="interfaceIdentity" class="col-lg-3  text-right">接口标识</label>
            <div id="interfaceIdentity">
                ${resourceAPIInterface.interfaceIdentity}
            </div>
        </div>
        <div class="form-group">
            <label for="url" class="col-lg-3  text-right">接口地址</label>
            <div id="url">
                ${resourceAPIInterface.url}
            </div>
        </div>
        <div class="form-group">
            <label for="isAuth" class="col-lg-3  text-right">是否授权</label>
            <div id="isAuth">
                <c:if test="${resourceAPIInterface.isAuth==0}">否</c:if>
                <c:if test="${resourceAPIInterface.isAuth==1}">是</c:if>
            </div>
        </div>
        <div class="form-group">
            <label for="requestMethod" class="col-lg-3  text-right">请求方式</label>
            <div id="requestMethod">
                ${resourceAPIInterface.requestMethod}
            </div>
        </div>
        <div class="form-group">
            <label for="responseFormat" class="col-lg-3  text-right">返回格式</label>
            <div id="responseFormat">
                ${resourceAPIInterface.responseFormat}
            </div>
        </div>
        <div class="form-group">
            <label for="interfaceInput" class="col-lg-3  text-right">输入参数</label>
            <table id="interfaceInput" name="interfaceInput" style="width: 68%"
                   class="table table-hover  table-condensed table-bordered text-left" >
                <thead>
                <tr>
                    <th>参数名</th>
                    <th>是否必添</th>
                    <th>数据类型</th>
                    <th>说明</th>
                </tr>
                <c:if test="${resourceApiInterfaceInputList.size()>0}">
                    <c:forEach items="${resourceApiInterfaceInputList}" var="apiInterfaceInput">
                        <tr>
                            <td>${apiInterfaceInput.paramName}</td>
                            <td>
                                <c:if test="${apiInterfaceInput.isRequired==0}">是</c:if>
                                <c:if test="${apiInterfaceInput.isRequired==1}">否</c:if>
                            </td>
                            <td>${apiInterfaceInput.dataType}</td>
                            <td>${apiInterfaceInput.description}</td>
                        </tr>
                    </c:forEach>
                </c:if>
                </thead>
            </table>
        </div>
        <div class="form-group">
            <label for="interfaceOutput" class="col-lg-3  text-right">输出参数</label>
            <table id="interfaceOutput" style="width: 68%" class="table table-hover  table-condensed table-bordered text-left">
                <thead>
                <tr>
                    <th>参数名</th>
                    <th>数据类型</th>
                    <th>说明</th>
                </tr>
                <c:if test="${resourceApiInterfaceOutputList.size()>0}">
                    <c:forEach items="${resourceApiInterfaceOutputList}" var="apiInterfaceOutput">
                        <tr>
                            <td>${apiInterfaceOutput.paramName}</td>
                            <td>${apiInterfaceOutput.dataType}</td>
                            <td>${apiInterfaceOutput.description}</td>
                        </tr>
                    </c:forEach>
                </c:if>
                </thead>
            </table>
        </div>
        <div class="form-group">
            <label for="requestDemo" class="col-lg-3  text-right">请求示例</label>
            <div id="requestDemo">
                ${resourceAPIInterface.requestDemo}
            </div>
        </div>
        <div class="form-group">
            <label for="responseDemo" class="col-lg-3  text-right">返回示例</label>
            <div id="responseDemo">
                ${resourceAPIInterface.responseDemo}
            </div>
        </div>
        <div class="form-group">
            <label for="remark" class="col-lg-3  text-right">备注</label>
            <div id="remark">
                ${resourceAPIInterface.remark}
            </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>
<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><input type='text' id='in_isRequired_" + i + "' name='in_isRequired' style='width: 100%'/></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 () {
        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>