<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${productDto.product_name}</title>
</head>
<body>
<jsp:include page="../../../index/multi_h.jsp"/>
<!--产品详情页内容-->
<div class="product-particulars">
    <div class="partic-place">
        <p>
            <%--当前位置: <a href="<c:url value='/' />">首页</a> > <a target="_blank"
                                                            href="<c:url value='/synopsis/product/productAllView' />">产品列表</a>
            > <span id="place">产品详情</span>--%>
        </p>
        <ul class="clearfix" id="nav">
            <li class="current">
                <a href="#section-1">产品详情</a>
            </li>
            <li>
                <a href="#section-2">投保须知</a>
            </li>
            <li>
                <a href="#section-3">典型案例</a>
            </li>
            <li>
                <a href="#section-4">保险条款</a>
            </li>
            <li>
                <a href="#section-5">理赔流程</a>
            </li>
            <li>
                <a href="#section-6">常见问题</a>
            </li>
        </ul>
    </div>
    <div class="partic-content clearfix">
        <div class="partic-left fl">
            <div class="insur-content" id="section-1">
                <!--<div class="insur-logo">-->
                <!--<img src="<c:url value='/resources/version_new/images/taikang-green.png' />">-->
                <!--</div>-->
                <div class="insur-head clearfix">
                    <p class="fl">${productDto.product_name}</p>
                    <div class="insur-share fr">
                        <span class="fl">
                            <i>￥</i>
                            <em>${productDto.premium_min }起</em>
                        </span>
                        <a href="javascript:;" class="share-more fl copyPathToShare">立即分享</a>
                        <c:if test="${productDto.p_status eq '0'}">
                            <a href="javascript:;"
                               onclick="layer.alert('该产品目前已下架，请选择其它产品！', {skin: 'layui-layer-lan',closeBtn: 0,anim: 4});"
                               class="insur-buy fl insur-buy-gray">立即购买</a>
                        </c:if>
                        <c:if test="${productDto.p_status eq '1'}">
                            <a href="<c:url value='/insurance/build/policyInit/${productDto.oid }?recommendCode=${recommendCode}&ACCESS_TOKEN=${ACCESS_TOKEN}' />"
                               class="insur-buy fl">立即购买</a>
                        </c:if>
                    </div>
                </div>
                <ul class="insur-label clearfix">
                    <c:if test="${fn:contains(productDto.product_label,',')}">
                        <c:forEach items="${fn:split(productDto.product_label,',')}" var="lables">
                            <li>${lables}</li>
                        </c:forEach>
                    </c:if>
                    <c:if test="${fn:contains(productDto.product_label,' ')}">
                        <c:forEach items="${fn:split(productDto.product_label,' ')}" var="lables">
                            <li>${lables}</li>
                        </c:forEach>
                    </c:if>
                </ul>
                <p class="insur-p" id="insur-p-p">
                </p>
                <table cellspacing="0" cellpadding="0" class="wed">
                    <tbody>
                    <tr>
                        <td>
                            <span>保险公司</span>
                        </td>
                        <td>
                            <span class="grey">${productDto.insurance_name}</span>
                        </td>
                        <td>
                            <span>保险金额</span>
                        </td>
                        <td>
                            <span class="grey">${productDto.dl_coverage}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>适用范围</span>
                        </td>
                        <td>
                            <span class="grey">${productDto.scope}</span>
                        </td>
                        <td>
                            <span>限购份数</span>
                        </td>
                        <td>
                            <span class="grey">1份</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>保单形式</span>
                        </td>
                        <td>
                            <span class="grey">${productDto.from_of_policy}</span>
                        </td>
                        <td>
                            <span>缴费期间</span>
                        </td>
                        <td>
                            <span class="grey">${productDto.payment_way eq '1' ? '一次性' : productDto.payment_way eq '2' ? '分期' : productDto.payment_way eq '1,2' ? '一次性或分期' : '-'}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>保障期限</span>
                        </td>
                        <td>
                            <span class="grey">${productDto.dl_rep_time}</span>
                        </td>
                        <td>
                            <span>保费</span>
                        </td>
                        <td>
                            <span class="grey">${productDto.dl_priem}</span>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div class="security-content">
                    <p class="clearfix">
                        <i class="fl"></i>
                        <span class="fl">保障内容</span>
                    </p>
                    <table cellspacing="0" cellpadding="0">
                        <thead>
                        <tr>
                            <th>
                                <span>保障责任</span>
                            </th>
                            <th width="320">
                                <span>保障说明</span>
                            </th>
                            <th>
                                <c:set var="irp_1" value="${ productDto.responsibilityVoList[0] }"></c:set>
                                <c:choose>
                                    <c:when test="${empty irp_1.insurance_amount_max && not empty irp_1.fcy}">
                                        <span>保险金额</span>
                                    </c:when>
                                    <c:when test="${empty irp_1.fcy && not empty irp_1.insurance_amount_max}">
                                        <span>赔偿限额</span>
                                    </c:when>
                                    <c:otherwise>
                                        <span>保险金额</span>
                                    </c:otherwise>
                                </c:choose>
                            </th>
                            <th>
                                <span>免赔额</span>
                            </th>
                            <th>
                                <span>赔付比例</span>
                            </th>
                            <th>
                                <span>免赔天数</span>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${ productDto.responsibilityVoList }" var="irp">
                            <tr class="bg-3f">
                                <td class="ert">${irp.name}</td>
                                <td class="text">
                                    <span>${irp.explain_product}</span>
                                </td>
                                <td>
                                    <c:choose>
                                        <c:when test="${empty irp.insurance_amount_max && not empty irp.fcy}">
											<span>
												<c:if test="${ empty irp.fcy}">
                                                    -
                                                </c:if>
												<c:if test="${empty irp.compensation_days && not empty irp.fcy}">
                                                    <c:if test="${irp.fcy/10000 >= 1}">
                                                        ${(fn:split((irp.fcy/10000),'.')[1] eq '0' || fn:split((irp.fcy/10000),'.')[1] eq '00') ? fn:split((irp.fcy/10000),'.')[0] : (irp.fcy/10000)}
                                                        万元
                                                    </c:if>
                                                    <c:if test="${irp.fcy/10000 < 1}">
                                                        ${(fn:split(irp.fcy,'.')[1] eq '0' || fn:split(irp.fcy,'.')[1] eq '00') ? fn:split(irp.fcy,'.')[0] : irp.fcy}
                                                        元
                                                    </c:if>
                                                </c:if>
												<c:if test="${not empty irp.compensation_days && not empty irp.fcy}">
                                                    <c:if test="${irp.fcy/10000 >= 1}">
                                                        ${(fn:split((irp.fcy/10000),'.')[1] eq '0' || fn:split((irp.fcy/10000),'.')[1] eq '00') ? fn:split((irp.fcy/10000),'.')[0] : (irp.fcy/10000)}
                                                        万元/天
                                                    </c:if>
                                                    <c:if test="${irp.fcy/10000 < 1}">
                                                        ${(fn:split(irp.fcy,'.')[1] eq '0' || fn:split(irp.fcy,'.')[1] eq '00') ? fn:split(irp.fcy,'.')[0] : irp.fcy}
                                                        元/天
                                                    </c:if>
                                                </c:if>
											</span>
                                        </c:when>
                                        <c:when test="${empty irp.fcy && not empty irp.insurance_amount_max}">
											<span>
												<c:if test="${ empty irp.insurance_amount_max}">
                                                    -
                                                </c:if>
												<c:if test="${empty irp.compensation_days && not empty irp.insurance_amount_max}">
                                                    <c:if test="${irp.insurance_amount_max/10000 >= 1}">
                                                        ${(fn:split((irp.insurance_amount_max/10000),'.')[1] eq '0' || fn:split((irp.insurance_amount_max/10000),'.')[1] eq '00') ? fn:split((irp.insurance_amount_max/10000),'.')[0] : (irp.insurance_amount_max/10000)}
                                                        万元
                                                    </c:if>
                                                    <c:if test="${irp.insurance_amount_max/10000 < 1}">
                                                        ${(fn:split(irp.insurance_amount_max,'.')[1] eq '0' || fn:split(irp.insurance_amount_max,'.')[1] eq '00') ? fn:split(irp.insurance_amount_max,'.')[0] : irp.insurance_amount_max}
                                                        元
                                                    </c:if>
                                                </c:if>
												<c:if test="${not empty irp.compensation_days && not empty irp.insurance_amount_max}">
                                                    <c:if test="${irp.insurance_amount_max/10000 >= 1}">
                                                        ${(fn:split((irp.insurance_amount_max/10000),'.')[1] eq '0' || fn:split((irp.insurance_amount_max/10000),'.')[1] eq '00') ? fn:split((irp.insurance_amount_max/10000),'.')[0] : (irp.insurance_amount_max/10000)}
                                                        万元/天
                                                    </c:if>
                                                    <c:if test="${irp.insurance_amount_max/10000 < 1}">
                                                        ${(fn:split(irp.insurance_amount_max,'.')[1] eq '0' || fn:split(irp.insurance_amount_max,'.')[1] eq '00') ? fn:split(irp.insurance_amount_max,'.')[0] : irp.insurance_amount_max}
                                                        元/天
                                                    </c:if>
                                                </c:if>
											</span>
                                        </c:when>
                                        <c:otherwise>
                                            <span>-</span>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td>
                                    <span>${empty irp.cumulative_deductibles ? '-' : irp.cumulative_deductibles}</span>
                                </td>
                                <td>
                                    <span>${empty irp.compensation_ratio ? '-' : irp.compensation_ratio}${not empty irp.compensation_ratio ? '%' : ''}</span>
                                </td>
                                <td>
                                    <span>${empty irp.deductible_days ? '-' : irp.deductible_days}</span>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="sed insur-informa" id="section-2">
                <h2 class="clearfix">
                    <i class="fl"></i>
                    <span class="fl">投保须知</span>
                </h2>
                <p id="section-p-2">
                    <c:if test="${fn:contains(productDto.notice_mod,'<p>')}">
                        ${fn:replace(fn:replace(fn:replace(fn:replace(fn:replace(productDto.notice_mod, '<br>', ''), '<br/>', ''), '<p></p>', ''), '<p>', ''), '</p>', '<br/>')}
                    </c:if>
                    <c:if test="${fn:contains(productDto.notice_mod,'<div>')}">
                        ${fn:replace(fn:replace(fn:replace(fn:replace(fn:replace(productDto.notice_mod, '<br>', ''), '<br/>', ''), '<div></div>', ''), '<div>', ''), '</div>', '<br/>')}
                    </c:if>
                </p>
            </div>
            <div class="sed insur-case" id="section-3">
                <h2 class="clearfix">
                    <i class="fl"></i>
                    <span class="fl">典型案例</span>
                </h2>
                ${productDto.sample_mod}
            </div>
            <div class="sed insur-clause" id="section-4">
                <h2 class="clearfix">
                    <i class="fl"></i>
                    <span class="fl">保险条款</span>
                </h2>
                <ul>
                    <h2 style="font-size: 14px">特别提醒：保险责任请参考以下条款，并敬请特别留意条款中的<span style="color: red ;font-size: 14px" >"责任免除"</span>部分。</h2>
                    <c:if test="${not empty productDto.pro_clauses}">
                        <c:forEach items="${fn:split(productDto.pro_clauses, '#')}" var="pcs">
                            <li>
                                <a target="_blank" href="<c:url value='/weixin/product/clause/${fn:split(pcs, "::")[0]}' />">${fn:split(pcs, "::")[1]}</a>
                                <div class="clause-cic"></div>
                            </li>
                        </c:forEach>
                    </c:if>
                </ul>
            </div>
            <div class="claims-process" id="section-5">
                <h2 class="clearfix">
                    <i class="fl"></i>
                    <span class="fl">理赔流程</span>
                </h2>
                <div class="claims-content">
                    <div class="content-img">
                        <img src="<c:url value='/resources/version_new/images/claims.png'/>" alt="理赔流程图">
                    </div>
                    <ul class="clearfix">
                        <li>
                            <p>拨打报案电话</p>
                            <span>根据保单信息拨打相应保险公司报案电话或拨打平台报案电话400-662-9696或根据平台要求在线填写信息</span>
                        </li>
                        <li class="wer">
                            <p>准备材料</p>
                            <span>根据服务人员告知的资料清单准备理赔资料</span>
                        </li>
                        <li class="wed">
                            <p>理赔办理</p>
                            <span>提交理赔资料</span>
                        </li>
                        <li>
                            <p>审核</p>
                            <span>保险公司审核理赔材料</span>
                        </li>
                        <li class="jie">
                            <p>结案</p>
                            <span>确属保险责任范围的事故，保险公司将在约定时效内赔付</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="common-problems" id="section-6">
                <h2 class="clearfix">
                    <i class="fl"></i>
                    <span class="fl">常见问题</span>
                </h2>
                <ul id="section-6-p">
                    ${productDto.faq_mod}
                    <%--<li>
                        <h3>有必要买投标保证保险保函吗？</h3>
                        <p>
                            在工程项目招标时，招标人一般会要求投标人为投标行为进行担保，目前提供现金保证金、银行保函、担保公司保函与保险保函是我国主要投标担保模式。但上述方式中，现金保证金会对投标人的资金造成一段时间的占压，给投标人带来负担；而银行保函、担保公司保函须投标人提供反担保或经历较为复杂的办理，手续费也相对较高。投标保证保险保函具有低成本、高效率的特点，与现金担保、银行保函、担保公司保函具有同等效力。</p>
                    </li>
                    <li>
                        <h3>电子保单靠谱吗？</h3>
                        <p>根据《中华人民共和国合同法》第十一条规定，数据电文是合法的合同表现形式，电子保单与纸质保单具有同等法律效力。</p>
                    </li>
                    <li>
                        <h3>保证金额度低于12万元的如何收取保费？</h3>
                        <p>该产品最低保费为240元，保证金额度为12万。若招标企业要求担保的保证金低于12万的，购买12万保证金额度同样可使用。</p>
                    </li>
                    <li>
                        <h3>如何查询验证保单？</h3>
                        <p>为保证您的合法权益,您可拨打客户服务热线95586或登入http://www.dbic.com.cn/cblpzzcx/index.jhtml网址对您所投保保单的相关信息进行查询。</p>
                    </li>
                    <li>
                        <h3>投标保证保险的保险期间如何确定？</h3>
                        <p>本产品保障期间为自本保险合同生效之日起或自投保人向被保险人提交投标文件之日起，二者以后发生者为准，至被保险人与中标人签署相应的书面合同之日止，最长不超过三个月。</p>
                    </li>--%>
                </ul>
            </div>

        </div>
        <div class="partic-right fr">
            <jsp:include page="../../../index/multi_ins_intro.jsp"/>
            <jsp:include page="../../../index/multi_hot_product.jsp"/>
        </div>
    </div>
</div>

<!--滚动轴滚动一定距离后出现固定导航栏-->
<div class="product-wed">
    <div class="wed-content">
        <ul class="clearfix" id="nav-more">
            <li class="current">
                <a href="#section-1">产品详情</a>
            </li>
            <li>
                <a href="#section-2">投保须知</a>
            </li>
            <li>
                <a href="#section-3">典型案例</a>
            </li>
            <li>
                <a href="#section-4">保险条款</a>
            </li>
            <li>
                <a href="#section-5">理赔流程</a>
            </li>
            <li>
                <a href="#section-6">常见问题</a>
            </li>
        </ul>
        <div class="share-buy fr">
            <span class="fl">
                 <i>保费</i>
                 <b>￥</b>
                 <em>${productDto.premium_min }起</em>
            </span>
            <a href="javascript:;" class="share-more fl copyPathToShare">立即分享</a>
            <c:if test="${productDto.p_status eq '0'}">
                <a href="javascript:;"
                   onclick="layer.alert('该产品目前已下架，请选择其它产品！', {skin: 'layui-layer-lan',closeBtn: 0,anim: 4});"
                   class="insur-buy fl insur-buy-gray">立即购买</a>
            </c:if>
            <c:if test="${productDto.p_status eq '1'}">
                <a href="<c:url value='/insurance/build/policyInit/${productDto.oid }?recommendCode=${recommendCode}&ACCESS_TOKEN=${ACCESS_TOKEN}' />"
                   class="insur-buy fl">立即购买</a>
            </c:if>
        </div>
    </div>
</div>

<!--产品链接复制弹出框-->
<div class="link-share">
    <h2 class="clearfix">提示
        <span id="link-close">
            <img src="<c:url value='/resources/version_new/images/link-close.png' />">
        </span>
    </h2>
    <div class="link-success">
        <p>
            <img src="<c:url value='/resources/version_new/images/link-success.png' />">
            <span>产品链接已复制！您可以将它分享给其他人。</span>
        </p>
        <a href="javascript:;" class="link-zhi">我知道了</a>
    </div>
</div>

<!--弹出框透明蒙板-->
<div class="link-mask"></div>

<jsp:include page="../../../index/multi_f.jsp"/>
<script type="text/javascript" src="<c:url value='/resources/version_new/js/jquery.min.js' />"></script>
<script type="text/javascript" src="<c:url value='/resources/version_new/js/jquery.nav.js' />"></script>
<script>
    var baseUrl = '${pageContext.request.contextPath }';
    $(function () {
        //        滚动固定导航栏
        $('#nav').onePageNav();
        $('#nav-more').onePageNav();
        $(window).scroll(function () {
            if ($(window).scrollTop() >= 350) {
                $('.product-wed').fadeIn();
            } else {
                $('.product-wed').fadeOut();
            }
        });

        $(window).onload = function () {
            if ($(window).scrollTop() >= 350) {
                $('.product-wed').fadeIn();
            } else {
                $('.product-wed').fadeOut();
            }
        }

        $('ul#nav li a').click(function () {
            var s_index = $(this).parent().index();
            $('ul#nav-more li').eq(s_index).children('a').click();
        });

        //计划的切换
        $('.insur-plan ul li').click(function () {
            $('.insur-plan ul li').removeClass('on');
            $(this).addClass('on');
        });

        //点击复制链接
        var s_url = '${sharePath }';
        var _rm_val = s_url.split('=')[1];
        if(_rm_val == ''){
            $('a.share-more').on('click',function(){
                if($('.link-success a').length==1){
                    $('.link-success p').html("<span>您当前未登录，分享产品无法关联您的推广信息！</span>");
                    $('.link-zhi').attr("href","/insurance/product/toLogin/${product_id}");
                    $('.link-zhi').html("去登录");
                    $('.link-zhi').attr('style','float: left;margin-left: 80px;');
                    $('.link-zhi').attr('class','');
                    $('.link-success a').after('<a class="link-s" style="float: right;margin-right: 80px;">继续分享</a>');
                    var clipboard_v = new Clipboard('.link-s', {
                        text: function() {
                            return s_url;
                        }
                    });
                    clipboard_v.on('success', function(e) {
                        $('.link-success').html('<p><img src="/resources/version_new/images/link-success.png"><span>产品链接已复制！您可以将它分享给其他人。</span></p><a href="javascript:;" class="link-zhi">我知道了</a>');
                        $('.link-zhi').click(function () {
                            $('.link-share').hide();
                            $('.link-mask').hide();
                        });
                    });
                }
                $('.link-share').show();
                $('.link-mask').show();
            });
        }else{
            var clipboard = new Clipboard('.copyPathToShare', {
                text: function () {
                    return s_url;
                }
            });

            clipboard.on('success', function (e) {
                $('.link-share').show();
                $('.link-mask').show();
            });
            $('.link-zhi').click(function () {
                $('.link-share').hide();
                $('.link-mask').hide();
            });
        }

        $('#link-close').click(function () {
            $('.link-share').hide();
            $('.link-mask').hide();
        });


        $("#insur-p-p").html('· '+'${productDto.intro}'.replace(/<.*?>/ig,''));
        $("#insur-p-p").html($("#insur-p-p").html().replace(/<.*?>/ig,''));
        $("#section-3").find("p").each(function(){
            $(this).html($(this).html().replace(/<.*?>/ig,''));
            $(this).attr("class","case-one");
        });
        $("#section-6-p").html(function(){
            var c=1;
            var lis = '';
            $("#section-6-p").find("p").each(function(){
                var htl = $(this).html().replace(/<.*?>/ig,'');
                if(htl != '' && htl != '&nbsp;' && htl != ' '){
                    if(c % 2 == 1){
                        lis = lis + '<li><h3>'+htl+'</h3>';
                    }else{
                        lis = lis + '<p>'+htl+'</p></li>';
                    }
                    c++;
                }
            });
            return lis;
        });

    })
</script>
</body>
</html>
