<%@ 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" %>
<%@ taglib uri="/WEB-INF/tld/fns.tld" prefix="fns" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>互联网+保安团险报价方案书</title>
	<link rel="stylesheet" href="/static/weChat/css/bai_basic.css">
	<script type="text/javascript" src="<c:url value='/resources/script/jquery-1.10.2.min.js' />"></script>
	<script type="text/javascript" src="<c:url value='/resources/script/html2canvas.min.js' />"></script>
	<script src="/static/weChat/common/layer_mobile/layer.js"></script>
	<script src="/static/weChat/js/weixin_g.js"></script>
	<script type="text/javascript" src="<c:url value='/resources/version_new/js/clipboard.min.js' />"></script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html,
		body {
			max-width: 750px;
			width: 100%;
			margin: 0 auto;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-style: normal;
			color: #222;
			font-size: 14px;
			background-color: #fff2e5;
		}

		p {
			line-height: 24px;
		}

		table {
			width: 100%;
			border-collapse: collapse;
		}

		.active-content table td {
			padding: 14px;
			min-height: 50px;
			border-top: 1px solid #E7E7E7;
		}

		.active-content table .key {
			min-width: 30%;
			color: #999;
		}
		.header {
			height: 90px;
			padding: 30px;
			text-align: center;
			background: url(<c:url value='/resources/images/tx_bj/header-bg-1.png' />) no-repeat;
			background-size: 100% 100%;
		}
		/*.header {
			height: 90px;
			padding: 30px;
			text-align: center;
			background: url(<c:url value='/resources/images/tx_bj/header-bg-1.png' />) no-repeat;
			background-size: 100%;
			margin-top: -1px;
			z-index: -1;
		}*/

		.header .title {
			font-size: 24px;
			line-height: 30px;
			color: #fff;
			font-weight: normal;
		}

		.wrap img {
			width: 100%;
		}

		.product-solution {
			background-color: #fff;
			margin-bottom: 15px;
			margin: 20px;
			margin-top: 50px;
			border-radius: 8px;
		}

		.product-solution .product-header {
			height: 85px;
			padding-top: 26px;
			letter-spacing: 0;
			text-align: center;
			color: #333;
			position: relative;
			background: url(<c:url value='/resources/images/tx_bj/1-1.png' />) no-repeat;
			background-size: 100%;
		}

		.product-solution .product-content {
			padding: 14px;
			padding-top: 0;
		}

		.product-solution .product-header .section-title {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -20px;
			width: 60%;
			height: 40px;
			line-height: 40px;
			border-radius: 20px;
			font-size: 18px;
			color: #fff;
			background-color: #1396FF;
			font-weight: normal;
		}

		.product-solution .product-header .title {
			height: 30px;
			width: 100%;
			letter-spacing: 0;
			line-height: 30px;
			margin-bottom: 10px;
			color: #0086FE;
			text-align: center;
		}

		.product-solution .module table {
			text-align: center;
			margin-top: 12px;
			color: #333;
		}

		.product-solution .module table th {
			height: 40px;
			color: #fff;
			background-color: #008DFE;
			font-weight: normal;
		}

		.product-solution .module table .key {
			width: 36%;
		}

		.product-solution .module table td {
			border: 2px solid #fff;
			background-color: #FAFAFA;
			height: 100px;
		}

		.product-solution .module table .light-yellow {
			background-color: #F0F8FE;
		}

		.product-solution .module .tip {
			padding: 10px 0 20px 5px;
		}

		.product-solution .module .extra {
			padding: 15px 20px;
			background-color: #FFF2E5;
			line-height: 24px;
		}

		.product-solution .module .extra .title {
			font-size: 22px;
			color: #333;
			letter-spacing: 0;
			line-height: 22px;
		}
		.footer {
			height: 175px;
			letter-spacing: 0;
			text-align: center;
			color: #fff;
			position: relative;
			background: url(<c:url value='/resources/images/tx_bj/footer-bg-1.png' />) no-repeat;
			background-size: 100% 100%;
			text-align: left;
			padding-left: 8%;
			padding-top: 52px;
		}
		/*.footer {
			height: 175px;
			letter-spacing: 0;
			text-align: center;
			color: #fff;
			position: relative;
			background: url(<c:url value='/resources/images/tx_bj/footer-bg-1.png' />) no-repeat;
			background-size: 100%;
			text-align: left;
			padding-left: 50px;
			padding-top: 52px;
		}*/
		.footer p {
			line-height: 40px;
		}
		.footer ul {
			list-style: none;
		}
		.footer ul li {
			font-size: 12px;
			line-height: 24px;
		}
		.footer ul li img {
			width: 15px;
			vertical-align: middle;
			margin-right: 7px;
		}
		.next-step a{
			width: 100%;
			line-height: 50px;
			background: linear-gradient(90deg, #00A8FE, #0082FE);
			color: #ffffff;
			display: block;
			font-size: 17px;
			text-align: center;
			text-decoration:none;
		}
		.layui-m-layerbtn span[yes] {
			color: #fff;
			font-size: 16px;
		}
		.layui-m-layerbtn {
			background-color: #00A5FE;
		}
		.layui-m-layercont {
			font-size: 16px;
			color: #999;
		}
	</style>
</head>

<body>
<div class="test">
	<div class="header">
		<h1 class="title">互联网+保安团险报价方案书<br>为保安队伍保驾护航！</h1>
	</div>
	<div class="wrap">
		<img src="<c:url value='/resources/images/tx_bj/2-2.png' />" alt="">
		<img src="<c:url value='/resources/images/tx_bj/3-3.png' />" alt="">
		<img src="<c:url value='/resources/images/tx_bj/4-4.png' />" alt="">
		<img src="<c:url value='/resources/images/tx_bj/5-5.png' />" alt="">
	</div>
	<div class="product-solution">
		<div class="product-header">
			<h2 class="section-title">保障方案</h2>
			<h3 class="title">${productVo.product_name}</h3>
		</div>
		<div class="product-content">
			<div class="module">
				<p class="descript">${fn:replace(fn:replace(fn:replace(productVo.intro, '<p>', ''), '</p>', ''), '<br>', '')} </p>
				<table>
					<c:set var="yarr" value="${fn:split(zhtype, ',')}"/>
					<c:set var="hCount" value="${1}"/>
					<c:set var="dohide" value=""/>
					<c:forEach var="yao" items="${txlist}">
						<c:if test="${hCount == 1}">
							<thead>
							<tr>
								<c:set var="lCount" value="${1}"/>
								<c:forEach var="ya" items="${fn:split(yao, ',')}">
									<c:set var="dosp" value=""/>
									<c:set var="dost" value=""/>
									<c:forEach var="yt" items="${fn:split(zhtype, ',')}">
										<c:set var="ytarr" value="${fn:split(yt, '-')}"/>
										<c:if test="${ytarr[0] == 'z' && ytarr[1] == hCount && ytarr[2] == lCount}">
											<c:set var="dosp" value="rowspan='${ytarr[3]}'"/>
											<c:forEach begin="1" end="${ytarr[3]}" varStatus="t" >
												<c:if test="${ytarr[3] != t.count}">
													<c:set var="a1" value="${hCount + t.count}"/>
													<c:set var="a2" value="${a1}-${ytarr[2]},"/>
													<c:set var="dohide" value="${dohide}${a2}"/>
												</c:if>
											</c:forEach>
										</c:if>
										<c:if test="${ytarr[0] == 'h' && ytarr[1] == hCount && ytarr[2] == lCount}">
											<c:set var="dost" value="colspan='${ytarr[3]}'"/>
											<c:forEach begin="1" end="${ytarr[3]}" varStatus="t" >
												<c:if test="${ytarr[3] != t.count}">
													<c:set var="a1" value="${lCount + t.count}"/>
													<c:set var="a2" value="${hCount}-${a1},"/>
													<c:set var="dohide" value="${dohide}${a2}"/>
												</c:if>
											</c:forEach>
										</c:if>
									</c:forEach>
									<c:set var="ste" value=""/>
									<c:forEach var="dh" items="${fn:split(dohide, ',')}">
										<c:if test="${dh != ''}">
											<c:set var="dharr" value="${fn:split(dh, '-')}"/>
											<c:if test="${dharr[0] == hCount && dharr[1] == lCount}">
												<c:set var="ste" value="display:none;"/>
											</c:if>
										</c:if>
									</c:forEach>
									<c:if test="${ste == ''}">
										<th ${dosp} ${dost}>${ya}</th>
									</c:if>
									<c:set var="lCount" value="${lCount+1}"/>
								</c:forEach>
							</tr>
							</thead>
							<tbody>
						</c:if>
						<c:if test="${hCount > 1}">
							<tr>
								<c:set var="lCount" value="${1}"/>
								<c:set var="_sty" value=""/>
								<c:forEach var="ya" items="${fn:split(yao, ',')}">
									<c:set var="dosp" value=""/>
									<c:set var="dost" value=""/>
									<c:forEach var="yt" items="${fn:split(zhtype, ',')}">
										<c:set var="ytarr" value="${fn:split(yt, '-')}"/>
										<c:if test="${ytarr[0] == 'z' && ytarr[1] == hCount && ytarr[2] == lCount}">
											<c:set var="dosp" value="rowspan='${ytarr[3]}'"/>
											<c:forEach begin="1" end="${ytarr[3]}" varStatus="t" >
												<c:if test="${ytarr[3] != t.count}">
													<c:set var="a1" value="${hCount + t.count}"/>
													<c:set var="a2" value="${a1}-${ytarr[2]},"/>
													<c:set var="dohide" value="${dohide}${a2}"/>
												</c:if>
											</c:forEach>
										</c:if>
										<c:if test="${ytarr[0] == 'h' && ytarr[1] == hCount && ytarr[2] == lCount}">
											<c:set var="dost" value="colspan='${ytarr[3]}'"/>
											<c:forEach begin="1" end="${ytarr[3]}" varStatus="t" >
												<c:if test="${ytarr[3] != t.count}">
													<c:set var="a1" value="${lCount + t.count}"/>
													<c:set var="a2" value="${hCount}-${a1},"/>
													<c:set var="dohide" value="${dohide}${a2}"/>
												</c:if>
											</c:forEach>
										</c:if>
									</c:forEach>
									<c:set var="ste" value=""/>
									<c:forEach var="dh" items="${fn:split(dohide, ',')}">
										<c:if test="${dh != ''}">
											<c:set var="dharr" value="${fn:split(dh, '-')}"/>
											<c:if test="${dharr[0] == hCount && dharr[1] == lCount}">
												<c:set var="ste" value="display:none;"/>
											</c:if>
										</c:if>
									</c:forEach>
									<c:if test="${ste == ''}">
										<c:set var="_cla" value=""/>
										<c:if test="${lCount == 1}">
											<c:set var="_cla" value="class='key light-yellow'"/>
										</c:if>
										<c:if test="${fn:contains(productVo.product_code, 'GZZRX')&&lCount == 3}">
											<c:set var="_sty" value="style='width: 80px;'"/>
										</c:if>
										<c:if test="${!fn:contains(productVo.product_code, 'GZZRX')&&lCount == 1}">
											<c:set var="_sty" value="style='width: 56%;'"/>
										</c:if>
										<td ${dosp} ${dost} ${_cla} ${_sty}>${ya}</td>
									</c:if>
									<c:set var="lCount" value="${lCount+1}"/>
								</c:forEach>
							</tr>
						</c:if>
						<c:set var="hCount" value="${hCount+1}"/>
					</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div class="wrap">
		<img src="<c:url value='/resources/images/tx_bj/6-6.png' />" alt="">
		<img src="<c:url value='/resources/images/tx_bj/7-7.png' />" alt="">
	</div>
	<div class="footer">
		<p>百川信（厦门）网络信息服务有限公司</p>
		<ul>
			<li><img src="<c:url value='/resources/images/tx_bj/phone.png' />" alt="">电话：400-6629-696</li>
			<li><img src="<c:url value='/resources/images/tx_bj/email.png' />" alt="">邮箱：service@bcxin.com</li>
			<li><img src="<c:url value='/resources/images/tx_bj/address.png' />" alt="">地址：厦门市集美区软件园三期A区01栋16层</li>
		</ul>
	</div>
</div>
<div style="height: 49px"></div>
<div class="next-step" style="height: 50px;display: none;">
	<a class="ert down" href="javascript:void(0);" style="width: 100%;line-height: 50px" download="downImg">复制方案地址</a>
</div>
</body>
<script>
	$(function(){
	    setTimeout(function(){
            //创建一个新的canvas
            var canvas2 = document.createElement("canvas");
            var _canvas = document.querySelector('div');
            var w = parseInt(window.getComputedStyle(_canvas).width);
            var h = parseInt(window.getComputedStyle(_canvas).height);
            //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
            canvas2.width = w * 2;
            canvas2.height = h * 2;
            canvas2.style.width = w + "px";
            canvas2.style.height = h + "px";
            //可以按照自己的需求，对context的参数修改,translate指的是偏移量
            //  var context = canvas.getContext("2d");
            //  context.translate(0,0);
            var context = canvas2.getContext("2d");
            context.scale(2, 2);
            html2canvas(document.querySelector('div'), { canvas: canvas2,backgroundColor: '#fff2e5' }).then(function(canvas) {
                //document.body.appendChild(canvas);
                //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
                var doBase = canvas.toDataURL('image/jpeg',0.9);
                g_ajax("/dwz/uploadfy",{name:'jpeg',base64:doBase},function(json){
                    if (json.success) {
                        $('.next-step').show();
                        var _url = '${ptTop}'+json.msg;
                        var clipboard = new Clipboard('.down', {
                            text: function() {
                                return _url;
                            }
                        });
                        clipboard.on('success', function(e) {
                            layer.open({content:'已成功复制到剪切板',btn: '我知道了'})
                        });
                        clipboard.on('error', function(e) {
                            layer.open({content:'链接复制失败,请手动复制：'+_url,btn: '我知道了'})
                        });
                    } else {
                        layer.open({content:json.msg,btn: '我知道了'})
                    }
                },true);

            });
		},3000);
	});

</script>
</html>