<%@ 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">
    <p>保安人员保障制定系统</p>
</div>
<div class="users-data eeded">
    <h2 style="margin-left: 0.4rem;text-align:left;font-size: 28px;">请填写保障需求</h2>
    <form id="defaultForm" action="<c:url value='/weixin/onlineoffer/build-proposal'/>" method="post">
        <ul class="data">
            <li>
                <p>产品类型</p>
                <div class="dfg">
                    <input id="product_type" name="product_type" value="" type="hidden">
                    <input id="product_type_show" readonly="true"  class="s-sl valid_product_type myValid" placeholder="请选择" >
                    <b></b>
                </div>
            </li>
            <li>
                <p>预计保费</p>
                <div class="dfg">
                    <input placeholder="最低65元" id="yj_premium_min" name="yj_premium_min" class="valid_premium myValid" style="width: 40%;float: left;"/>
                    <div style="width: 20%;float: left;padding-top: 30px;font-weight: bold">~</div>
                    <input placeholder="最高650元" id="yj_premium_max" name="yj_premium_max" class="valid_premium myValid" style="width: 40%;"/>
                    <input type="hidden" name="type" value="3"/>
                    <input type="hidden" name="fBody" value="${fBody}"/>
                    <input type="hidden" name="fName" value="${fName}"/>
                    <b></b>
                </div>
            </li>

            <li>
                <p id="p_bxgs">保险公司</p>
                <div class="dfg">
                    <input id="insurance_company" name="insurance_company" value="" type="hidden">
                    <input id="insurance_company_show" readonly="true"  class="s-sl valid_insurance_company myValid" placeholder="请选择" >
                    <b></b>
                </div>
            </li>
            <li>
                <p id="p_bxcp">保险产品</p>
                <div class="dfg">
                    <input id="product_id" name="product_id" value="" type="hidden">
                    <input id="product_id_show" readonly="true"  class="s-sl valid_product_id myValid" placeholder="请选择" >
                    <b></b>
                </div>
            </li>
            <li>
                <p id="p_bzfa">保障方案</p>
                <div class="dfg">
                    <input id="support_plan" name="support_plan" value="" type="hidden">
                    <input id="support_plan_show" readonly="true"  class="s-sl valid_support_plan myValid" placeholder="请选择" >
                    <b></b>
                </div>
            </li>
            <li class="text-ti" style="margin-top: 0.32rem;">
                <i style="display: block;color: #ff8b00;line-height: 1.1;font-size: 22px;">温馨提示：请按顺序自上而下选填表单信息。</i>
            </li>
        </ul>
        <ul class="data" style="display: none">
            <li style="border-bottom: none;">
                <p>产品报价</p>
                <div class="dfg">
                    <span style="color: #ff8b00;font-size: 28px;background: none;" id="t_premium">68元/人</span>
                    <input id="premium" name="premium" value="" type="hidden">
                </div>
            </li>
        </ul>
    </form>
</div>
<div class="next-step">
    <span class="ert" style="width: 100%">生成报价方案书</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="business-select" id="xzlx">
    <h2>请选择产品类别</h2>
    <ul>
        <li>
            <p val="1">雇主责任险</p>
        </li>
        <li>
            <p val="2">团体意外险</p>
        </li>
    </ul>
</div>
<!--保险公司-->
<div class="business-select" id="bxgs">
    <h2>请选择保险公司</h2>
    <ul>
        <li>
            <p val="1">雇主责任险</p>
        </li>
        <li>
            <p val="2">团体意外险</p>
        </li>
    </ul>
</div>
<!--保险产品-->
<div class="business-select" id="bxcp">
    <h2>请选择保险产品</h2>
    <ul>
        <li>
            <p val="1">雇主责任险</p>
        </li>
        <li>
            <p val="2">团体意外险</p>
        </li>
    </ul>
</div>
<!--保障方案-->
<div class="business-select" id="bzfa">
    <h2>请选择保障方案</h2>
    <ul>
        <li>
            <p val="1">雇主责任险</p>
        </li>
        <li>
            <p val="2">团体意外险</p>
        </li>
    </ul>
</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>
    //产品类型选择
    lx_height = parseInt($('#xzlx').height()/2);
    $('#xzlx').css({"margin-top":-lx_height+'px'});
    $('#product_type_show').click(function () {
        $('#xzlx').show();
        $('.black-mask').show();
        $(this).blur();
    });
    $('#xzlx ul li p').click(function () {
        $('#xzlx ul li p').removeClass('on');
        $(this).addClass('on');
        var sd = $(this).text();
        $('#product_type_show').val(sd); //显示值
        $('#product_type').val($(this).attr("val")); //实际值
        $('#xzlx').hide();
        $('.black-mask').hide();
        $(".valid_product_type").trigger("change");
        matching({handle:'0',handle_val:$(this).attr("val")},function(obj){
            console.log(obj);
            var minp = Number(obj.msg.split(',')[0]);
            var maxp = Number(obj.msg.split(',')[1]);
            if($("#yj_premium_min").val()!=''&&Number($("#yj_premium_min").val())<minp){
                $("#yj_premium_min").val('');
            }
            if($("#yj_premium_max").val()!=''&&Number($("#yj_premium_max").val())>maxp){
                $("#yj_premium_max").val('');
            }
            $("#yj_premium_min").attr('placeholder','最低'+minp+'元');
            $("#yj_premium_max").attr('placeholder','最高'+maxp+'元');

            $("#yj_premium_min").unbind('blur keyup');
            $("#yj_premium_max").unbind('blur keyup');
            clear_method('1');
            $("#yj_premium_min").bind("blur keyup",function() { //预计保费
                var r1 = isWrong($(this).val().trim() == "", this, "请输入最低预计保费"); if (!r1) return r1;
                var r2 = isWrong(Number($(this).val()) < minp, this, '预计保费最低限制' + minp + '元'); if (!r2) return r2;
                var r3 = isWrong(Number($(this).val()) > maxp, this, '预计保费最高限制' + maxp + '元'); if (!r3) return r3;
                var _vmi = Number($("#yj_premium_min").val());
                var _vma = Number($("#yj_premium_max").val());
                if(minp<=_vmi && _vmi<= _vma && _vma<= maxp){
                    toMethod();
                }else{
                    clear_method('1');
                    isWrong(true, this, '请按提示信息输入保费');
                }
            });
            $("#yj_premium_max").bind("blur keyup",function(){ //预计保费
                var r0 = isWrong($("#yj_premium_min").val().trim()=="",this,"请输入最低预计保费"); if(!r0) return r0;
                var r1 = isWrong($(this).val().trim()=="",this,"请输入最高预计保费"); if(!r1) return r1;
                var r11 = isWrong(Number($(this).val())<Number($("#yj_premium_min").val()),this,"不能低于最低预计保费"); if(!r11) return r11;
                var r2 = isWrong( Number($(this).val())>maxp,this,'预计保费最高限制'+maxp+'元'); if (!r2) return r2;
                var _vmi = Number($("#yj_premium_min").val());
                var _vma = Number($("#yj_premium_max").val());
                if(minp<=_vmi && _vmi<= _vma && _vma<= maxp){
                    toMethod();
                }else{
                    clear_method('1');
                    isWrong(true, this, '请按提示信息输入保费');
                }

            });
        });
    });
    function toMethod(){
        matching({handle:'1',handle_val:$('#product_type').val()+'#'+$("#yj_premium_min").val()+','+$("#yj_premium_max").val()},function(obj){
            if(obj.data.length == 1){//保险公司默认
                $('#insurance_company_show').val(obj.data[0].ic_name); //显示值
                $('#insurance_company').val(obj.data[0].ic_code); //实际值
                clear_method('2');
                matching({handle:'2',handle_val:obj.data[0].ic_code+'#'+$("#yj_premium_min").val()+','+$("#yj_premium_max").val()},function(obj1){
                    if(obj1.data.length == 1){//保险产品默认
                        $('#product_id_show').val(obj1.data[0].product_name); //显示值
                        $('#product_id').val(obj1.data[0].oid); //实际值
                        matching({handle:'3',handle_val:obj1.data[0].oid+'#'+$("#yj_premium_min").val()+','+$("#yj_premium_max").val()},function(obj2){
                            if(obj2.data.length == 1) {//保障方案默认
                                $('#support_plan_show').val(obj2.data[0].bz_name); //显示值
                                $('#support_plan').val(obj2.data[0].bz_code); //实际值
                                matching({handle:'4',handle_val:$('#product_id').val()+'#'+obj2.data[0].bz_code},function(obj3){
                                    $('#t_premium').html(obj3.data+'元/人');
                                    $('#premium').val(obj3.data);
                                    $('#premium').parent().parent().parent().show();
                                });
                            }else{
                                var h = '';
                                for(var i in obj2.data){
                                    h = h + '<li><p val="'+obj2.data[i].bz_code+'">'+obj2.data[i].bz_name+'</p></li>';
                                }
                                $('#bzfa').children().last().html(h);
                                bzfa_method();
                            }
                        });
                    }else{
                        var h = '';
                        for(var i in obj1.data){
                            h = h + '<li><p val="'+obj1.data[i].oid+'">'+obj1.data[i].product_name+'</p></li>';
                        }
                        $('#bxcp').children().last().html(h);
                        bxcp_method();
                    }
                });
            }else{
                var h = '';
                for(var i in obj.data){
                    h = h + '<li><p val="'+obj.data[i].ic_code+'">'+obj.data[i].ic_name+'</p></li>';
                }
                $('#bxgs').children().last().html(h);
                bxgs_method();
            }
        });
    }
    function clear_method(t){
        if(t == '1'){
            $('#insurance_company_show').unbind('click');
            $('#insurance_company_show').val('');
            $('#insurance_company').val('');
            $('#product_id_show').unbind('click');
            $('#product_id_show').val('');
            $('#product_id').val('');
            $('#support_plan_show').unbind('click');
            $('#support_plan_show').val('');
            $('#support_plan').val('');
        }else if(t == '2'){
            $('#product_id_show').unbind('click');
            $('#product_id_show').val('');
            $('#product_id').val('');
            $('#support_plan_show').unbind('click');
            $('#support_plan_show').val('');
            $('#support_plan').val('');
        }else if(t == '3'){
            $('#support_plan_show').unbind('click');
            $('#support_plan_show').val('');
            $('#support_plan').val('');
        }
        $('#t_premium').html('');
        $('#premium').val('');
        $('#premium').parent().parent().parent().hide();
    }
    //保险公司选择
    function bxgs_method(){
        gs_height = parseInt($('#bxgs').height()/2);
        $('#bxgs').css({"margin-top":-gs_height+'px'});
        $('#insurance_company_show').click(function () {
            $('#bxgs').show();
            $('.black-mask').show();
            $(this).blur();
        });
        $('#bxgs ul li p').click(function () {
            $('#bxgs ul li p').removeClass('on');
            $(this).addClass('on');
            var sd = $(this).text();
            $('#insurance_company_show').val(sd); //显示值
            $('#insurance_company').val($(this).attr("val")); //实际值
            $('#bxgs').hide();
            $('.black-mask').hide();
            $(".valid_insurance_company").trigger("change");
            clear_method('2');
            matching({handle:'2',handle_val:$(this).attr("val")+'#'+$("#yj_premium_min").val()+','+$("#yj_premium_max").val()},function(obj){
                if(obj.data.length == 1){//保险产品默认
                    $('#product_id_show').val(obj.data[0].product_name); //显示值
                    $('#product_id').val(obj.data[0].oid); //实际值
                    matching({handle:'3',handle_val:obj.data[0].oid+'#'+$("#yj_premium_min").val()+','+$("#yj_premium_max").val()},function(obj2){
                        if(obj2.data.length == 1) {//保障方案默认
                            $('#support_plan_show').val(obj2.data[0].bz_name); //显示值
                            $('#support_plan').val(obj2.data[0].bz_code); //实际值
                            matching({handle:'4',handle_val:$('#product_id').val()+'#'+obj2.data[0].bz_code},function(obj3){
                                $('#t_premium').html(obj3.data+'元/人');
                                $('#premium').val(obj3.data);
                                $('#premium').parent().parent().parent().show();
                            });
                        }else{
                            var h = '';
                            for(var i in obj2.data){
                                h = h + '<li><p val="'+obj2.data[i].bz_code+'">'+obj2.data[i].bz_name+'</p></li>';
                            }
                            $('#bzfa').children().last().html(h);
                            bzfa_method();
                        }
                    });
                }else{
                    var h = '';
                    for(var i in obj.data){
                        h = h + '<li><p val="'+obj.data[i].oid+'">'+obj.data[i].product_name+'</p></li>';
                    }
                    $('#bxcp').children().last().html(h);
                    bxcp_method();
                }
            });
        });
    }

    //保险产品选择
    function bxcp_method(){
        cp_height = parseInt($('#bxcp').height()/2);
        $('#bxcp').css({"margin-top":-cp_height+'px'});
        $('#product_id_show').click(function () {
            $('#bxcp').show();
            $('.black-mask').show();
            $(this).blur();
        });
        $('#bxcp ul li p').click(function () {
            $('#bxcp ul li p').removeClass('on');
            $(this).addClass('on');
            var sd = $(this).text();
            $('#product_id_show').val(sd); //显示值
            $('#product_id').val($(this).attr("val")); //实际值
            $('#bxcp').hide();
            $('.black-mask').hide();
            $(".valid_product_id").trigger("change");
            clear_method('3');
            matching({handle:'3',handle_val:$(this).attr("val")+'#'+$("#yj_premium_min").val()+','+$("#yj_premium_max").val()},function(obj){
                if(obj.data.length == 1) {//保障方案默认
                    $('#support_plan_show').val(obj.data[0].bz_name); //显示值
                    $('#support_plan').val(obj.data[0].bz_code); //实际值
                    matching({handle:'4',handle_val:$('#product_id').val()+'#'+obj.data[0].bz_code},function(obj3){
                        $('#t_premium').html(obj3.data+'元/人');
                        $('#premium').val(obj3.data);
                        $('#premium').parent().parent().parent().show();
                    });
                }else{
                    var h = '';
                    for(var i in obj.data){
                        h = h + '<li><p val="'+obj.data[i].bz_code+'">'+obj.data[i].bz_name+'</p></li>';
                    }
                    $('#bzfa').children().last().html(h);
                    bzfa_method();
                }
            });
        });
    }

    //保障方案选择
    function bzfa_method(){
        fa_height = parseInt($('#bzfa').height()/2);
        $('#bzfa').css({"margin-top":-fa_height+'px'});
        $('#support_plan_show').click(function () {
            $('#bzfa').show();
            $('.black-mask').show();
            $(this).blur();
        });
        $('#bzfa ul li p').click(function () {
            $('#bzfa ul li p').removeClass('on');
            $(this).addClass('on');
            var sd = $(this).text();
            $('#support_plan_show').val(sd); //显示值
            $('#support_plan').val($(this).attr("val")); //实际值
            $('#bzfa').hide();
            $('.black-mask').hide();
            $(".valid_support_plan").trigger("change");
            matching({handle:'4',handle_val:$('#product_id').val()+'#'+$(this).attr("val")},function(obj){
                $('#t_premium').html(obj.data+'元/人');
                $('#premium').val(obj.data);
                $('#premium').parent().parent().parent().show();
            });
        });
    }

    function matching(p,g_comm_back){
        g_ajax("/weixin/onlineoffer/matching",p,function(json){
            if (json.success) {
                g_comm_back(json);
            } else {
                layer.open({content:json.msg,btn: '我知道了'})
            }
        },true);
    }

    var baseUrl = '${pageContext.request.contextPath }';
    var isDispute=false;
    var isCopy=false;
    var cpath='${ptTop}getResource?path=${fBody}${fName}.png';
    $(function () {
        $("#mask").hide();
        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).nextAll("input:last").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";
    }

    $('.next-step .ert').click(function () {
        var p  = $("#defaultForm").serializeJson();
        allright=true;
        $(".myValid").each(function(){
            $(this).trigger("blur"); $(this).trigger("change");
        }); //校验表单
        if(p.product_type == ''||p.insurance_company == ''||p.product_id == ''||p.support_plan == ''||p.premium == ''){
            allright=false;
        }
        if(allright){
           /* $('.jq').click();
             $("#mask").show();*/
            $("#defaultForm").submit();
            /*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>