<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="author" content="" />
<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 ">
<meta name="robots" content="" />
<title>访客预约</title>
<script type="text/javascript" src="${ctx }/scripts/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${ctx }/scripts/lib/plugins/qrcode/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="${ctx }/scripts/visitor/exif.js?v=4.0"></script>
<script type="text/javascript" src="${ctx }/scripts/mobileBUGFix.mini.js?v=4.0"></script>
<script type="text/javascript" src="${ctx }/scripts/visitor/visitorinfo.js?v=2.1213"></script>
<link rel="stylesheet" href="${ctx }/styles/visitor/visitorinfo.css?v=2.1213" type="text/css">
<link rel="stylesheet" type="text/css" href="${ctx }/styles/visitor/loadview.css" />
<link rel="stylesheet" href="${ctx }/styles/visitor/layer.css" type="text/css">
<script type="text/javascript" src="${ctx }/scripts/visitor/controlOptionMenu.js?v=4.0"></script>
<script type="text/javascript" src="${ctx }/scripts/visitor/layer.js?v=4.0"></script>
</head>
<input type="hidden" id="ctx" value="${ctx }" />
<input type="hidden" id="imageServer" value="${imageServer }" />

<body>
<input type="hidden" id="ctx" value="${ctx }" />
 <form:form action="${ctx }/wechat/visitor/updateVisitorInfo" method="post" id="updateuserform" style="width: 100%" class="clearfix">

		<input type="hidden" name="visitorId" value="${visitorInfo.visitorId }" id="visitorId"/>
		<input type="hidden" name="imageUrl" value="${visitorInfo.imageUrL }" id="imageUrl"/>
		<input  type="hidden" name="openId" value="${openId }" id="openId">
		<input  type="hidden" name="qrCode" value="${qrCode}" id="qrCode">

		<div class="bottomView">
			<div class="net">
			    
				<div class="headTime">
					<span class="netCircle"></span>
					${visitorInfo.toDate }${visitorInfo.week }&nbsp;<%-- ${visitorInfo.startTime }--%>
				</div>
				<p class="company" >${visitorInfo.visitorCompanyName }</p>
				<!-- 二维码 -->
 				<c:if test="${organization.passType eq 2}">
					<span class="peerName_pic" style="">${visitorInfo.visitorName }</span>
				</c:if>
				<p class="welcomeSty" >欢迎到访</p>

				<c:if test="${not empty visitorInfo.clientUserName}">
					<button class="details" type="button">详情&nbsp;</button>
					<div class="openOrColse" >
						<p class="openOrColsePeople" >被访人：${visitorInfo.clientUserName }&nbsp;<a href="tel:${visitorInfo.clientPhone}" style="color: #fff; text-decoration: none;">${visitorInfo.clientPhone}</a></p>
						<img class="locatioPicture" src="${ctx }/images/visitor/dit.png" >
						<label class="locatioLable" >地址：${visitorInfo.clientAddress }</label>
					</div>
				</c:if>

                <div class="floatingHead">
                	 <p class="peerNum" style="">共${visitorInfo.count}位同行</p>

					<c:choose>
					  <c:when test="${organization.passType eq 1}">
		    				<div>
		           	 		  	 <span class="peerName" style="">${visitorInfo.visitorName }</span>
		           	 	  		 <a href="tel:${visitorInfo.visitorPhone }" class="peerPhoto" style="text-decoration: none;">${visitorInfo.visitorPhone }</a>
		                   	</div> 
					  </c:when>

					  <c:when test="${organization.passType eq 2}">   
			            	 <div class="passType_pic">
			    	 		  	 <span class="peerName" style="">${visitorInfo.visitorName }:</span>
			    	 	  		 <a href="tel:${visitorInfo.visitorPhone }" class="peerPhoto" style="text-decoration: none;">${visitorInfo.visitorPhone }</a>
			            	 </div> 
					  </c:when>

					  <c:otherwise>   
					     <div>
							 <span class="peerName" style="">${visitorInfo.visitorName }</span>
							 <a href="tel:${visitorInfo.visitorPhone }" class="peerPhoto" style="text-decoration: none;">${visitorInfo.visitorPhone }</a>
						 </div>
					  </c:otherwise>

					</c:choose>

               		 <input type="hidden" id="updateImageUrl" name="updateImageUrl"/>
               		 <input type="hidden" id="updateShowImageUrl" name="updateShowImageUrl"/>
               		 <input type="hidden" id="updateImageFacePlusId" name="updateImageFacePlusId"/>
 					<!-- face++ -->
                  	 <c:if test="${organization.passType eq 1}">
	              		 <div id="showImage" style='width: 25%;height: 2rem;'>
	              		 	<c:if test="${visitorInfo.visitorAccount==1 }">
	              		 	<span class="headPortraitSpan"></span>
						 	<input  type="file" id="fileClick" class="headPortrait" pictype="30010003" data-role="none"  accept="image/*"   style="opacity: 0;" >
						 	</c:if>
						 	<c:if test="${visitorInfo.visitorAccount==0 }">
							 	<c:if test="${not empty visitorInfo.imageUrL }">
		              		 	<img src="${visitorInfo.imageUrL }" alt='' style='max-width: 4rem;width: auto;height: 4rem;position: absolute;left: 2.5rem;top: 2rem;z-index: 2;'>
		              		 	</c:if>
		              		 	<c:if test="${empty visitorInfo.imageUrL }">
		              		 	<span class="headPortraitSpanb"></span>
		              		 	</c:if>
						 	</c:if>
						 </div>
 					</c:if>

                </div>
			</div>
 			<c:choose>
			  <c:when test="${organization.passType eq 1}">   
			    <div class="clearfix">
			    	<p class="title" style="">
			    	<c:if test="${visitorInfo.visitorAccount==0 }">
			    		<c:if test="${empty visitorInfo.imageUrL }">
			    		 请使用密码进入
			    		</c:if>
			    	</c:if>
			    	<c:if test="${visitorInfo.visitorAccount==0 }">
			    		<c:if test="${not empty visitorInfo.imageUrL }">
			    		 直接刷脸进入,无需排队
			    		</c:if>
			    	</c:if>
			    	<c:if test="${visitorInfo.visitorAccount==1 }">
			    		<c:if test="${empty visitorInfo.imageUrL }">
			    		添加头像, 直接刷脸进入,无需排队
			    		</c:if>
			    	</c:if>
			    	</p>
			    	<p class="reservationCode" style="">预约码</p>
			    	<p class="reservationCodeNum" style="">${visitorInfo.visitorPassword }</p>
			    	<p class="titles" style="">通行卡兑换凭证</p>
			    	<p class="reservationCodeTime" style="">有效时间：${dateweek }&nbsp;${visitorInfo.week }&nbsp; ${visitorInfo.toDate }</p>
			    </div>
			  </c:when>

			  <c:when test="${organization.passType eq 2}">   
			    <div class="qrcode_wrap">
			    	<p class="qrcode_title">设备扫码通行</p>
			    	<div class="qrcode_img_wrap">
			    		<div id="code"></div> 
			    	</div>
			    	<p class="qrcode_tip ">${content}</p>
			    	
			    </div>
			  </c:when>
  			<c:when test="${organization.passType eq 3}">   
			    <div class="qrcode_wrap">
			    	<p class="qrcode_title">请在客服处扫码打印访客单</p>
			    	<div class="qrcode_img_wrap">
			    		<div id="code"></div> 
			    	</div>
			    	<p class="qrcode_tip ">二维码当日有效，截止当日时间23:59:59</p>
			    </div>
			  </c:when>
			</c:choose>
		</div>
		<!-- face++ -->
      	<c:if test="${organization.passType eq 1}">
			<c:if test="${visitorInfo.visitorAccount==1 }">
				<input class="confirmBtn" type="button" value="确认" id="updateVIsitorUser" />
			</c:if>
     	</c:if>
	</form:form>
	<!-- face++ -->
 	<c:if test="${organization.passType eq 1}">
		<div id="tcc" class="tcbj1" style="display:none;">
		    <div class="tcck1">
		        <div class="load-container load4">
		        <div class="loader">Loading...</div>
		        </div>
		    </div>
		</div>
			<div class="visitormask">
			<div class="visitorcon">
				<p>预约成功</p>
				<a href="javascript:$('.visitormask').hide();" title="确定">确定</a>
			</div>
		</div>
	</c:if>
</body>
<script type="text/javascript">

 $(document).ready(function () {
 	$(window).resize(infinite);
 	infinite();
 	$('#code').qrcode($('#qrCode').val())


 	$(".details").click(function(){
 		var _this = $(this);
 	  	$(".openOrColse").slideToggle("slow");
 	  	if(!_this.hasClass("detailsup")){
 	  		_this.addClass("detailsup");
 	  	} else {
 	  		_this.removeClass("detailsup");
 	  	}
 	});
 	function infinite() {
 		var htmlWidth = $('html').width();
 		if (htmlWidth >= 320) {
 			$("html").css({
 				"font-size" : "12px"
 			});
 		} else {
 			$("html").css({
 				"font-size" :  12 / 320 * htmlWidth + "px"
 			});
 		}
 	}
 });

</script>
</html>