<%@ 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/fmt" prefix="fmt" %>
<!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="百联保是百川信（厦门）网络技术有限公司基于金融创新并响应互联网＋计划搭建的第三方金融服务平台。秉承开拓金融创新，减轻企业负担的服务理念，百联保利用互联网平台优势并结合保险的市场作用，将与保证金、银行保函、担保公司保函具备同等效力的保证保险保函纳入经贸合作的担保形式之一，旨在减轻企业资金负担，简化申办流程，缩短办理周期，为企业客户提供低成本、高效率、安全专业的新型互联网金融服务。">
<title>百联保-保费支付</title>
<link href="<c:url value='/resources/css/public.css' />" rel="stylesheet" type="text/css" />
<link href="<c:url value='/resources/css/product_details.css' />" rel="stylesheet" type="text/css" />
<link href="<c:url value='/resources/css/login.css' />" rel="stylesheet" type="text/css" />
<link href="<c:url value='/resources/css/personal_center.css' />" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="masks" class="mask"></div>
<jsp:include page="../../header.jsp"/>

<!-- 产品详情 填写保单 开始 -->
<div class="pro_detwar"><!-- pro_detwar start -->
    	<div class="pro_detsub"><!-- pro_detsub start -->
            
<!-- 首页 > 产品详情 > 投保  开始 -->
        	<div class="guarantee_war">
            	<p><a href="<c:url value='/?ACCESS_TOKEN=${ACCESS_TOKEN}' />">首页</a> > <a href="<c:url value='/order/policyDetail/${policyForm.oid}?ACCESS_TOKEN=${ACCESS_TOKEN}' />">产品详情</a> > 投保</p>
            	<!-- 填写保单 确认保单 支付保费  完成投保 开始 -->
            	<div class="reg_list list_75">
                    <div class="plan pwd_plan reset_plan">
                        <ul>
                            <li><label>1</label></li>
                            <li><label>2</label></li>
                            <li><label>3</label></li>
                            <li><label>4</label></li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                    <div class="listing">
                        <ul>
                            <li id="color_ff6d37">填写保单</li>
                            <li id="color_ff6d37">确认保单</li>
                            <li id="color_ff6d37">支付保费</li>
                            <li>完成投保</li>
                        </ul>
                    </div>
                </div>
                <!-- 填写保单 确认保单 支付保费  完成投保  结束 -->
            </div>
            <!-- 首页 > 产品详情 > 投保  结束 -->
            
            
            <!-- 背景色 开始 -->
            <div class="bigbg_f3f4f5"></div>
            <!-- 背景色 结束 -->
            
            <!-- 支付保费 内部部分 开始 -->
           	<div class="clear"></div>
            <div class="pay_premium">
            	<div class="payp_list"><!-- payp_list star -->
                	<ul>
                    	<li>产品名称</li>
                        <li>保障期限</li>
                        <li>保费（元）</li>
                    </ul>
                    <ul>
                    	<li>${policyForm.agreementSpec.name}</li>
                        <li><fmt:formatDate pattern="yyyy-MM-dd" value="${policyForm.inceptionDate}"/> 至 <fmt:formatDate pattern="yyyy-MM-dd" value="${policyForm.plannedEndDate}"/></li>
                        <li>${policyForm.grossPremium}</li>
                    </ul>
                </div><!-- payp_list end -->
                
                <%-- <div class="clear"></div>
                <div class="advice_notewar"><!-- advice_notewar start -->
                	<div class="advice_notesub">
                        <h3>缴费通知书</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio.</p>
                        <P>1、Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. </P>
                        <p>2、Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. </p>
                        <p>3、Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
                        <p>4、Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio.</p>
                	</div>
                   
                    <div class="up_file"><p><a href="<c:url value='/' />"><!-- 下载缴费通知书 --></a></p></div>
                </div><!-- advice_notewar end -->
                 --%>
                <div class="clear"></div>
                <form action="<c:url value='/user/transaction/policyPayment?ACCESS_TOKEN=${ACCESS_TOKEN}' />" method="post" id="policyPaymentForm">
                <div class="pay_way">
                	<p class="money_pay" style="padding:10px 0;"><span>所需支付金额</span><label>￥${policyForm.grossPremium}</label></p>
					<input name="policyId" value="${policyForm.oid }" type="hidden"/>
                    <div id="platform"><!-- platform start -->
                        <div class="select_pay"><!-- select_pay start -->
                        	<div class="se_left">选择支付平台</div>
                            <div class="two_choose">
                                <ul>
                                    <li class="active">个人支付</li>
                                    <li>企业支付</li>
                                </ul>
                            </div>
                        </div><!-- select_pay end -->
                        <div class="aliwe"><!-- aliwe start -->
                        	<!--<p>
                                <span class="pay_check">
                                    <input type="radio" name="payment" id="payment1" />
                                    <label  for="payment1"></label>
                                    <img src="images/onlinepay.jpg" width="166" height="30" class="mar_img">
                                </span>
                                <span class="pay_check">
                                    <input type="radio"  name="payment" id="payment2" />
                                    <label  for="payment2"></label>
                                    <img src="images/wechat.jpg" width="120" height="35">
                                </span>
                            </p>-->
                            <!-- 个人支付 开始 -->
                            <div class="pay_check" style="display:block">
                                <div class="in_radio">
                                    <input type="radio" name="policyPaymentType" id="payment1" value="CHINAPAYPI"/>
                                    <label  for="payment1"></label>
                                </div>
                                <div class="text_number"><p>b2c</p></div>
                                <div class="mar_img">
                                	<p><img src="<c:url value='/resources/images/onlinepay.jpg' />" width="166" height="30"></p>
                                </div>
                            </div>
                            <!-- 个人支付 结束 -->
                            <!-- 企业支付 开始 -->
                             <div class="pay_check">
                                <div class="in_radio">
                                    <input type="radio" name="policyPaymentType" id="payment2" value="CHINAPAYPU" />
                                    <label  for="payment2"></label>
                                </div>
                                <div class="text_number"><p>b2b</p></div>
                                <div  class="mar_img">
                                	<p><img src="<c:url value='/resources/images/onlinepay.jpg' />" width="166" height="30"></p>
                                </div>
                            </div>
                            <!-- 企业支付 结束 -->
                        </div><!-- aliwe end -->
                        
                    </div><!-- platform end -->
                    
                </div>
                
                <div class="promptly_pay"><a href="javascript:void(0)" onclick="submitPayment()">立即支付</a></div>
                </form>
            </div>
            <!-- 支付保费 内部部分 结束 -->
            
           
        </div><!-- pro_detsub end -->
    </div><!-- pro_detwar end -->
    <!-- 产品详情 支付保费  结束 -->
	<!-- 弹出窗口 开始 -->
      <div class="finish_handle">
          <div class="hint_title">
          	<span class="mar_left10">提示</span>
          	<span id="close" onclick="closeWinD()"><img src="<c:url value='/resources/images/hint_close.jpg' />" width="14" height="15"></span>
          </div>
          <div class="clear"></div>
          <p><label>已完成操作，</label><a href="<c:url value='/transaction/policyVerify?ACCESS_TOKEN=${ACCESS_TOKEN}' />">返回首页</a><label>看看其它产品</label></p>
	</div>
	<!-- 弹出窗口 结束 -->
<jsp:include page="../../index/multi_f.jsp" />

<!-- script -->
<script src="<c:url value='/resources/script/jquery-1.8.3.min.js' />" type="text/javascript"></script>
<script src="<c:url value='/resources/js/insurance.js' />"></script>
<script src="<c:url value='/resources/js/date/laydate.js' />"></script>
<script src="<c:url value='/resources/js/Payment.js' />"></script>
<script type="text/javascript">
	var baseUrl = '${pageContext.request.contextPath }';
	function submitPayment() {
		
		var payType = $("input[name='policyPaymentType']:checked").val();
		if(payType == ''){
			alert("请选择支付方式");	
		}else{
			var w = window.open();
			$.ajax({
				type: 'POST',
				url:baseUrl + '/user/transaction/policyPayment',
				data:$("#policyPaymentForm").serialize(),
				dataType:"json",
				async:false,
				success: function(json){
					if(json.statusCode == '200') {
						//url = /transaction/policyVerify
						/* var tempwindow=window.open('_blank');
						tempwindow.location=json.forwardurl; */
						
						w.location = json.forwardurl;
						
						$("#masks").css({
							"height":$(document).height(),
							"width":$(document).width()
						}).show();
						$(".finish_handle").show();
						//window.open(json.forwardurl);
					}
					if(json.statusCode == '300') {
						
						alert(json.message);
					}
					if(json.statusCode == '301') {
						w.location = baseUrl + '/user/transaction/failMessage?msg='+json.message+'&ACCESS_TOKEN=${ACCESS_TOKEN}';
					}
				}
			});
		}
	}
	function closeWinD(){
		$("#masks").hide();
		location.href=baseUrl + '/transaction/policyVerify?ACCESS_TOKEN=${ACCESS_TOKEN}';
	}
</script>
</body>
</html>