<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">
	<title>通行二维码</title>
	<link rel="stylesheet" type="text/css" href="${ctx }/styles/common/reset.css" />
	<link href="${ctx }/scripts/lib/layui/layui.css" rel="stylesheet" type="text/css" />
	<style>
	    html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}
	article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;-webkit-tap-highlight-color:rgba(0,0,0,0)}
	audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
	table{border-collapse:collapse;border-spacing:0}th{text-align:inherit}
	fieldset,img{border:0}
	img,input{vertical-align:middle}
	iframe{display:block}
	abbr,acronym{border:0;font-variant:normal}
	del{text-decoration:line-through}
	address,caption,cite,code,dfn,em,th,var,i,b{font-style:normal;font-weight:normal;}
	ol,ul,li{list-style:none}
	h1,h2,h3,h4,h5,h6,b{font-size:100%;font-weight:400}
	q:before,q:after{content:''}
	a{color:#666;-webkit-tap-highlight-color:rgba(0,0,0,0)}
	a:visited,a:hover{color:#666;text-decoration:none}
	ins,a{text-decoration:none}
	body{min-height:100%;-webkit-overflow-scrolling:touch}
	input,select,textarea{font-size:100%}
	input[type="radio"],input[type="checkbox"],input[type="submit"],input[type="rest"],input[type="button"],button,select{cursor:pointer}
	input[type="text"],input[type="number"],input[type="tel"],input[type="password"],input[type="submit"],input[type="rest"],input[type="button"],button,textarea{-webkit-border-radius:0;-webkit-appearance:none;-moz-appearance:none}
	*:not(input,textarea){-webkit-user-select: none;-ms-touch-select:none;-ms-touch-action: none;}
	*,:after,:before {-webkit-box-sizing: border-box;box-sizing: border-box;}
	/**/
	.cover{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #007BFF;
		z-index: 2;
		padding: 0.40rem 0.18rem 0 0.18rem
	}
	.cover_content{
		text-align: center;
		background-color: #fff;
		border-radius: 5px;
		padding-bottom: 0.30rem;
	}
	.cover span{
		display: block;
		margin: 0 auto;
		font-size: 16px;
		color: #666666;
		z-index: 3;
		text-align: center;
	}
	#code {
		display: inline-block;
		width: 2.25rem;
		height: 2.25rem;
		text-align: center;
		position: relative;
	}
	.qrcode_tip{
		font-size: 0.18rem;
		padding-top: 0.40rem;
		padding-bottom: 0.20rem;
		text-align: center;
	}
	#code canvas{
		width: 100%;
		height: 100%
	}
	.icon{
		width: 0.40rem;
		height: 0.40rem;
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);

	}
	.refresh_wrap{
		margin-top: 0.2rem;
	}
	.refresh{
		text-align: center;
		color: #007BFF;
		font-size: 0.15rem;
		height: 0.18rem;
		line-height: 0.18rem;
		padding-left: 0.25rem;
		position: relative;
		display: inline-block;
	}
	.refresh img{
		width: 0.20rem;
		height: 0.18rem;
		position: absolute;
		top: 0;
		left: 0
	}
	.noData{
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    z-index: 2;
	    text-align: center;
	}
	.nodata img{
		margin-top: 0.80rem;
		width: 3.20rem;
	}
	.tip{
		color: #666666;
		font-size: 0.18rem;
	}
	.error{
		text-align: left;
		padding: 0 0.62rem;
		margin-top: 0.41rem;
	}
	.p1{
		color: #666666;
		font-size: 0.15rem;
	}
	.pp{
		color: #2A2A2A;
		font-size: 0.13rem;
	}
	.hide{
		display: none
	}
	/**/
	@media screen and (min-width: 0px){html{font-size: 85.333px;}}
	@media screen and (min-width: 320px){html{font-size: 85.333px;}}
	@media screen and (min-width: 360px){html{font-size: 100px;}} 
	@media screen and (min-width: 374px){html{font-size: 100px;}}
	@media screen and (min-width: 400px){html{font-size: 106.667px;}}
	@media screen and (min-width: 413px){html{font-size: 110.4px;}}
	@media screen and (min-width: 426px){html{font-size: 113.6px;}}
	@media screen and (min-width: 450px){html{font-size: 120px;}}
	@media screen and (min-width: 480px){html{font-size: 128px;}}
	@media screen and (min-width: 540px){html{font-size: 144px;}}
	@media screen and (min-width: 590px){html{font-size: 157.33px;}}
	@media screen and (min-width: 600px){html{font-size: 160px;}}
	@media screen and (min-width: 640px){html{font-size: 170.667px;}}
	</style>

</head>

<body style="background: #fff">
	<input type="hidden" value="${ctx}" id="contextPath" />
	<input id="userId" type="hidden" value="${userId}">
	<div class="cover hide">
		<div class="cover_content">
			<p class="qrcode_tip">楼宇通行二维码</p>
			<div id="code"></div> 
			<div class="refresh_wrap">
				<p class="refresh"><img src="${ctx}/images/reload.png" alt="">手动刷新</p>
			</div>
		</div>
	</div>
	<div class="nodata hide">
		<img src="${ctx}/images/qrcode_nodata.png" alt="">
		<p class="tip">抱歉，暂时无法生成通行二维码</p>
		<div class="error">
			<p class="p1">可能是由以下原因导致：</p>
			<p class="pp">1、还未登录服务之窗；</p>
			<p class="pp">2、登录账号无通行权限；</p>
			<p class="pp">3、所选项目无账号和通行权限；</p>
		</div>
	</div>
</body>
	<script type="text/javascript" src="${ctx }/scripts/lib/template-native.js"></script>
	<script type="text/javascript" src="${ctx }/scripts/common/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="${ctx }/scripts/lib/plugins/qrcode/jquery.qrcode.min.js"></script>
	<script type="text/javascript" src="${ctx }/plugin/layer/mobile/layer.js?v=4.0"></script>
	<script>
		$(function () {
			var userId = $('#userId').val()
			init()
			function init(){
				if(!userId){
					$('.cover').hide()
					$('#code').empty();
					$('.nodata').show()
					return
				}
				// 设置定时器
				if (typeof(cutDown) != "undefined") {
	                clearTimeout(cutDown);
	            }
	        	cutDown = setInterval(function(){
	        		getQrcode()
	        	}, 3600000);
	        	getQrcode()
	        	// 刷新事件
	        	$(".refresh").on("click", function () {
					// 设置定时器
					event.stopPropagation();
					if (typeof(cutDown) != "undefined") {
	                    clearTimeout(cutDown);
	                }
	            	cutDown = setInterval(function(){
	            		getQrcode()
	            	}, 3600000);
	            	getQrcode()
				})

				//关闭分享
				  if (typeof WeixinJSBridge == "undefined") {
				      if (document.addEventListener) {
				          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
				      } else if (document.attachEvent) {
				          document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
				          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
				      }
				  } else {
				      onBridgeReady();
				  }
			}
			function onBridgeReady() {
		      WeixinJSBridge.call('hideOptionMenu');
		  	}
			function getQrcode(){
				var res;
				$.ajax({
					type: "get",
					url: $("#contextPath").val() + '/wechat/lingling/createQrCode',
					async: false,
					data: {
						'userId':userId
					},
					//dataType: "jsonp",
					//jsonp: "callback",
					//jsonpCallback: "success_jsonpCallback",
					xhrFields: {
						withCredentials: true
					},
					crossDomain: true,
					complete: function(data) {
						res = data.responseJSON;
					},
				});
				if(res && res.code == 200){
					var data = res.data
					if(data){
						$('.nodata').hide()
						$('.cover').show()
						$('#code').empty();
						$('#code').qrcode(data)
						$('#code').append('<img class="icon" src="${ctx}/images/lyzc.png" alt="" />')
					}else{
						$('.cover').hide()
						$('#code').empty();
						$('.nodata').show()
					}
				}else{
					$('.cover').hide()
					$('#code').empty();
					$('.nodata').show()
				}
			}

		})
		
	</script>

</html>
