<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<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 rel="stylesheet" type="text/css" href="${ctx }/styles/common/loadview.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/styles/userset/ucompletedata.css" />
<script type="text/javascript" src="${ctx }/scripts/common/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>   
<script type="text/javascript">
	$(function(){
		//alert(location.href);
		$(window).resize(infinite);
		function infinite() {
			var htmlWidth = $('html').width();
			if (htmlWidth >= 320) {
				$("html").css({
					"font-size" : "12px"
				});
			} else {
				$("html").css({
					"font-size" :  12 / 320 * htmlWidth + "px"
				});
			}
		}infinite();
		//初始化院系
		initvirtualArch();
		
		$("input:radio").change(function(){
			//获取选中项的value属性
            var chkRadio = $('input:radio[name="userType"]:checked').val();
			if(chkRadio=="2"){
				$(".studentID").html("教师号:");
				$(".studentIDInput").attr({"placeholder": "请填写您的教师号"});
			}
			else{
				$(".studentID").html("学生号:");
				$(".studentIDInput").attr({"placeholder": "请填写您的学生号"});
			}
		});
		
		if($("#dealFlag").val()=="true"){
			alert("资料保存成功");
		}
	});
	
	wx.config({
	    debug: false, 
	    appId: '${appId}', 
	    timestamp: ${timestamp},
	    nonceStr: '${noncestr}', 
	    signature: '${signature}',
	    jsApiList: [
			'chooseImage',
			'previewImage',
			'uploadImage',
			'downloadImage',
			'hideOptionMenu'
		] 
	});
	
	wx.ready(function () {
		var ctx=$("#contextPath").val();
		//隐藏右上角菜单
		wx.hideOptionMenu();
		
		var images = {
		    localId: [],
		    serverId: []
		};
		
		//选择图片
		document.querySelector('#chooseimg01').onclick = function () {
		    wx.chooseImage({
		    	success: function (res) {
		    		var localLength = res.localIds.length;
					if(localLength > 1) {
						alert("请选择一张图片");
					}
					if(localLength == 1) {
						$("#localId01").val(res.localIds[0]);
						$("#chooseimg01").attr("src",res.localIds[0]);
						$("#delete01").show();
					}
		     	 }
		    });
		};
		document.querySelector('#chooseimg02').onclick = function () {
		    wx.chooseImage({
		    	success: function (res) {
		    		var localLength = res.localIds.length;
					if(localLength > 1) {
						alert("请选择一张图片");
					}
					if(localLength == 1) {
						$("#localId02").val(res.localIds[0]);
						$("#chooseimg02").attr("src",res.localIds[0]);
						$("#delete02").show();
					}
		     	 }
		    });
		};
		
		document.querySelector('#chooseimg03').onclick = function () {
		    wx.chooseImage({
		    	success: function (res) {
		    		var localLength = res.localIds.length;
					if(localLength > 1) {
						alert("请选择一张图片");
					}
					if(localLength == 1) {
						$("#localId03").val(res.localIds[0]);
						$("#chooseimg03").attr("src",res.localIds[0]);
						$("#delete03").show();
					}
		     	 }
		    });
		};
		
		//移除图片
		$("#delete01").click(function(){
			$("#localId01").val("");
			$("#chooseimg01").attr("src",ctx+"/images/userset/Adds.png");
			$("#delete01").hide();
		});
		$("#delete02").click(function(){
			$("#localId02").val("");
			$("#chooseimg02").attr("src",ctx+"/images/userset/Adds.png");
			$("#delete02").hide();
		});
		$("#delete03").click(function(){
			$("#localId03").val("");
			$("#chooseimg03").attr("src",ctx+"/images/userset/Adds.png");
			$("#delete03").hide();
		});
		
		//提交
		$(".submitBtn").click(function(){
			$("#tcc").show();
			var userName=$("#userName").val();
			if($.trim(userName)==""){
				$("#tcc").hide();
				alert("请输入您的姓名");
				$("#userName").focus();
				return;
			}
			images.localId=[];
			images.serverId = [];
			if($("#localId01").val()!=""){
				images.localId.push($("#localId01").val());
			}
			if($("#localId02").val()!=""){
				images.localId.push($("#localId02").val());
			}
			if($("#localId03").val()!=""){
				images.localId.push($("#localId03").val());
			}
			var i = 0, length = images.localId.length;
			if(length==0){
				$("#form1").submit();
				return;
			}
		    function upload() {
		      wx.uploadImage({
		        localId: images.localId[i],
		        success: function (res) {
		          i++;
		          //alert('已上传：' + i + '/' + length);
		          images.serverId.push(res.serverId);
		          if (i < length) {
		            upload();
		          }
		          else{
		        	  var imgServerIds="";
		        	  $.each(images.serverId,function(index,serverid){
		        		  imgServerIds+=serverid+";";
		        	  });
		        	  $("#imgServerIds").val(imgServerIds);
		        	  $("#form1").submit();
		          }
		        },
		        fail: function (res) {
		          alert(JSON.stringify(res));
		        }
		      });
		    }
		    upload();
		});
		
	});
	
	wx.error(function (res) {
		 alert(JSON.stringify(res));
	});
	
	function initvirtualArch(){
		var organizationId=$("#organizationId").val();
		if(organizationId!=null&&""!=organizationId){
			var contextPath=$("#contextPath").val();
			$.ajax({
    	    	url: contextPath+"/wechat/appUser/getVirtualArchitectureList",
    	    	data: {organizationId:organizationId,type:"1"},
    	        type: "POST",
    	        dataType: "json",
    	        success: function(data){
    	        	var virtualArchId_=$("#virtualArchId_").val();
    	        	var htmlStr="";
    	        	$.each(data,function(index,obj){
    	        		if(virtualArchId_!=""&&virtualArchId_==obj.id){
    	        			htmlStr+="<option value='"+obj.id+"' selected='selected'>"+obj.name+"</option>";
    	        		}
    	        		else{
    	        			htmlStr+="<option value='"+obj.id+"'>"+obj.name+"</option>";
    	        		}
    	        	});
    	        	$("#virtualArchId").html(htmlStr);
    	        },
    	        error: function(){
    	        	alert("请检查您的网络，通信超时.");
    	        }
    	    });	
		}
	}
</script>
</head>
<body>
	<input type="hidden" id="contextPath" value="${ctx}" />
	<input type="hidden" id="dealFlag" value="${dealFlag}" />
	<form style="width: 100%" id="form1" action="${ctx }/wechat/appUser/submitUserInfo" method="post">
		<input type="hidden" id="userId" name="userId" value="${userId}">
		<input type="hidden" name="developId" value="${developId}">
		<input type="hidden" id="imgServerIds" name="imgServerIds">
		<input type="hidden" id="virtualArchId_" value="${appUser.virtualArchId}" >
		<div class="headClass" style="">
			<div class="uploadTitle" style="">
				<label class="uploadDocuments " style="font-size:14px;">请上传个人证件（身份证／学生证）</label>
			</div>
			<div class="add_pic">
        		<input type="hidden" id="localId01">
        		<input type="hidden" id="localId02">
        		<input type="hidden" id="localId03">
		        <a href="javascript:void();">
		        	<c:choose>
		        	<c:when test="${empty appUser.imageUrl01}">
		        		<img src="${ctx}/images/userset/Adds.png" id="chooseimg01"><span class="delete" id="delete01" style="display:none;"></span>
		        	</c:when>
		        	<c:otherwise>
		        		<img src="${visitPrefix}${appUser.imageUrl01}" id="chooseimg01"><span class="delete" id="delete01" style=""></span>
		        	</c:otherwise></c:choose>
		        </a>
		        <a href="javascript:void();">
		        	<c:choose>
		        	<c:when test="${empty appUser.imageUrl02}">
		        		<img src="${ctx}/images/userset/Adds.png" id="chooseimg02"><span class="delete" id="delete02" style="display:none;"></span>
		        	</c:when>
		        	<c:otherwise>
		        		<img src="${visitPrefix}${appUser.imageUrl02}" id="chooseimg02"><span class="delete" id="delete02" style=""></span>
		        	</c:otherwise></c:choose>
		        </a>
		        <a href="javascript:void();">
		        	<c:choose>
		        	<c:when test="${empty appUser.imageUrl03}">
		        		<img src="${ctx}/images/userset/Adds.png" id="chooseimg03"><span class="delete" id="delete03" style="display:none;"></span>
		        	</c:when>
		        	<c:otherwise>
		        		<img src="${visitPrefix}${appUser.imageUrl03}" id="chooseimg03"><span class="delete" id="delete03" style=""></span>
		        	</c:otherwise></c:choose>
		        </a>
			</div>
			<div>
				<label class="passLable">上传图片（最多上传3张）</label>
			</div>
		</div>
		<div class="footClass" style="">
			<div class="occupationType" style="">
			<c:choose>
			<c:when test="${appUser.userType=='2'  }">
			<label style="line-height: 30px;font-size:14px;">
				<input name="userType" type="radio" value="1" style="margin-right: 10px"  />学生</label> 
				<label style="line-height: 30px; float: right;font-size:14px;">
				<input name="userType" type="radio" value="2" style="margin-right: 10px"  checked="checked" />老师</label>			
			</c:when>
			<c:otherwise>
			<label style="line-height: 30px;font-size:14px;">
				<input name="userType" type="radio" value="1" style="margin-right: 10px" checked="checked"  />学生</label> 
				<label style="line-height: 30px; float: right;font-size:14px;">
				<input name="userType" type="radio" value="2" style="margin-right: 10px" />老师</label>
			</c:otherwise>
			</c:choose>
			
			</div>
			<div class="schoolPlacelableClass" style="">
				<label class="schoolPlacelable" style="">所在校园:</label> <span
					id="parent" style=""> 
					<select style="width: 74%" name="organizationId" id="organizationId" onchange="initvirtualArch();">
					<c:forEach items="${organizationList }" var="obj">
						<c:choose>
							<c:when test="${ obj.id==appUser.organizationId}"><option value="${obj.id }" selected="selected">${obj.organizationName }</option></c:when>
							<c:otherwise><option value="${obj.id }">${obj.organizationName }</option></c:otherwise>
						</c:choose>
					</c:forEach>
				</select>
				</span>
			</div>
			<div class="instituteAndDepartmentClass" style="">
				<label class="instituteAndDepartment" style="">所在学院:</label> <span
					id="parent" style=""> 
				<select style="width: 74%" name="virtualArchId" id="virtualArchId">
				</select>
				</span>
			</div>
			<div style="width: 100%; height: 33px; margin-bottom: 15px;">
				<label class="nameIputLable" style="">姓名:</label> 
				<input class="nameIput" type="text" name="userName" id="userName" placeholder="请填写您的姓名" value="${appUser.userName }">
			</div>
			<c:choose>
			<c:when test="${appUser.userType=='2' }">
			<div style="width: 100%; height: 33px; margin-bottom: 20px;" id="student_div">
				<label class="studentID" style="">教师号:</label> 
				<input class="studentIDInput" type="text" name="userCardNo" placeholder="请填写您的教师号" value="${appUser.userCardNo }">
			</div>
			</c:when>
			<c:otherwise>
			<div style="width: 100%; height: 33px; margin-bottom: 20px;" id="student_div">
				<label class="studentID" style="">学生号:</label> 
				<input class="studentIDInput" type="text" name="userCardNo" placeholder="请填写您的学生号" value="${appUser.userCardNo }">
			</div>
			</c:otherwise>
			</c:choose>
			
			<input type="button" class="submitBtn" value="提交" />
		</div>
	</form>
	
	<!-- 加载层 -->
    <div id="tcc" class="tcbj1" style="display:none;">
        <div class="tcck1">
            <div class="load-container load4">
            <div class="loader">Loading...</div>
            </div>
        </div>
    </div>
</body>
</html>