<%@ 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>
                <p>展会名称</p>
                <div class="dfg">
                    <input placeholder="请填写展会活动名称" id="a1" name="name" class="valid_name myValid" value=""/>
                    <input type="hidden" name="type" value="2"/>
                    <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="zh_star" readonly="readonly" class="s-sl valid_zh_star_time myValid" placeholder="" name="zh_star" value="">
                    <b></b>
                </div>
            </li>
            <li style="border-bottom: none">
                <p>展会结束时间</p>
                <div class="dfg">
                    <input id="zh_end" readonly="readonly" class="s-sl valid_zh_end_time myValid" placeholder=""  name="zh_end" value="">
                    <b></b>
                </div>
            </li>
            <li style="border-bottom: none">
                <p>展位总面积</p>
                <div class="dfg">
                    <input  placeholder="请填写展位具体面积" class="s-sd valid_ex_acreage myValid" id="a4" name="ex_acreage"  value="">
                    <em class="wed">平米</em>
                    <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 style="border-bottom: none;">
                <p>雇员数量</p>
                <div class="dfg">
                    <input  placeholder="雇员数量" name="ex_emp_num" class="valid_ex_emp_num myValid" value="">
                    <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>
<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>
    var baseUrl = '${pageContext.request.contextPath }';
    var isDispute=false;
    var isCopy=false;
    var cpath='${ptTop}getResource?path=${fBody}${fName}.png';
    $(function () {
        $("#mask").hide();
        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 === "zh_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);
                    $("#zh_end").mobiscroll($.extend(opt['date'], opt['default']));
                    $('#zh_end').val('');
                    $('#bz_star').val('');
                    $('#bz_end').val('');
                }
                if (id === "zh_end") {
                    var md = $("#zh_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('');
                }
            }
        };
        $("#zh_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";
    }
    function clearErr(obj){
        $(obj).nextAll("b").remove();
    }
    $("#a4").on('blur',function(){
        var mj = Number(this.value);
        if(mj){
            if(mj>36){
                $("#be_z").html(mj <109 ? "≥400万" : "≥500万");
                $("#ts_be").show();
            }else{
                $("#ts_be").hide();
            }
        }else{
            $("#ts_be").hide();
        }
    });
    $(".valid_name").bind("blur keyup",function(){ //展会名称
        var r1 = isWrong($(this).val().trim()=="",this,"请输入展会名称"); if(!r1) return r1;
        var r2 = isWrong( !($(this).val().length<=24 && $(this).val().length>=1),this,"请输入1-24个字符长度");
    });
    $(".valid_star_time").bind("change",function(){ //保障起始时间
        var r1 = isWrong($(this).val().trim()=="",this,"请选择保障起始时间"); if(!r1) return r1;
    });
    $(".valid_end_time").bind("change",function(){ //保障结束时间
        var r1 = isWrong($(this).val().trim()=="",this,"请选择保障结束时间"); if(!r1) return r1;
    });
    $(".valid_ex_acreage").bind("blur keyup",function(){ //展会面积
        var r1 = isWrong($(this).val().trim()=="",this,"请输入展位总面积"); if(!r1) return r1;
        var r3 = isWrong(!($(this).val()>=1),this,"请输入1以上的数值"); if(!r3) return r3;   //1  雇员数量20
    });
    $(".valid_ex_emp_num").bind("blur keyup",function(){ //雇员数量
        var r1 = isWrong($(this).val().trim()=="",this,"请输入雇员数量"); if(!r1) return r1;
        console.log(/^\+?[1-9]\d*$/.test($(this).val()));
        console.log(/^[1-9]\d*$/.test($(this).val()));
        var r2 = isWrong(!/^\+?[1-9]\d*$/.test($(this).val()),this,"请输入整数数值"); if(!r2) return r2;   //108  雇员数量20
        var r3 = isWrong(!($(this).val()>=1),this,"请输入数值必须大于1"); if(!r3) return r3;   //108  雇员数量20
    });

    $('.next-step .ert').click(function () {
        var p  = $("#defaultForm").serializeJson();
        allright=true;
        $(".myValid").each(function(){
            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) {
                    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>