<%@ page import="com.lightinit.hsdataportal.dictionary.DicDataRequirementState" %>
<%@ page import="com.lightinit.hsdataportal.dictionary.DicRequirmentAuditState" %>
<%@ 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>
    <jsp:include page="../common/head.jsp"></jsp:include>
    <script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts.min.js"></script>
</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}${model.resourceImg}" class="icon00">
                    </div>
                    <div class="left-bottom">
                        &nbsp;<span class="bottom0">
                                        <img src="<%=resourcePath%>/images/icon_chakan.png" class="bottomimg">&nbsp;${model.viewTimes}
                                    </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;${model.coun}
                                    </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                </div>
                <div class="mid01-right">
                    <div>
                        <span class="mingchen">${model.resourceName}</span>
                        <span class="biaoqian">${model.dataTag}</span>
                    </div>
                    <div class="clearfix"></div>
                    <div class="jianjie">${model.resourceSummary}</div>
                    <div class="jiage0">
                        <div>
                            <span class="jiage1">价格： </span>
                            <c:if test="${model.chargeMethod eq '免费'}">

                                <span class="jiage2"></span>
                                <span class="jiage3">免费</span>
                            </c:if>
                            <c:if test="${model.chargeMethod != '免费'}">
                                <span class="jiage2">￥</span>
                                <span class="jiage3">${model.packagePrice}</span>
                            </c:if>

                        </div>
                        <div class="clearfix"></div>
                        <%--<div>--%>
                            <%--<span class="jiage1">规格：</span>--%>
                            <%--<div class="guige3">--%>
                                <%--<span class="guige01">${model.packagePrice}</span>--%>
                                <%--<span class="guige02">/${model.packageMonths}月</span>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                        <div class="kaifang">${model.openType}</div>
                    </div>

                    <div class="clearfix"></div>
                    <div class="xinxi04">
                        <div class="xinxi00">
                            <div>
                                <span class="xinxi1">面向对象：</span>
                                <span class="xinxi2">${model.customName}</span>
                            </div>
                            <div class="xinxi01">
                                <span class="xinxi1">发布机构：</span>
                                <span class="xinxi2">${model.provider}</span>
                            </div>
                        </div>
                        <div class="xinxi02">
                            <div>
                                <span class="xinxi1">分类：</span>
                                <span class="xinxi002">${model.themeName}</span>
                            </div>
                            <div class="xinxi01">
                                <span class="xinxi1">发布日期：</span>
                                <span class="xinxi2"><fmt:formatDate value="${model.createdAt}" pattern="yyyy-MM-dd"></fmt:formatDate> </span>
                            </div>

                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="button0">
                        <input type="hidden" value="${model.chargeMethod}" name="chargeMethod"/>
                        <button class="button1"id="fnApplyInfoButton" onclick="fnApplyInfo()" >立即申请</button>

                        <%--<c:if test="${model.settingId ==null}">--%>
                        <%--<button class="button2" onclick="follow()">关注</button>--%>
                        <%--</c:if>--%>
                        <%--<c:if test="${model.settingId !=null}">--%>
                            <%--<input type="hidden" value="${model.followId}" name="followId"/>--%>
                            <%--<button class="button2" onclick="delfollow()">取消关注</button>--%>
                        <%--</c:if>--%>
                        ${model.settingId ==null ? '<button class="button2" onclick="fnFollow()" id="followId">关注</button>':'<button class="button2" onclick="fnDelFollow()" id="delfollowId" >取消关注</button>'}
                        <button class="button3"onclick="fnOpenOfflineConference()">点我洽谈</button>
                        <input type="hidden" value="${model.microappId}" name="microappId"/>
                        <button class="button3" onclick="openDemo()">查看演示</button>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>

            <div class="mid02"><!----套餐介绍---->
                <div class="xuanxiang">
                    <img src="${imageContextPath}${model.screenshot}">
                </div>
                <div class="taocan">

                </div>

            </div>
            <%--<div class="mid1"></div>--%>

        </div>

    </div>
</div>
<div class="clearfix"></div>
       <!--------foot---------->

    <%--////////////////////////////////////////申请信息   无条件申请///////////////////////////////////////////////////////--%>
    <div id="divApply" class="fade" style="display: none;">
        <div style="width:1920px;height:1080px;background-color:rgba(17,23, 35, 0.34)"  >
            <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 id="applyaform">
                        <input type="hidden" name="publishSettingId" value="${model.publishSettingId}"/>
                        <input type="hidden" name="openType" value="${model.openType}"/>
                        <input type="hidden" name="publishInfoId" value="${model.publishInfoId}"/>
                        <input type="hidden" id="packagePrice" name="packagePrice" value="${model.packagePrice}"/>

                        <div class="application-font0">
                            <span class="application-font1">开放类型：</span>
                            <span class="application-font2">${model.openType}</span>
                        </div>
                        <div class="application-font">
                            <span class="application-font1">资源名称：</span>
                            <span class="application-font2">${model.resourceName}</span>
                        </div>
                        <div class="application-font">
                            <span class="application-font1">资源价格：</span>
                            <span class="application-font2">${model.packagePrice}</span>
                        </div>
                        <%--/////////////////////////////判断加入申请理由对话框//////////////////--%>
                        <div  class="application-font" style="display:${outputModel.openType=='无条件开放'?'none':''}">
                            <span class="application-font1">申请理由：</span>
                            <input type="text" name="applyReason" >
                        </div>
                        <%--/////////////////////////////////////////////////////////--%>
                        <div class="jiage-xinxi">
                            已选择<span class="shuzi">1</span>个套餐，应付：¥<span class="shuzi">${outputModel.packagePrice}</span>元
                        </div>
                        <div class="clearfix"></div>
                        <div>
                            <div class="xieyi0">
                                <span><input type="checkbox" class="box0" value="我已阅读并接受"></span>
                                <span class="fuwu00">阅读并接受<a class="xieyi" target="_blank" href="<%=basePath%>/open/static/agreement_service">《平台服务协议》</a></span>
                            </div>
                            <div class="shouquanshenqing" onclick="apply()">立即申请</div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<%--================================================已申请开放=======================================================--%>
    <div id="divApply1" class="fade" style="display: none;">
        <div style="width:1920px;height:1080px;background-color:rgba(17,23, 35, 0.34)"  >
            <div class="window">
                <div class="top00">
                    <span class="p">申请信息</span>
                    <img src="<%=resourcePath%>/images/icon_guanbi.png" alt="" class="guanbi" onclick="closeDivApply1()">
                </div>
                <div class="form6">
                    <form id="applyaform1">
                        <input type="hidden" id="publishSettingId" name="publishSettingId" value="${model.publishSettingId}"/>
                        <input type="hidden" name="openType" value="${model.openType}"/>
                        <input type="hidden" name="publishInfoId" value="${model.publishInfoId}"/>

                        <div class="application-font0">
                            <span class="application-font1">开放类型：</span>
                            <span class="application-font2">${model.openType}</span>
                        </div>
                        <div class="application-font">
                            <span class="application-font1">资源名称：</span>
                            <span class="application-font2">${model.resourceName}</span>
                        </div>
                        <div class="application-font">
                            <span class="application-font1">资源价格：</span>
                            <span class="application-font2">${model.packagePrice}</span>
                        </div>
                        <%--/////////////////////////////判断加入申请理由对话框//////////////////--%>
                        <div  class="application-font" style="display:${outputModel.openType=='无条件开放'?'none':''}">
                            <span class="application-font1">申请理由：</span>
                            <input type="text" name="applyReason" >
                        </div>
                        <%--/////////////////////////////////////////////////////////--%>
                        <div class="jiage-xinxi">
                            <%--已选择<span class="shuzi">1</span>个套餐，应付：¥<span class="shuzi">${outputModel.packagePrice}</span>元--%>
                        </div>
                        <div class="clearfix"></div>
                        <div>
                            <div class="xieyi0">
                                <span><input type="checkbox" class="box0" value="我已阅读并接受"></span>
                                <span class="fuwu00">阅读并接受<a class="xieyi" target="_blank" href="<%=basePath%>/open/static/agreement_service">《平台服务协议》</a></span>
                            </div>
                            <div class="shouquanshenqing" onclick="apply1()">授权申请</div>
                        </div>
                    </form>
                </div>
            </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" onclick="fnCloseOfflineConference()">
            </div>
            <div class="form">
                <form id="offlineForm">
                    <div class="application-font-0">
                        <span class="application-font-1"><span class="xinghao">*</span>资源需求：</span>
                        <textarea name="requirement" id="requirement" cols="46" rows="3"  placeholder="请输入您的需求" class="area1"></textarea>
                        <div class="tishi5"></div>
                    </div>
                    <div class="application-font-0">
                        <span class="application-font-2"><span class="xinghao">*</span>使用意向：</span>
                        <textarea name="usages" id="usages" cols="46" rows="3" class="area2" placeholder="请输入您的使用意向"></textarea>
                        <div class="tishi5"></div>
                    </div>
                    <div class="application-font-0">
                        <span class="application-font-2"><span class="xinghao">*</span>联系人：</span>
                        <input type="text" class="area4" id="contact" name="contact" placeholder="请输入联系人">
                        <div class="tishi5"></div>
                    </div>
                    <div class="application-font-0">
                        <span class="application-font-2"><span class="xinghao">*</span>联系电话：</span>
                        <input type="text" class="area4"id="phone" name="phone" placeholder="请输入联系电话">
                        <div class="tishi5"></div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="queding0">
                        <span class="quxiao" onclick="fnCloseOfflineConference()">取消</span>
                        <span class="queding" onclick="offlineConference()">确定</span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <%--//////////////////////////////////////洽谈////////////////////////////////////--%>
    <div id="divDemo" class="fade"  style="display: none;">
        <div class="window" style="width: 580px;left: 45%;">
            <img src="<%=resourcePath%>/images/icon_guanbi.png" alt="" class="guanbi" onclick="closeDemo()">
            <div class="form" style="width: 580px;">
                <form id="demo">
                    <div style="" class="application-font-0" id="resourceAuthId">

                            <iframe charset="UTF-8" style="margin-left: -30px;"  height="580px" width="540px" src="" >


                            </iframe>

                    </div>
                    <div style="margin-left: 200px;" class="queding0">
                        <span class="quxiao" onclick="closeDemo()">取消</span>
                    </div>
                </form>
            </div>
        </div>
    </div>
<jsp:include page="../common/body_footer.jsp"></jsp:include>
</body>
<script>
    //关注
    function fnFollow () {
        if (!checkAuthentication()){
            return;
        }
        $.ajax({
            url:"<%=basePath%>/open/microapp/follow.action/${model.publishSettingId}",
            type:"post",
            success:function(msg){
                if(msg.stateCode==200){
                    $('#divApply').hide();
                    alert("关注成功");
                    window.location.href="<%=basePath%>/open/microapp/view.htm/${model.publishSettingId}";
                }



            }
        })
    }
    //取消关注
    function fnDelFollow() {
        if (!checkAuthentication()){
            return;
        }
        $.ajax({
            url:"<%=basePath%>/open/microapp/delfollow.action/${model.followId}",
            type:"post",
            success:function(msg){
                if(msg.stateCode==200){
                    $('#divApply').hide();
                    alert("取消关注成功");
                    window.location.href="<%=basePath%>/open/microapp/view.htm/${model.publishSettingId}";

                }



            }

        })
    }
    function demo() {
        if (!checkAuthentication()){
            return;
        }
        window.location.href="<%=basePath%>/open/microapp/demo.action/${model.publishSettingId}";
    }
    function offline() {
        window.location.href="<%=basePath%>/open/microapp/offline.htm/${model.publishSettingId}";
    }
    //打开申请页面
    function fnApplyInfo(){
        if (!checkAuthentication()){
        return;
    }

        if(${model.openType.equals("无条件开放")}){
            $('#divApply').show();
        }else {
            $('#divApply1').show();
        }

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

        if($("input[type='checkbox']").is(':checked')){
            $.ajax({
                url:"<%=basePath%>/open/microapp/apply.action",
                type:"post",
                data:$("#applyaform").serialize(),
                success:function(msg){
                    console.info(msg)
                    if(msg.stateCode==200) {

                        if(msg.msg=="已经申请过了，请前往用户中心下载") {
                            alert(msg.msg)
                        }else {
                            alert("申请成功")
                        }
                        // $('#divApply').hide();
                        if(msg.msg=="待支付") {
                            location.href="<%=basePath%>/alipay/index.htm/" +  msg.data + "/" +$("#packagePrice").val()
                        }else {
                            <%--location.href="<%=basePath%>/open/microapp/view.htm/"+$("#publishSettingId").val();--%>
                            location.href="<%=basePath%>/open/myMicroapp/list.htm";
                        }




                        <%--$("#resourceAuthId").empty();--%>
                        <%--$("#resourceAuthId").append('<iframe style="margin-left: -30px;"  height="580px" width="540px" src="${model.url}" ></iframe>');--%>

                    }

                }

            })
        }else {
            alert("请阅读接受平台服务协议");
        }

    }
    function apply1() {
        if($("input[type='checkbox']").is(':checked')) {
            $.ajax({
                url:"<%=basePath%>/open/microapp/apply.action",
                type:"post",
                data:$("#applyaform1").serialize(),
                success:function(msg){
                    console.info(msg)
                    if(msg.stateCode==200) {
                        <%--location.href="<%=basePath%>/open/microapp/view.htm/"+$("#publishSettingId").val();--%>
                        <%--$('#divApply1').hide();--%>
                        if(msg.msg=="已经申请过了，请前往用户中心下载") {
                            alert(msg.msg)
                        }else {
                            alert("申请成功")
                        }
                        // $('#divApply').hide();
                        if(msg.msg=="待支付") {
                            location.href="<%=basePath%>/alipay/index.htm/" +  msg.data + "/" +$("#packagePrice").val()
                        }else {
                            <%--location.href="<%=basePath%>/open/microapp/view.htm/"+$("#publishSettingId").val();--%>
                            location.href="<%=basePath%>/open/myMicroapp/list.htm";

                        }
                        <%--location.href="<%=basePath%>/alipay/index.htm/" +  msg.msg + "/" +$("#packagePrice").val()--%>
                        <%--$("#resourceAuthId").empty();--%>
                        <%--$("#resourceAuthId").append('<iframe style="margin-left: -30px;"  height="580px" width="540px" src="${model.url}" ></iframe>');--%>

                    }

                }

            })
        }else {
            alert("请阅读接受平台服务协议");
        }

    }
    //弹出洽谈页面
    function fnOpenOfflineConference(){
        if (!checkAuthentication()){
            return;
        }
        $("#divOfflineConference").show();
    }
    //取消洽谈页面
    function fnCloseOfflineConference(){
        $("#divOfflineConference").hide();
    }
    //洽谈
    function offlineConference() {
        $.ajax({
            url:"<%=basePath%>/open/microapp/offlineConference.action",
            type:"post",
            data:$("#offlineForm").serialize(),
            success:function(msg){
                if(msg.stateCode==200) {
                    $("#divOfflineConference").hide();
                    alert("洽谈成功");
                }else{
                    for(var item in msg.data){
                        $("[name='"+item+"']").next().text("! "+msg.data[item]);
                        $("[name='"+item+"']").next().show();
                    }
                }
            }
        })
    }
    //================================================

    //弹出演示页面
    function openDemo(){
        if (!checkAuthentication()){
            return;
        }
        if(${list.size()>0}) {
            $("iframe").attr("src", "<%=basePath%>/open/microapp/openDemo.action/${model.microappId}/1");
        }else {
            $("iframe").attr("src", "<%=basePath%>/open/microapp/openDemo.action/${model.microappId}/2");
        }
        <%--$("iframe").attr("src", "${model.demoUrl}");--%>
        $("#divDemo").show();
    }
    //取消演示页面
    function closeDemo(){
        $("#divDemo").hide();
    }
    <%--function openDemo() {--%>
        <%--$.get(--%>
            <%--"<%=basePath%>/open/microapp/openDemo.action/${model.microappId}",--%>
           <%--function () {--%>

           <%--}--%>


        <%--)--%>
    <%--}--%>


</script>
</html>