<%@ 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" %>
<%@ taglib uri="/WEB-INF/tld/fns.tld" prefix="fns" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /><meta http-equiv="X-UA-Compatible" content="IE=9" />
		<meta name="keywords" content="保险保函、电子保函、保证保险、保函开具、工程投标保证保险、建设合同履约保证保险、业主合同款支付保证保险、建设工程质量保证保险、建筑业企业人工工资支付保证保险、海关税保险、诉讼财产保全责任保险">
		<meta name="description" content="百联保是百川信（厦门）网络信息服务有限公司基于金融创新并响应“互联网＋”计划搭建的第三方金融服务平台。 ">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>百联保-产品中心</title>
		<%--<link type="text/css" rel="stylesheet" href="<c:url value='/resources/versions-2.0/dist/css/bootstrap.min.css' />" />--%>

	</head>
	<body>
	<jsp:include page="../index/multi_h.jsp"/>
	<!--产品列表的内容-->
	<div class="product-list">
		<div class="list-content clearfix">
			<div class="list-left fl">
				<div class="sort-filter clearfix">
					<p class="fl">
						排序:
					</p>
					<ul class="clearfix">
						<li>
							<a href="javascript:;" DT-VAL="+0" class="active" onclick="choiseProductCondition(this);">
								<span>默认</span>
							</a>
						</li>
						<li>
							<a href="javascript:;" DT-VAL="+1" onclick="choiseProductCondition(this);">
								<span>销量</span>
								<img src="<c:url value='/resources/version_new/images/top-icon.png' />">
							</a>
						</li>
						<li>
							<a href="javascript:;" DT-VAL="+2" onclick="choiseProductCondition(this);">
								<span>价格</span>
								<img src="<c:url value='/resources/version_new/images/bottom-icon.png' />">
							</a>
						</li>
						<li>
							<a href="javascript:;" DT-VAL="+3" onclick="choiseProductCondition(this);">
								<span>上架时间</span>
								<img src="<c:url value='/resources/version_new/images/top-icon.png' />">
							</a>
						</li>
					</ul>
				</div>
				<div class="filter-content" id="productsArea">
					<c:forEach items="${listVo }" var="list">
					<div class="filter clearfix">
						<div class="filter-text fl">
							<h2 style="margin: 0">${list.product_name}</h2>
							<h3 class="intro_some_h3">
								${list.intro}
							</h3>
							<p>保障期限: <span>1年</span></p>
							<ul class="insurance-money clearfix">
								<li>
									<span >保险责任</span>
								</li>
								<li>
									<span >保险金额</span>
								</li>
								<c:forEach items="${list.responsibilityVoList }" var="irp">
									<li>
										<span <c:if test="${irp.name eq '烈士褒扬金'}">style="color: red"</c:if>>${irp.name}</span>
									</li>
									<li>
										<span <c:if test="${irp.name eq '烈士褒扬金'}">style="color: red"</c:if>>
											<c:choose>
												<c:when test="${empty irp.insurance_amount_max && not empty irp.fcy}">
													<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>
												</c:when>
												<c:when test="${empty irp.fcy && not empty irp.insurance_amount_max}">
													<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>
												</c:when>
												<c:when test="${fn:contains(list.product_code, 'GZX-HT')}">
													500 - 3500 万元
												</c:when>
												<c:otherwise>
													-
												</c:otherwise>
											</c:choose>
										</span>
									</li>
								</c:forEach>
							</ul>
							<div class="the-label">
								<ul class="clearfix">
									<c:if test="${fn:contains(list.product_label,',')}">
										<c:forEach items="${fn:split(list.product_label,',')}" var="lables">
											<li>${lables}</li>
										</c:forEach>
									</c:if>
									<c:if test="${fn:contains(list.product_label,' ')}">
										<c:forEach items="${fn:split(list.product_label,' ')}" var="lables">
											<li>${lables}</li>
										</c:forEach>
									</c:if>

								</ul>
							</div>
							<div class="filter-logo"><c:if test="${not empty list.min_insurance_draw && fn:contains(list.min_insurance_draw, '?') }"><img src="${list.min_insurance_draw}" width="100%"></c:if></div>
						</div>
						<div class="filter-price fr">
							<div class="price">
								<c:if test="${not empty list.premium_min ? list.premium_min != '0.00' : false}">
								<p>
									<c:if test="${!fn:contains(list.product_code, 'TYX')}">
										<c:if test="${!fn:contains(list.product_code, 'GZX')&&!fn:contains(list.product_code, 'GZZRX')}">
											<c:if test="${!fn:contains(list.product_code, 'GCTB')&&!fn:contains(list.product_code, 'SSBQ')}">
												<c:if test="${empty list.premium_min || list.premium_min eq '0'}">
													<span>-</span>
												</c:if>
												<c:if test="${not empty list.premium_min && list.premium_min != '0'}">
													<i>￥</i><span>${list.premium_min}</span>
												</c:if>
											</c:if>
											<c:if test="${fn:contains(list.product_code, 'GCTB')||fn:contains(list.product_code, 'SSBQ')}">
												<c:if test="${empty list.premium_min || list.premium_min eq '0'}">
													<span>-</span>
												</c:if>
												<c:if test="${not empty list.premium_min && list.premium_min != '0'}">
													<i>￥</i><span>${list.premium_min}起</span>
												</c:if>
											</c:if>

										</c:if>
										<c:if test="${fn:contains(list.product_code, 'GZX')||fn:contains(list.product_code, 'GZZRX')}">
											<c:if test="${empty list.premium_min || list.premium_min eq '0'}">
												<span>-</span>
											</c:if>
											<c:if test="${not empty list.premium_min && list.premium_min != '0'}">
												<i>￥</i><span>${list.premium_min}起</span>
											</c:if>
										</c:if>
									</c:if>
									<c:if test="${fn:contains(list.product_code, 'TYX')}">
										<c:if test="${empty list.premium_min || list.premium_min eq '0'}">
											<span>-</span>
										</c:if>
										<c:if test="${not empty list.premium_min && list.premium_min != '0'}">
											<i>￥</i><span>${list.premium_min}${fn:contains(list.product_code, 'TYX-RB') ? '起':''}</span>
										</c:if>
									</c:if>
								</p>
								</c:if>
							</div>
							<div class="filter-details">
								<a href="${list.headurl }/insurance/product/productInfo/${list.oid }?ACCESS_TOKEN=${ACCESS_TOKEN}">查看详情</a>

							</div>
							<div class="filter-share">
								<a href="javascript:;" class="right-share copyPathToShare" data-clipboard-text="${fns:getShareUrl(list.oid,userdetail.business_support_id)}">立即分享</a>
							</div>
							<c:if test="${list.do_hot eq '1'}"><%--1代表热门--%>
								<div class="filter-hot">
									<p>热门</p>
								</div>
							</c:if>
						</div>
					</div>
					</c:forEach>

				</div>
				<div class="filter-pagination" style="text-align: center">
					<div id="callBackPager"></div>
				</div>
			</div>
			<form id="productForm">
				<input type="hidden" id="pro_type" name="pro_type" value="${pro_type }"/>
				<input type="hidden" id="condition" name="condition" value="${condition }"/>
				<input type="hidden" name="pageNum" id="pageNum" value="${dwzPage.pageNum}">
				<input type="hidden" name="numPerPage" id="numPerPage" value="${dwzPage.numPerPage}">
				<input type="hidden" name="totalCount" id="totalCount" value="${dwzPage.totalCount}">
			</form>
			<div class="list-right fr">
				<jsp:include page="../index/multi_hot_product.jsp"/>
				<%--<div class="insurance-that">
					<h2>什么是"保证保险保函"?</h2>
					<p>投标保证保险，指保险公司向工程项目招标人提供的保证工程项目投标人履行投标义务的保险。一旦投标人未履行投标义务导致招标人产生损失时，保险公司向招标人承担代偿责任。本产品投保简单，费用低、政府主管部门认可。</p>
					<ul>
						<li>
							<a href="javascript:;">什么是"保证保险保函?"</a>
						</li>
						<li>
							<a href="javascript:;">"保证保险保函"是否具有效力?</a>
						</li>
						<li>
							<a href="javascript:;">"保证保险保函"主要有哪些优势?</a>
						</li>
						<li>
							<a href="javascript:;">可否提供纸质版本保函及保单?</a>
						</li>
					</ul>
				</div>
				<div class="insurance-news">
					<a href="javascript:;">《国务院办公厅关于全面治理保安公司的合理办理》</a>
					<a href="javascript:;">《国务院办公厅关于全面治理保安公司的合理办理》</a>
					<a href="javascript:;">《国务院办公厅关于全面治理保安公司的合理办理》</a>
					<a href="javascript:;">《国务院办公厅关于全面治理保安公司的合理办理》</a>
				</div>--%>
			</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 src="<c:url value='/resources/js/extendPagination.js'/>" type="text/javascript"></script>
	<script type="text/javascript">
        var baseUrl = '${pageContext.request.contextPath }';
        $(function () {
            $('.list-left .sort-filter ul li a').on("click",function () {
                $('.list-left .sort-filter ul li a').removeClass('active');
                $(this).addClass('active');
            });

            //点击复制链接-分享
//            var s_url = window.location.href;

            if(${empty userdetail}){
                $('.copyPathToShare').on('click',function(){
                    if($('.link-success a').length==1){
                        var s_url = $(this).attr('data-clipboard-text');
                        var pid = s_url.split('?')[1].split('/')[s_url.split('?')[1].split('/').length-1];
                        $('.link-success p').html("<span>您当前未登录，分享产品无法关联您的推广信息！</span>");
                        $('.link-zhi').attr("href","/insurance/product/toLogin/"+pid);
                        $('.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');

                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();
            });
        });

//        function filter() {
//            var filter_length = $('.product-list .filter-content .filter').length;
//            for(var i=1;i<=filter_length;i++){
//                var filter_height = $('.product-list .filter-content .filter').eq(i).height();
//                $('.product-list .filter-content .filter').eq(i).find('.filter-text').css({"height":filter_height+'px'});
//                if(filter_height <= 290){
//                    $('.product-list .filter-content .filter').eq(i).find('.price').css({"margin-top":"50px"});
//                }
//            }
//        }




        /*window.onload = function(){
            var l_length = $('.pagination').width();
            var l = parseInt((l_length)/2)
            $('.pagination').css({"right":"0"});

        }
//        点击销量，分页排版
        $('.sort-filter ul li a').click(function () {
            var l_length = $('.pagination').width();
            var l = parseInt((l_length)/2)
            $('#callBackPager .pagination').css({"right":"0"});
        });*/





        var totalCount = Number($('#totalCount').val()) || 0;
        var showCount = $('#showCount').val() || 5;
        var limit = Number($('#numPerPage').val()) || 5;


        $('#callBackPager').extendPagination({
            totalCount: totalCount,
            showCount: showCount,
            limit: limit,
            callback: function (curr, limit, totalCount) {
                getListForPage("productForm","productsArea");
            },
        });
        function choiseProductCondition(obj){
            setDT(obj);
            $("#condition").val($(obj).attr('DT-VAL'));
            $('#pageNum').val("+1");
            loadDataAndPage();
            getListForPage("productForm","productsArea");
        }
        function setDT(obj){
            var dtv = $(obj).attr('DT-VAL');
            if(dtv == '+0'){

			}else if(dtv == '+1'){
                $(obj).attr('DT-VAL','-1');
                $(obj).find('img').attr('src','<c:url value='/resources/version_new/images/top-icon.png' />');
            }else if(dtv == '-1'){
                $(obj).attr('DT-VAL','+1');
                $(obj).find('img').attr('src','<c:url value='/resources/version_new/images/bottom-icon.png' />');
            }else if(dtv == '+2'){
                $(obj).attr('DT-VAL','-2');
                $(obj).find('img').attr('src','<c:url value='/resources/version_new/images/top-icon.png' />');
            }else if(dtv == '-2'){
                $(obj).attr('DT-VAL','+2');
                $(obj).find('img').attr('src','<c:url value='/resources/version_new/images/bottom-icon.png' />');
            }else if(dtv == '+3'){
                $(obj).attr('DT-VAL','-3');
                $(obj).find('img').attr('src','<c:url value='/resources/version_new/images/top-icon.png' />');
            }else if(dtv == '-3'){
                $(obj).attr('DT-VAL','+3');
                $(obj).find('img').attr('src','<c:url value='/resources/version_new/images/bottom-icon.png' />');
            }
		}
        function loadDataAndPage(){
            totalCount = Number($('#totalCount').val()) || 0;
            $('#callBackPager').extendPagination({
                totalCount: totalCount,
                showCount: showCount,
                limit: limit,
                callback: function (curr, limit, totalCount) {
                    getListForPage("productForm","productsArea");
                }
            });
        };


        function getListForPage(formId,contentId){
            var index = layer.load(0, {shade: [0.3,'#808080']});
            $.ajax({
                type : 'POST',
                url : baseUrl + "/synopsis/getroductAllForPage",
                data : $("#"+formId).serialize(),
                dataType : "text",
                success : function(data) {
                    layer.close(index);
                    $("#"+contentId).html(data);
                },
                error: function(){
                    layer.close(index);
                }
            });
        }
        $('.intro_some_h3').each(function(){
        	$(this).html('· '+$(this).html().replace(/<.*?>/ig,'').replace(/&nbsp;/ig,''));
		});
	</script>
	</body>
</html>
