<%@ page import="com.lightinit.hsdataportal.dictionary.DicOrderState" %>
<%@ 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" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String basePath = request.getContextPath();
    String resourcePath = basePath + "/resource";
%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>API详情</title>
    <link rel="stylesheet" href="<%=basePath%>/resource/css/open/base.css" type="text/css">
    <jsp:include page="../common/head.jsp"></jsp:include>
</head>
<body>
<jsp:include page="../common/body_header.jsp"></jsp:include>
<div class="line0"></div>
<div class="mid-xiangqing">
    <div class="mid0">
        <div class="mid00">
            <div class="mid01">
                <div class="mid01-left">
                    <div class="kuang">
                        <img src="${imageContextPath}${apiOpenViewModel.resourceImg}" class="icon00">
                    </div>
                    <div class="left-bottom">
                        &nbsp;<span class="bottom0">
                                        <img src="<%=resourcePath%>/images/icon_chakan.png" class="bottomimg">&nbsp;
                        <c:if test="${not empty apiOpenViewModel.viewTimes}">(${apiOpenViewModel.viewTimes})</c:if>
                        <c:if test="${empty apiOpenViewModel.viewTimes}">(0)</c:if>
                                    </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="bottom0">
                                        <img src="<%=resourcePath%>/images/icon_xiazai.png" class="bottomimg"> &nbsp;(0)
                                    </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="bottom0">
                                        <img src="<%=resourcePath%>/images/icon_wenben.png" class="bottomimg"> &nbsp;
                                        <c:if test="${empty apiOpenViewModel.followTotalCount}">(0)</c:if>
                                        <c:if test="${not empty apiOpenViewModel.followTotalCount}">(${apiOpenViewModel.followTotalCount})</c:if>
                                    </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                </div>
                <div class="mid01-right">
                    <div>
                        <span class="mingchen">${apiOpenViewModel.resourceName}</span>
                        <c:if test="${not empty apiOpenViewModel.serviceTag}">
                            <span class="biaoqian">${apiOpenViewModel.serviceTag}</span>
                        </c:if>
                    </div>
                    <div class="clearfix"></div>
                    <div class="jianjie">${apiOpenViewModel.resourceSummary}</div>
                    <div class="jiage0">
                        <div>
                            <span class="jiage1">价格：</span>
                            <c:if test="${apiOpenViewModel.publishSetting.chargeMethod eq mianfei}">
                                <span class="jiage3">免费</span>
                            </c:if>
                            <c:if test="${!apiOpenViewModel.publishSetting.chargeMethod eq mianfei}">
                                <span class="jiage2">￥</span>
                                <span class="jiage3">${apiOpenViewModel.publishSetting.packagePrice}/${apiOpenViewModel.publishSetting.packageMonths}月</span>
                            </c:if>
                        </div>
                        <div class="clearfix"></div>
                        <div class="kaifang">${apiOpenViewModel.openType}</div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="xinxi04">
                        <div class="xinxi00">
                            <div>
                                <span class="xinxi1">面向对象：</span>
                                <span class="xinxi2">${apiOpenViewModel.fourResourceCatelogModel.catelogCustomName}</span>
                            </div>
                            <div class="xinxi01">
                                <span class="xinxi1">发布机构：</span>
                                <span class="xinxi2">${apiOpenViewModel.fourResourceCatelogModel.catelogSectorName}</span>
                            </div>
                        </div>
                        <div class="xinxi02">
                            <div>
                                <span class="xinxi1">分类：</span>
                                <span class="xinxi002">${apiOpenViewModel.fourResourceCatelogModel.catelogThemeName}
                                </span>
                            </div>
                            <div class="xinxi01">
                                <span class="xinxi1">发布日期：</span>
                                <span class="xinxi2"><fmt:formatDate value="${apiOpenViewModel.auditedAt}"
                                                                     pattern="yyyy-MM-dd"/> </span>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="button0">
                        <button id="fnApplyInfoButton" class="button1" onclick="fnApplyInfo()">立即申请</button>
                        ${isFollow ==0 ? '<button class="button2" onclick="follow()" id="followId">关注</button>':'<button class="button2" onclick="follow()" id="delfollowId" >取消关注</button>'}
                        <button class="button3" onclick="fnOpenOfflineConference()">点我洽谈</button>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="mid02"><!----套餐介绍---->
                <div class="xuanxiang">
                    <span class="jieshao" id="diaoyong" onclick="apiInvoking()">API调用</span>
                    <span id="return" class="shili" onclick="apiReturn()">返回码</span>
                    <span class="shili" id="taocan" onclick="introduce()">套餐介绍</span>
                    <span class="kongbai"></span>
                </div>
                <div class="taocan">
                    <div id="diaoyongView" class="taocanfont">
                        <div class="js01">${apiOpenViewModel.resourceName}</div>
                        <c:if test="${not empty apiOpenViewModel.interfaceViewModels}">
                            <c:forEach items="${apiOpenViewModel.interfaceViewModels}" var="interfaceView">
                                <div class="js00">
                                    <span class="jk">接口地址:</span>
                                    <span class="jk0">${interfaceView.url}</span>
                                </div>
                                <div class="js00">
                                    <span class="jk">支持格式:</span>
                                    <span class="jk0">${interfaceView.responseFormat}</span>
                                </div>
                                <div class="js00">
                                    <span class="jk">请求方式:</span>
                                    <span class="jk0">${interfaceView.requestMethod}</span>
                                </div>
                                <div class="js00">
                                    <span class="jk">参数和示例:</span>
                                </div>
                                <div class="js00">
                                    <span class="jk">POST请求示例：@url@</span>
                                </div>
                                <div class="sl00">
                                        ${interfaceView.requestDemo}
                                </div>
                                <div class="qingqiucanshu">
                                    <span class="jk">请求参数:</span>
                                    <div class="canshu">
                                        <table>
                                            <tr class="cs01">
                                                <td>名称</td>
                                                <td>必填</td>
                                                <td>数据类型</td>
                                                <td>说明</td>
                                            </tr>
                                            <c:if test="${not empty interfaceView.interfaceInputs}">
                                                <c:forEach items="${interfaceView.interfaceInputs}"
                                                           var="interfaceInput">
                                                    <tr>
                                                        <td>${interfaceInput.paramName}</td>
                                                        <td>
                                                            <c:if test="${interfaceInput.isRequired==0}">必填</c:if>
                                                            <c:if test="${interfaceInput.isRequired!=0}">非必填</c:if>
                                                        </td>
                                                        <td>${interfaceInput.dataType}</td>
                                                        <td>${interfaceInput.description}</td>
                                                    </tr>
                                                </c:forEach>
                                            </c:if>
                                        </table>
                                    </div>
                                </div>
                                <div class="qingqiucanshu">
                                    <span class="jk">返回参数:</span>
                                    <div class="canshu">
                                        <div>
                                            <table>
                                                <tr class="cs01">
                                                    <td>名称</td>
                                                    <td>数据类型</td>
                                                    <td>说明</td>
                                                </tr>
                                                <c:if test="${not empty interfaceView.interfaceOutputs}">
                                                    <c:forEach items="${interfaceView.interfaceOutputs}"
                                                               var="interfaceOutput">
                                                        <tr>
                                                            <td>${interfaceOutput.paramName}</td>
                                                            <td>${interfaceOutput.dataType}</td>
                                                            <td>${interfaceOutput.description}</td>
                                                        </tr>
                                                    </c:forEach>
                                                </c:if>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="js02">
                                    <span class="jk">返回参数:</span>
                                </div>
                                <div class="sl00">
                                        ${interfaceView.responseDemo}
                                </div>
                            </c:forEach>
                        </c:if>
                    </div>
                    <div id="returnView" class="taocanfont">
                        <div>
                            <span>服务返回码</span>
                        </div>
                        <div>
                            <span>${apiOpenViewModel.returnCode}</span>
                        </div>
                    </div>
                    <div id="taocanView" class="taocanfont">
                        常规套餐包
                        <span class="taocanfont1">【更多次数、更多优惠请线下洽谈】</span>
                        <table>
                            <tr class="taocan1">
                                <td>名称</td>
                                <td>价格</td>
                                <td>次数/月数</td>
                                <td>说明</td>
                            </tr>
                            <c:if test="${not empty apiOpenViewModel.publishSetting}">
                                <tr>
                                    <td>${apiOpenViewModel.publishSetting.packageName}</td>
                                    <td>${apiOpenViewModel.publishSetting.packagePrice}元/${apiOpenViewModel.publishSetting.packageMonths}月</td>
                                    <td>${apiOpenViewModel.publishSetting.useTimesLimit}次/月</td>
                                    <td>${apiOpenViewModel.publishSetting.description}</td>
                                </tr>
                            </c:if>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="clearfix"></div>
<jsp:include page="../common/body_footer.jsp"></jsp:include>
<%--////////////////////////////////////////申请信息 ///////////////////////////////////////////////////////--%>
<div id="divApply" class="fade" style="display: none;">
    <div class="window">
        <div class="top00">
            <span class="p">申请信息</span>
            <img src="<%=resourcePath%>/images/icon_guanbi.png" alt="" class="guanbi" onclick="closeDivApply()">
        </div>
        <div class="form6">
            <form>
                <div class="application-font0">
                    <span class="application-font1">开放类型：</span>
                    <span class="application-font2">${apiOpenViewModel.openType}</span>
                </div>
                <div class="application-font">
                    <span class="application-font1">资源名称：</span>
                    <span class="application-font2">${apiOpenViewModel.resourceName}</span>
                </div>
                <div class="application-font">
                    <span class="application-font1">资源价格：</span>
                    <span class="application-font2">${apiOpenViewModel.resourceSummary}</span>
                </div>
                <%--/////////////////////////////判断加入申请理由对话框//////////////////--%>
                <c:if test="${apiOpenViewModel.openType eq '依申请开放'}">
                    <div class="application-font" style="display:${outputModel.openType=='无条件开放'?'none':''}">
                        <span class="application-font1">申请理由：</span>
                        <input type="text" class="application-font2" id="applyReason" name="applyReason"
                               style="width: 60%">
                    </div>
                </c:if>
                <%--/////////////////////////////////////////////////////////--%>
                <div class="jiage-xinxi" style="visibility: hidden;">
                    已选择<span class="shuzi">1</span>个套餐，应付：¥<span class="shuzi">${outputModel.packagePrice}</span>元
                </div>
                <div class="clearfix"></div>
                <div>
                    <div class="xieyi0">
                        <span><input id="isAgree" type="checkbox" checked class="box0" value="我已阅读并接受"></span>
                        <span class="fuwu00">阅读并接受<a class="xieyi" target="_blank"
                                                     href="<%=basePath%>/open/static/agreement_service">《平台服务协议》</a></span>
                    </div>
                    <div class="jiarugwc" style="visibility: hidden;">加入购物车</div>
                    <div class="shenqing" onclick="fnApply()">立即申请</div>
                </div>
            </form>
        </div>
    </div>
</div>
<%--//////////////////////////////////////洽谈////////////////////////////////////--%>
<div id="divOfflineConference" class="fade" style="display: none;">
    <div class="window">
        <div class="top00">
            <span class="p">资源使用需求</span>
            <img src="<%=resourcePath%>/images/icon_guanbi.png" alt="" class="guanbi">
        </div>
        <div class="form">
            <form id="requirementFormId">
                <input type="hidden" id="publishSettingId" name="publishSettingId"
                       value="${apiOpenViewModel.publishSetting.id}">
                <div class="application-font-0">
                    <span class="application-font-1">资源需求：</span>
                    <textarea name="requirement" id="requirement" cols="46" rows="3" placeholder="请输入您的需求"
                              class="area1"></textarea>
                </div>
                <div class="application-font-0">
                    <span class="application-font-2">使用意向：</span>
                    <textarea name="usages" id="usages" cols="46" rows="3" class="area2"
                              placeholder="请输入您的使用意向"></textarea>
                </div>
                <div class="application-font-0">
                    <span class="application-font-2">联系人：</span>
                    <input type="text" class="area4" id="contact" name="contact" placeholder="请输入联系人">
                </div>
                <div class="application-font-0">
                    <span class="application-font-2">联系电话：</span>
                    <input type="text" class="area4" id="phone" name="phone" placeholder="请输入联系电话">
                </div>
                <div class="clearfix"></div>
                <div class="queding0">
                    <span class="quxiao" onclick="fnCloseOfflineConference()">取消</span>
                    <span class="queding" onclick="fnRequirementForm()">确定</span>
                </div>
            </form>
        </div>
    </div>
</div>
<%--//////////////////////////////////////洽谈////////////////////////////////////--%>
</body>
<script type="text/javascript">

    //关注
    function follow() {
        if (!checkAuthentication()) {
            return;
        }
        var settingId = $("#publishSettingId").val();
        $.post(
            '<%=basePath%>/open/api/follow.action',
            {settingId: settingId},
            function (datas) {
                if (datas.stateCode == 200) {
                    if (datas.msg == '关注成功') {
                        alert('关注成功');
                        $('#fnApplyInfoButton ~ button:eq(0)').remove();
                        $('#fnApplyInfoButton').after('<button class="button2" onclick="follow()" id="delfollowId" >取消关注</button>');
                    } else {
                        alert('已取消关注');
                        $('#fnApplyInfoButton ~ button:eq(0)').remove();
                        $('#fnApplyInfoButton').after('<button class="button2" onclick="follow()" id="followId">关注</button>');
                    }
                } else {
                    alert(datas.msg);
                }
            },
            'json')
    }

    //打开申请页面
    function fnApplyInfo() {
        if (!checkAuthentication()) {
            return;
        }
        var id = $('#publishSettingId').val();
        var applyReason = $('#applyReason').val();
        $.post("<%=basePath%>/open/api/isApply.action/" + id, {applyReason: applyReason}, function (result) {
            if (result) {
                $('#divApply').show();
            } else {
                $.post("<%=basePath%>/open/api/isPay.action/" + id, function (result) {
                    if (result.stateCode == "200") {
                        window.location.href = "<%=basePath%>/alipay/index.htm/" + result.data + "/" + result.msg
                    } else {
                        alert('不能再次申请');
                    }
                })
            }
        });

    }

    //关闭申请页面
    function closeDivApply() {
        $('#divApply').hide();
    }

    //申请
    function fnApply() {
        if (!checkAuthentication()) {
            return;
        }
        if ($('#isAgree').is(':checked')) {
            var id = $('#publishSettingId').val();
            var applyReason = $('#applyReason').val();
            $.post("<%=basePath%>/open/api/apply.action/" + id, {applyReason: applyReason}, function (result) {
                if (result.stateCode == 200) {
                    alert("申请成功");
                    $.post("<%=basePath%>/open/api/isPay.action/" + id, function (result) {
                        if (result.stateCode == "200") {
                            window.location.href = "<%=basePath%>/alipay/index.htm/" + result.data + "/" + result.msg
                            return;
                        }
                    })
                    window.location.href = "<%=basePath%>/open/myApi/list.htm";
                } else {
                    alert(result.msg);
                }
            });
        } else {
            alert('您还未接受协议！');
        }
    }

    //弹出洽谈页面
    function fnOpenOfflineConference() {
        if (!checkAuthentication()) {
            return;
        }
        $("#divOfflineConference").show();
    }

    //取消洽谈页面
    function fnCloseOfflineConference() {
        $("#divOfflineConference").hide();
    }

    //洽谈
    function fnRequirementForm() {
        if (!checkAuthentication()) {
            return;
        }
        var id = $('#publishSettingId').val();
        $.post("<%=basePath%>/open/api/offlineConference.action", $('#requirementFormId').serialize(), function (result) {
            if (result.stateCode == 200) {
                alert("洽谈成功");
                $("#divOfflineConference").hide();
            } else {
                alert(result.msg);
            }
        }, "json");
        $('#divOfflineConference').ajaxValSubmit({
            ajaxSubmitOptions: {
                onSuccess: function () {
                    window.location.href = "<%=basePath%>/open/apiDemand/list.htm";
                }
            }
        });
    }

    /*///////////////////////////tab标签页切换//////////////////////////////////*/
    apiInvoking();

    function apiInvoking() {
        $("#diaoyong").attr("class", "jieshao");
        $("#return").attr("class", "shili");
        $("#taocan").attr("class", "shili");
        $("#diaoyongView").show();
        $("#returnView").hide();
        $("#taocanView").hide();

    }

    function apiReturn() {
        $("#diaoyong").attr("class", "shili");
        $("#return").attr("class", "jieshao");
        $("#taocan").attr("class", "shili");
        $("#diaoyongView").hide();
        $("#returnView").show();
        $("#taocanView").hide();
    }

    function introduce() {
        $("#diaoyong").attr("class", "shili");
        $("#return").attr("class", "shili");
        $("#taocan").attr("class", "jieshao");
        $("#diaoyongView").hide();
        $("#returnView").hide();
        $("#taocanView").show();
    }
</script>
</html>