<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
<%@ include file="/WEB-INF/include/taglib.jsp" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="/static/weChat/css/public.css">
    <link rel="stylesheet" href="/static/weChat/css/bai_basic.css">
    <link rel="stylesheet" href="/static/weChat/css/SG_area_select.css">
    <link rel="stylesheet" href="/static/weChat/css/new_bai.css">
    <link href="/static/weChat/css/mobiscroll/mobiscroll.2.13.2.css" rel="stylesheet" type="text/css">
    <title>报价信息填写</title>
    <style>
        #p_tishi{
            position: fixed;
            display: none;
            width: 80%;
            height: 5.78rem;
            background: rgb(255,255,255);
            border-radius: 5px;
            top: 50%;
            left: 10%;
            margin-top: -3.89rem;
            z-index: 109;
        }
        #text_message {
            display: inline-block;
            padding: 0.32rem;
            text-indent: 2em;
            font-size: 14px;
            color: #333;
            line-height: 0.56rem; }
        [data-dpr="2"]  #text_message{
            font-size: 28px; }
        [data-dpr="3"]  #text_message {
            font-size: 42px; }
        #p_tishi h2{
            height: 1.17333rem;
            width: 100%;
            background: linear-gradient(90deg, #ff8b00, #ff6600);
            font-size: 16px;
            color: #fff;
            line-height:  1.17333rem;
            text-align: center;
        }
        [data-dpr="2"]  #p_tishi h2{
            font-size: 32px;
        }
        [data-dpr="3"]  #p_tishi h2{
            font-size: 48px;
        }

        #message_confirm{
            display: block;
            width: 2.5rem;
            height: 0.95rem;
            background: linear-gradient(90deg, #ff8b00, #ff6600);
            margin: 0.15rem auto 0 auto;
            border-radius: 0.08rem;
            font-size: 16px;
            color: #fff;
            line-height: 0.95rem;
            text-align: center;
        }
        [data-dpr="2"]  #message_confirm{
            font-size: 32px;
        }
        [data-dpr="3"]  #message_confirm{
            font-size: 48px;
        }
    </style>
</head>
<body id="container">
<%--过度动画--%>
<div id="mask">
    <div class="main">
        <div class="loading">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="black-mask-my"></div>
</div>
<div class="arment-head">
    <div class="arment-left">
        <a href="/weixin/onlineoffer/init">
            <img src="/static/weChat/images/arment-left.png"/>
        </a>
    </div>
    <p>报价信息填写</p>
</div>
<div class="users-data eeded">
    <h2 style="margin-left: 0.4rem;text-align:left;font-size: 28px;">当前险种选择:<span style="color: #ff8b00;">大型活动公众责任险</span></h2>
    <form id="defaultForm">
        <ul class="data">
            <li class="wee">
                <p>活动名称</p>
                <div class="dfg">
                    <textarea placeholder="请填写活动名称" id="a1" name="name" class="valid_name myValid"></textarea>
                    <input type="hidden" name="type" value="1"/>
                    <input type="hidden" name="fBody" value="${fBody}"/>
                    <input type="hidden" name="fName" value="${fName}"/>
                    <b></b>
                </div>
            </li>
            <li>
                <p>活动开始时间</p>
                <div class="dfg">
                    <input id="hd_star" readonly="readonly" class="s-sl valid_hd_star_time myValid" placeholder="" name="hd_star" value="">
                    <b></b>
                </div>
            </li>
            <li>
                <p>活动结束时间</p>
                <div class="dfg">
                    <input id="hd_end" readonly="readonly" class="s-sl valid_hd_end_time myValid" placeholder=""  name="hd_end" value="">
                    <b></b>
                </div>
            </li>
            <li>
                <p>活动类型</p>
                <div class="dfg">
                    <input id="etype" name="etype" value="" type="hidden">
                    <input id="etype_show" readonly="true"  class="s-sl valid_etype myValid" placeholder="请选择" >
                    <b></b>
                </div>
            </li>
            <li>
                <p>活动场所</p>
                <div class="dfg">
                    <input id="eplace" name="eplace" value="" type="hidden">
                    <input id="eplace_show" readonly="true"  class="s-sl valid_eplace myValid" placeholder="请选择" >
                    <b></b>
                </div>
            </li>
            <li>
                <p>消防验收</p>
                <div class="dfg">
                    <input id="ischeck" name="ischeck" value="" type="hidden">
                    <input id="ischeck_show" readonly="true"  class="s-sl valid_ischeck myValid" placeholder="请选择" >
                    <b></b>
                </div>
            </li>
            <li>
                <p>有无危险环节</p>
                <div class="dfg">
                    <input id="isdanger" name="isdanger" value="" type="hidden">
                    <input id="isdanger_show" readonly="true"  class="s-sl valid_isdanger myValid" placeholder="请选择" >
                    <b></b>
                </div>
            </li>
            <li style="border-bottom: none">
                <p>参与总人数</p>
                <div class="dfg">
                    <input id="pnum" name="pnum" value="" type="hidden">
                    <input id="pnum_show" readonly="true"  class="s-sl valid_pnum myValid" placeholder="请选择" >
                    <b></b>
                </div>
            </li>

            <li class="text-ti" id="ts_be" style="display: none;">
                <i style="display: block;color: #ff8b00;">温馨提示：为了您的利益保障，建议购买保险的总保额<b id="be_z">≥1500万</b>。</i>
            </li>

        </ul>
        <ul class="data">
            <li id="isplacearea" style="display: none;">
                <p>展览场所面积</p>
                <div class="dfg">
                    <input id="placearea" name="placearea" value="" type="hidden">
                    <input id="placearea_show" readonly="true"  class="s-sl valid_placearea myValid" placeholder="请选择" >
                    <b></b>
                </div>
            </li>
            <li>
                <p>保障开始时间</p>
                <div class="dfg">
                    <input id="bz_star" readonly="readonly" class="s-sl valid_bz_star_time myValid" placeholder="" name="bz_star" value="">
                    <b></b>
                </div>
            </li>
            <li style="border-bottom: none">
                <p>保障结束时间</p>
                <div class="dfg">
                    <input id="bz_end" readonly="readonly" class="s-sl valid_bz_end_time myValid" placeholder=""  name="bz_end" value="">
                    <b></b>
                </div>
            </li>
            <li class="text-ti">
                <i style="display: block;color: #ff8b00;">温馨提示：若包含拆搭建工作，保障期间可填写搭建开始、拆除结束时间。</i>
            </li>
        </ul>
    </form>
</div>
<div class="next-step">
    <span id="previous-step">上一步</span>
    <span class="ert">生成报价方案书</span>
</div>

<!--活动类型选择弹窗-->
<div class="business-select" id="etype_cont">
    <h2>请选择活动类型</h2>
    <ul>
        <li>
            <p val="1">展览展销</p>
        </li>
        <li>
            <p val="2">文艺演出</p>
        </li>
        <li>
            <p val="3">体育赛事</p>
        </li>
        <li>
            <p val="4">其它</p>
        </li>
    </ul>
</div>
<div class="business-select" id="eplace_cont">
    <h2>请选择活动场所</h2>
    <ul>
        <li>
            <p val="1">室内场馆</p>
        </li>
        <li>
            <p val="2">露天场馆</p>
        </li>
        <li>
            <p val="3">户外地点</p>
        </li>
    </ul>
</div>
<div class="business-select" id="ischeck_cont">
    <h2>请选择消防验收情况</h2>
    <ul>
        <li>
            <p val="1">有消防验收</p>
        </li>
        <li>
            <p val="2">无消防验收但配备灭火器</p>
        </li>
    </ul>
</div>
<div class="business-select" id="isdanger_cont">
    <h2>请选择危险环节情况</h2>
    <ul>
        <li>
            <p val="1">有（如：火、烟花等）</p>
        </li>
        <li>
            <p val="2">无</p>
        </li>
    </ul>
</div>
<div class="business-select" id="pnum_cont">
    <h2>请选择参与人数</h2>
    <ul>
        <li>
            <p val="1">0~5000</p>
        </li>
        <li>
            <p val="2">5001~10000</p>
        </li>
        <li>
            <p val="3">10001~50000</p>
        </li>
        <li>
            <p val="4">50001及以上</p>
        </li>
    </ul>
</div>
<div class="business-select" id="placearea_cont">
    <h2>请选择场所面积</h2>
    <ul>
        <li>
            <p val="1">小于10000平米</p>
        </li>
        <li>
            <p val="2">10000~20000平米</p>
        </li>
        <li>
            <p val="3">20000平米及以上</p>
        </li>
    </ul>
</div>
<button class="jq" style="display: none"></button>
<div id="p_tishi" style="height: 4.48rem">
    <h2>生成成功！</h2>
    <p id="text_message">已根据您的需求生成报价方案书，请及时查看。</p>
    <span id="message_confirm" onclick="data_href()">确定</span>
</div>

<!--黑色蒙版-->
<div class="black-mask"></div>
<a id="href_true" style="display: none;" target="_blank"></a>
</body>
<script src="/static/weChat/js/jquery-1.8.3.min.js"></script>
<script src="/static/weChat/js/flexible.js"></script>
<script src="/static/weChat/js/basic.js"></script>
<script src="/static/weChat/js/iscroll.js"></script>

<script src="/static/weChat/js/jquery.formHelper.js"></script>
<script src="/static/weChat/common/layer_mobile/layer.js"></script>
<link rel="stylesheet" href="/static/weChat/common/layer_mobile/need/right.css"/>
<script src="/static/weChat/js/weixin_g.js"></script>

<script src="/static/weChat/js/SG_area_select-two.js"></script>
<script src="/static/weChat/js/mobiscroll/mobiscroll.2.13.2.js" type="text/javascript"></script>
<script src="/static/weChat/js/autosize.js" type="text/javascript"></script>
<script type="text/javascript" src="<c:url value='/resources/version_new/js/clipboard.min.js' />"></script>
<script>
    autosize($('.valid_name'));
</script>
<script>
    var baseUrl = '${pageContext.request.contextPath }';
    var isDispute=false;
    var isCopy=false;
    var cpath='${ptTop}getResource?path=${fBody}${fName}.png';
    $(function () {
        $("#mask").hide();
        var _etype = parseInt($('#etype_cont').height()/2);
        $('#etype_cont').css({"margin-top":-_etype+'px'});
        $('#etype_show').click(function () {
            $(this).blur();
            $('#etype_cont').show();
            $('.black-mask').show();
        });
        $('#etype_cont ul li p').click(function () {
            $('#etype_cont ul li p').removeClass('on');
            $(this).addClass('on');
            var sd = $(this).text();
            var sdv = $(this).attr("val");
            $('#etype_show').val(sd);
            $('#etype').val(sdv);
            $('#etype_cont').hide();
            $('.black-mask').hide();
            $(".valid_etype").trigger("change");
            if(sdv == "1"){
                pacg();
                $("#isplacearea").show();
            }else{
                $(".valid_placearea").unbind("change");
                $("#isplacearea").hide();
                $("#placearea_show").val('');
                $("#placearea").val('');
                $("#placearea_show").next().attr('style','');
                $("#placearea_show").next().html('');
            }
        });
        var _eplace = parseInt($('#eplace_cont').height()/2);
        $('#eplace_cont').css({"margin-top":-_eplace+'px'});
        $('#eplace_show').click(function () {
            $(this).blur();
            $('#eplace_cont').show();
            $('.black-mask').show();
        });
        $('#eplace_cont ul li p').click(function () {
            $('#eplace_cont ul li p').removeClass('on');
            $(this).addClass('on');
            var sd = $(this).text();
            $('#eplace_show').val(sd);
            $('#eplace').val($(this).attr("val"));
            $('#eplace_cont').hide();
            $('.black-mask').hide();
            $(".valid_eplace").trigger("change");
        });
        var _ic = parseInt($('#ischeck_cont').height()/2);
        $('#ischeck_cont').css({"margin-top":-_ic+'px'});
        $('#ischeck_show').click(function () {
            $(this).blur();
            $('#ischeck_cont').show();
            $('.black-mask').show();
        });
        $('#ischeck_cont ul li p').click(function () {
            $('#ischeck_cont ul li p').removeClass('on');
            $(this).addClass('on');
            var sd = $(this).text();
            $('#ischeck_show').val(sd);
            $('#ischeck').val($(this).attr("val"));
            $('#ischeck_cont').hide();
            $('.black-mask').hide();
            $(".valid_ischeck").trigger("change");
        });
        var _idr = parseInt($('#isdanger_cont').height()/2);
        $('#isdanger_cont').css({"margin-top":-_idr+'px'});
        $('#isdanger_show').click(function () {
            $(this).blur();
            $('#isdanger_cont').show();
            $('.black-mask').show();
        });
        $('#isdanger_cont ul li p').click(function () {
            $('#isdanger_cont ul li p').removeClass('on');
            $(this).addClass('on');
            var sd = $(this).text();
            $('#isdanger_show').val(sd);
            $('#isdanger').val($(this).attr("val"));
            $('#isdanger_cont').hide();
            $('.black-mask').hide();
            $(".valid_isdanger").trigger("change");
        });
        var _pnum = parseInt($('#pnum_cont').height()/2);
        $('#pnum_cont').css({"margin-top":-_pnum+'px'});
        $('#pnum_show').click(function () {
            $(this).blur();
            $('#pnum_cont').show();
            $('.black-mask').show();
        });
        $('#pnum_cont ul li p').click(function () {
            $('#pnum_cont ul li p').removeClass('on');
            $(this).addClass('on');
            var sd = $(this).text();
            var sdv = $(this).attr("val");
            $('#pnum_show').val(sd);
            $('#pnum').val(sdv);
            $('#pnum_cont').hide();
            $('.black-mask').hide();
            $(".valid_pnum").trigger("change");
            if(sdv !="1" && sdv !="2" && sdv != ''){
                $("#be_z").html(sdv =="3" ? "≥1500万" : sdv =="4" ? "≥2000万" : '');
                $("#ts_be").show();
            }else{
                $("#ts_be").hide();
            }
        });
        var _pa = parseInt($('#placearea_cont').height()/2);
        $('#placearea_cont').css({"margin-top":-_pa+'px'});
        $('#placearea_show').click(function () {
            $(this).blur();
            $('#placearea_cont').show();
            $('.black-mask').show();
        });
        $('#placearea_cont ul li p').click(function () {
            $('#placearea_cont ul li p').removeClass('on');
            $(this).addClass('on');
            var sd = $(this).text();
            $('#placearea_show').val(sd);
            $('#placearea').val($(this).attr("val"));
            $('#placearea_cont').hide();
            $('.black-mask').hide();
            $(".valid_placearea").trigger("change");
        });

        $('#bz_star').click(function () {
            var sr = $("#hd_star").val();
            var ed = $("#hd_end").val();
            if(sr == '' || ed == ''){
                layer.open({content:"请先填写活动时间",btn: '我知道了'});
            }
        });

        var currYear = (new Date()).getFullYear();
        var currDay = (new Date()).getDate()+1;
        var opt={};
        opt.date = {preset : 'date'};
        opt.datetime = {preset : 'datetime'};
        opt.time = {preset : 'time'};
        opt.default = {
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式
            mode: 'scroller', //日期选择模式
            dateFormat: 'yy-mm-dd',
            lang: 'zh',
            showNow: false,
//            nowText: "今天",
            startYear: currYear, //开始年份
//            startDay: currDay,
            endYear: currYear + 2, //结束年份
            minDate: Gdate.addDateTypeBySeconds(new Date(),24*60*60),
            onSelect: function (valueText, inst) {
                var id = $(this)[0].id;
                var validity = valueText.split("-");
                if (id === "hd_star") {
                    if (opt.default.maxDate) {
                        opt.default.maxDate = null;
                    }
                    opt.default.maxDate = Gdate.addDateBySeconds(valueText,29*24*60*60);
                    opt.default.minDate = Gdate.addDateBySeconds(valueText,0*24*60*60);
                    $("#hd_end").mobiscroll($.extend(opt['date'], opt['default']));
                    $('#hd_end').val('');
                    $('#bz_star').val('');
                    $('#bz_end').val('');
                }
                if (id === "hd_end") {
                    var md = $("#hd_star").val();
                    opt.default.maxDate = Gdate.stringToDate2(md);
                    opt.default.minDate = Gdate.addDateBySeconds(md,-(7*24*60*60));
                    $("#bz_star").mobiscroll($.extend(opt['date'], opt['default']));
                }
                if (id === "bz_star") {
                    if (opt.default.maxDate) {
                        opt.default.maxDate = null;
                    }
                    opt.default.maxDate = Gdate.addDateBySeconds(valueText,29*24*60*60);
                    opt.default.minDate = Gdate.addDateBySeconds(valueText,0*24*60*60);
                    $("#bz_end").mobiscroll($.extend(opt['date'], opt['default']));
                    $('#bz_end').val('');
                }
            }
        };

        $("#hd_star").mobiscroll($.extend(opt['date'], opt['default']));

        $('#previous-step').click(function () {
            location.href="/weixin/onlineoffer/init";
        });
        $('#problem-sure').click(function () {
            location.href="/weixin/onlineoffer/init";
        });
        var clipboard = new Clipboard('.jq', {
            text: function() {
                return cpath;
            }
        });
        clipboard.on('success', function(e) {
            isCopy=true;
        });
        clipboard.on('error', function(e) {
            isCopy=false;
        });
    })

</script>
<script>

    var allright=true;
    function isWrong(el,obj, msg){
        if(el){
            $(obj).nextAll("b").remove();
            if(msg!="") $(obj).after("<b style='display:block'>"+msg+"</b>");
            allright=false;
            return false;
        }else{
            $(obj).nextAll("b").remove();
            return true;
        }
    }
    function data_href() {
        location.href="/weixin/onlineoffer/open-img?path=${fBody}${fName}.png";
    }
    $(".valid_name").bind("blur keyup",function(){ //活动名称
        var r1 = isWrong($(this).val().trim()=="",this,"请输入活动名称"); if(!r1) return r1;
        var r2 = isWrong( !($(this).val().length<=100 && $(this).val().length>=1),this,"请输入1-100个字符长度");
    });

    $(".valid_etype").bind("change",function(){ //活动类型
        var r1 = isWrong($(this).prev().val().trim()=="",this,"请选择活动类型"); if(!r1) return r1;
    });
    $(".valid_eplace").bind("change",function(){ //活动场所
        var r1 = isWrong($(this).prev().val().trim()=="",this,"请选择活动场所"); if(!r1) return r1;
    });
    $(".valid_ischeck").bind("change",function(){ //消防验收
        var r1 = isWrong($(this).prev().val().trim()=="",this,"请选择消防验收"); if(!r1) return r1;
    });
    $(".valid_isdanger").bind("change",function(){ //有无危险环节
        var r1 = isWrong($(this).prev().val().trim()=="",this,"请选择有无危险环节"); if(!r1) return r1;
    });
    $(".valid_pnum").bind("change",function(){ //参加人数
        var r1 = isWrong($(this).prev().val().trim()=="",this,"请选择参加人数"); if(!r1) return r1;
    });
    function pacg(){
        $(".valid_placearea").bind("change",function(){ //展览场所面积
            var r1 = isWrong($(this).prev().val().trim()=="",this,"请选择展览场所面积"); if(!r1) return r1;
        });
    }
    $(".valid_hd_star_time").bind("change",function(){ //保障起始时间
        var r1 = isWrong($(this).val().trim()=="",this,"请选择活动开始时间"); if(!r1) return r1;
    });
    $(".valid_hd_end_time").bind("change",function(){ //保障结束时间
        var r1 = isWrong($(this).val().trim()=="",this,"请选择活动结束时间"); if(!r1) return r1;
    });
    $(".valid_bz_star_time").bind("change",function(){ //保障起始时间
        var r1 = isWrong($(this).val().trim()=="",this,"请选择保障起始时间"); if(!r1) return r1;
    });
    $(".valid_bz_end_time").bind("change",function(){ //保障结束时间
        var r1 = isWrong($(this).val().trim()=="",this,"请选择保障结束时间"); if(!r1) return r1;
    });

    $('.next-step .ert').click(function () {
        var p  = $("#defaultForm").serializeJson();
        allright=true;
        $(".myValid").each(function(){
            if($(this).attr("id")=="hd_star") return;
            if($(this).attr("id")=="bz_star") return;
            $(this).trigger("blur"); $(this).trigger("change");
        }); //校验表单
        //开始时间不能比当前时间早
        /*if(Gdate.getDaysDiff(p.bz_star, Gdate.curtime())<=0){
            layer.open({content:"保障开始时间必须是今天以后,不能包含今天",btn: '我知道了'}); return;
        }*/
        //保障结束时间不能比开始时间早
        if(Gdate.getDaysDiff(p.bz_end ,p.bz_star )<=-1){
            layer.open({content:"保障结束时间必须要比开始时间晚",btn: '我知道了'}); return;
        }
        /*if(Gdate.getDaysDiff(p.bz_end ,p.bz_star )>14){
            layer.open({content:"保障结束时间只能比开始时间大15天",btn: '我知道了'}); return;
        }*/

        if(allright){
            $('.jq').click();
            $("#mask").show();
            g_ajax("/weixin/onlineoffer/proposal",p,function(json){
                $("#mask").hide();
                if (json.success == true) {
                    if(isCopy){
                        $('.black-mask').show();
                        $('#p_tishi').show();
                    }else{
                        layer.open({content:'链接复制失败,请手动复制：'+cpath,btn: '我知道了'})
                    }
                } else {
                    layer.open({content:json.msg,btn: '我知道了'})
                }
            },true);
        }else{
            layer.open({content:"请认真填写表单，再点击下一步",btn: '我知道了'})
        }
    });

</script>
</html>