<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>员工信息管理</title>
<meta
	content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
	name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="<c:url value='/styles/lib/bootstrap.min.css'/>"
	rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="<c:url value='/styles/lib/font-awesome.min.css'/>"
	rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href='<c:url value='/styles/lib/ionicons.min.css' />'
	rel="stylesheet" type="text/css" />
<!-- DATA TABLES -->
<link
	href="<c:url value='/styles/lib/datatables/dataTables.bootstrap.css' />"
	rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="<c:url value='/styles/AdminLTE.css'/>" rel="stylesheet" type="text/css" />
<link href="<c:url value='/scripts/zTree/css/zTreeStyle/zTreeStyle.css'/>" rel="stylesheet" 
	type="text/css" />
<script type="text/javascript" src="<c:url value='/scripts/jquery/jquery-1.9.1.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/My97DatePicker/WdatePicker.js'/>" ></script>
<script type="text/javascript" src="<c:url value='/scripts/visitor/exif.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/mobileBUGFix.mini.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/admin/LocalResizeIMG.js'/>"></script>
<style>
	.row{height:auto;overflow: hidden;}.box .box-header{padding-bottom: 0px;}
	.organ-input{
		padding: 0 5px;
		margin-left: 0!important;
	}
	.form-group{
		position: relative;
	}
	.organ-list{
		
		position: absolute;
		top: 71px;
		left: 5px;
		z-index: 1;
		display: none;
		border: 1px solid #d0d0d0;
    	
    	background: #fff; 
    	
      
    	width: -moz-calc(100% - 10px);
        width: -webkit-calc(100% - 10px);
      width: calc(100% - 10px);
	}
	.organ-list .organ-item{
		padding: 0 5px;
		height: 30px;
    	line-height: 30px;
    	background: #fff;
    	
	}
	.organ-list .organ-item:hover{
		background: #f1f1f1;
	}
</style>

<script type="text/javascript">
var imageId=new Array();
var removeId=new Array();
var addimgUrl=new Array();
$(function(){
	/* if($("#id").val()!=null && $("#id").val()!=""){
		$("#organizationId").attr("disabled",true);
		$("#virtualArchId").attr("disabled",true);
	}else{
		$("#organizationId").attr("disabled",false);
		$("#virtualArchId").attr("disabled",false);
	} */
	
	init();
	$(".organ-input").on("click",function(ev){
		 var str = $(this).val();
        ev.stopPropagation();
        var str = $(this).val();
		$(".organ-item").each(function(index,ele){
			var id = $(ele).data("id");
			var name = $(ele).data("name");
			if(name.indexOf(str) != -1 ){
				$(ele).show();
			}else{
				$(ele).hide();
			}
		});
		$(".organ-list").show();
		//str.indexOf("3") != -1 	
	});
	$(".organ-item").on("click",function(){
		var id = $(this).data("id");
		var name = $(this).data("name");
		$(".organ-input").val(name);
		$(".organ-input").data("id",id);
		$(".organ-input").data("name",name);
		$(".organ-list").hide();
		selectOrganization(id);
	});
	$(".organ-input").keyup(function(){
		var str = $(this).val();
		if(!str){
			$(this).data("id","");
			return false;
		}
		$(".organ-item").each(function(index,ele){
			var id = $(ele).data("id");
			var name = $(ele).data("name");
			if(name.indexOf(str) != -1 ){
				$(ele).show();
			}else{
				$(ele).hide();
			}
		});
		
		$(".organ-list").show();
	})
	//$("div.content *").not(".keep")
	$("body").not(".organ-wp").on("click",function(ev){
		$(".organ-list").hide();
	});
	$("#btn-save").click(function(){
		var imageUrlids="";
		var removeUrlids="";
		var addimgUrls="";
		for(var i=0;i<imageId.length;i++){
			imageUrlids+=imageId[i]+",";
		}
		for(var i=0;i<removeId.length;i++){
			removeUrlids+=removeId[i]+",";
		}
		for(var i=0;i<addimgUrl.length;i++){
			addimgUrls+=addimgUrl[i]+",";
		}
		if(imageUrlids!=""){
		$("#imageUrlids").val(imageUrlids);
		}
		if(removeUrlids!=""){
		$("#removeUrlids").val(removeUrlids);
		}
		if(addimgUrls!=""){
		$("#addimgUrls").val(addimgUrls);
		};
		
		if(!$(".organ-input").val() ){
			alert("请选择校区！");
			return; 
		}else if(!$(".organ-input").data("id")){
			alert("请选择校区！");
			return; 
		}
		if($("#virtualArchId").val()==""){
			alert("请选择公司！");
			return; 
		}
		$("#organizationIds").val($(".organ-input").data("id"));
		$("#virtualArchIds").val($("#virtualArchId").val());
		$("#conditionform").submit();
	});
})

//初始化图片ID
function init(){
	for(var i=1;i<=3;i++){
		if($("#imageId"+i).val()!=""){
			imageId[i-1]=$("#imageId"+i).val();
		}
	}
}

function upload(val){
	if($("#virtualArchId").val()==""){
		alert("请选择公司！");
		return; 
	}
	$("#fileUpload"+val+"").click();
	$("#fileUpload"+val+"").localResizeIMG({
	      width: 400,
	      quality: 0.8,
	      success: function (result) {
		    	  $.ajax({
		    			url:$("#contextPath").val()+"/member/validateImage",
		    			type:"POST",
		    			dataType:"json",
		    			data:{imageUrl:result.clearBase64,virtualArchId:$("#virtualArchId").val()},
		    			timeout:30000,
		    			beforeSend: function( xhr ) {
		    			
		    			  },
		    			success : function(data) {
		    				if(data.flag){
		    					$("#images"+val+"").attr('src',result.base64);
		    					if(addimgUrl.indexOf(data.imageUrl)==-1){
		    						addimgUrl.push(data.imageUrl);
		    					}
		    					$("#images"+val+"").show();
		    					$("#image"+val+"").hide();
		    					$("#del"+val+"").show();
		    					$("#imageUrl"+val+"").val(data.imageUrl);
		    				}else{
		    					alert(data.desc);
		    					$("#images"+val+"").hide();
		    					$("#image"+val+"").show();
		    					$("#del"+val+"").hide();
		    					$("#imageUrl"+val+"").val("");
		    				}
		    			
		    			}, error : function(xhr,textStatus){
	
		    		    }
		      });
	    }
	 });
}

function delImage(val){
	if(imageId.length>0 && imageIdVal!=""){
		var imageIdVal=$("#imageId"+val).val();
			if(imageId.indexOf(imageIdVal)>-1){
				imageId.splice(imageId.indexOf(imageIdVal),1);
				removeId.push(imageIdVal);
			}
	}
	var imageUrl=$("#imageUrl"+val+"").val();
	if(addimgUrl.length>0 && imageUrl!=""){
		addimgUrl.splice(addimgUrl.indexOf(imageUrl),1);
	}
	$("#del"+val+"").hide();
	$("#images"+val+"").hide();
	$("#image"+val+"").show();
	$("#imageUrl"+val+"").val("");
}

function selectOrganization(val){
	$.ajax({
		url:$("#contextPath").val()+"/busi/property/getvirtualArchTypeOne",
		type:"POST",
		dataType:"json",
		data:{organizationId:val},
		success : function(data) {
			var html="<option value='' selected='selected'>请选择公司</option>";
			for(var i=0;i<data.length;i++){
				html+="<option value="+data[i].id+" >"+data[i].name+"</option>";
			}
			$("#virtualArchId").html(html);
			$("#departmentId").html("<option value='' selected='selected'>请选择部门</option>");
		}
			
	});
}

function selectVirtualArch(val){
	$.ajax({
		url:$("#contextPath").val()+"/busi/property/getvirtualArchList",
		type:"POST",
		dataType:"json",
		data:{virtualArchId:val},
		success : function(data) {
			var html="<option value='' selected='selected'>请选择部门</option>";
			for(var i=0;i<data.length;i++){
				html+="<option value="+data[i].id+" >"+data[i].name+"</option>";
			}
			$("#departmentId").html(html);
		}
			
	});
}




</script>
</head>
<body>
	<c:if test="${code=='success' }">
		<script>alert("${errormsg}");window.close();</script>
	</c:if>
	<input type="hidden" value="${ctx}" id="contextPath">
	<div class="col-md-6" style="float:left;width:100%;">
		<div class="box box-warning">
			<div class="box-header" style="width:90%;">
				<h3 class="box-title">员工信息管理编辑 &nbsp;&nbsp; <strong font-color="red">${errormsg}</strong></h3>
			</div>
			<div class="box-body">
			<form:form action="${ctx}/member/form" modelAttribute="appUser" method="post" id="conditionform" >
				<input type="hidden" name="saveType" value="save"/>
				<input type="hidden" name="imageUrlids" id="imageUrlids" value="${imageUrlids }"/>
				<input type="hidden" name="removeUrlids" id="removeUrlids" value="${removeUrlids }"/>
				<input type="hidden" name="addimgUrls" id="addimgUrls" value="${addimgUrls}"/>
				<input type="hidden" name="oldUserMobile" value="${appUser.userMobile}"/>
				<form:hidden path="imageUrl01" name="imageUrl01"/>
				<form:hidden path="imageUrl02" name="imageUrl02"/>
				<form:hidden path="imageUrl03" name="imageUrl03"/>
				<form:hidden path="id" name="id"/>
				<form:hidden path="facePlusUserId" name="facePlusUserId"/>
				<form:hidden path="createTime" name="createTime"/>
				<form:hidden path="status" name="status"/>
				<input type="hidden" name="organizationId" id="organizationIds" value="${appUser.organizationId }"/>
				<input type="hidden" name="virtualArchId" id="virtualArchIds" value="${appUser.virtualArchId}"/>
				<div class="form-group organ-wp">
					<label><span style="color: red">*</span>所属校区</label>
					<c:choose>
						<c:when test="${appUser.status=='1' }">
						<input class="form-control organ-input" id="organizationId" placeholder="请输入校区名字" data-id="${appUser.organizationId }" data-name="${organizationName }" value="${organizationName }" disabled="disabled"/>
							<%-- <select class="form-control"  id="organizationId" onchange="selectOrganization(this.value)" disabled="disabled" >
								<option value="" selected="selected">请选择校区</option>
								<c:forEach items="${organizationList}" var="obj">
								<c:choose>
									<c:when test="${obj.id==appUser.organizationId }">
										<option value="${obj.id }" selected="selected">${obj.name}</option>
									</c:when>
									<c:otherwise>
										<option value="${obj.id }" >${obj.name}</option>
									</c:otherwise>
								</c:choose>
								</c:forEach>
							</select> --%>
						</c:when>
						<c:otherwise>
							<input class="form-control organ-input" id="organizationId" placeholder="请输入校区名字" data-id="${appUser.organizationId }" data-name="${organizationName }" value="${organizationName }" />
							
							<div class="organ-list" >
								<c:forEach items="${organizationList}" var="obj">
									<div class="organ-item" data-id="${obj.id}" data-name="${obj.name}">${obj.name}</div>
								</c:forEach>	
							</div>
							<%-- <select class="form-control"  id="organizationId" onchange="selectOrganization(this.value)" >
								<option value="" selected="selected">请选择校区</option>
								<c:forEach items="${organizationList}" var="obj">
								<c:choose>
									<c:when test="${obj.id==appUser.organizationId }">
										<option value="${obj.id }" selected="selected">${obj.name}</option>
									</c:when>
									<c:otherwise>
										<option value="${obj.id }" >${obj.name}</option>
									</c:otherwise>
								</c:choose>
								</c:forEach>
							</select> --%>
						</c:otherwise>
					</c:choose>
				</div>
				<div class="form-group">
					<label><span style="color: red">*</span>所属公司</label>
					<c:choose>
						<c:when test="${appUser.status=='1' }">
							<select class="form-control"  id="virtualArchId" onchange="selectVirtualArch(this.value)" disabled="disabled">
								<c:if test="${empty virtualList}">
								<option value='' selected='selected'>请选择公司</option>
								</c:if>
								<c:forEach items="${virtualList }" var="model">
									<c:choose>
										<c:when test="${model.id==appUser.virtualArchId }">
											<option value="${model.id }" selected="selected">${model.name}</option>
										</c:when>
										<c:otherwise>
											<option value="${model.id }" >${model.name}</option>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</select>
						</c:when>
						<c:otherwise>
							<select class="form-control"  id="virtualArchId" onchange="selectVirtualArch(this.value)" >
								<c:if test="${empty virtualList}">
								<option value='' selected='selected'>请选择公司</option>
								</c:if>
								<c:forEach items="${virtualList }" var="model">
									<c:choose>
										<c:when test="${model.id==appUser.virtualArchId }">
											<option value="${model.id }" selected="selected">${model.name}</option>
										</c:when>
										<c:otherwise>
											<option value="${model.id }" >${model.name}</option>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</select>
						</c:otherwise>
					</c:choose>
				</div>
				<div class="form-group">
					<label><span style="color: red"></span>所属部门</label>
					<select class="form-control" name="departmentId" id="departmentId">
							<c:if test="${empty dempentList}">
								<option value='' selected='selected'>请选择部门</option>
							</c:if>
							<c:forEach items="${dempentList }" var="model">
							<c:choose>
								<c:when test="${model.id==appUser.departmentId }">
									<option value="${model.id }" selected="selected">${model.name}</option>
								</c:when>
								<c:otherwise>
									<option value="${model.id }" >${model.name}</option>
								</c:otherwise>
							</c:choose>
						</c:forEach>
					</select>
				</div>
				<div class="form-group">
					<label><span style="color: red">*</span>识别图片</label>
					<div class="form-group">
						<c:forEach items="${list }" var="model" varStatus="val">
							<c:if test="${empty model.imageUrl }">
							<img alt="" src="${ctx}/images/visitor/circle.png" style="height:20px;width: 20px;display: none;" id="del${val.index+1 }" onclick="delImage(${val.index+1})">
							<img alt="" src="" style="margin-left: 40px;height:65px;width: 65px;display: none;" id="images${val.index+1 }">
							<input type="file" id="fileUpload${val.index+1}" style="width: 65px;display: none;"/>
							<input type="text" onclick="upload(${val.index+1})" id="image${val.index+1 }"
							style="margin-left: 40px;height:65px;width: 65px;background-image: url('${ctx}/images/visitor/user.png');" readonly="readonly"/>
							<input type="hidden" name="imageUrl${val.index+1}" id="imageUrl${val.index+1}"/>
							<input type="hidden" name="imageId${val.index+1}" id="imageId${val.index+1}" value=""/>
							</c:if>
							<c:if test="${not empty model.imageUrl }">
							<img alt="" src="${ctx}/images/visitor/circle.png" style="height:20px;width: 20px;" id="del${val.index+1 }" onclick="delImage(${val.index+1})">
							<img alt="" src="${imageServer}${model.imageUrl}" style="margin-left: 40px;height:65px;width: 65px;" id="images${val.index+1 }">
							<input type="file" id="fileUpload${val.index+1}" style="width: 65px;display: none;"/>
							<input type="text" onclick="upload(${val.index+1})" id="image${val.index+1 }"
							style="margin-left: 40px;height:65px;width: 65px;display: none;background-image: url('${ctx}/images/visitor/user.png');" readonly="readonly"/>
							<input type="hidden" name="imageUrl${val.index+1}" id="imageUrl${val.index+1}" value="${model.imageUrl }"/>
							<input type="hidden" name="imageId${val.index+1}" id="imageId${val.index+1}" value="${model.imageId }"/>
							</c:if>
						</c:forEach>
					
					</div>	
					
				</div>
				<div class="form-group">
					<label><span style="color: red"></span>职员代码</label>
					<form:input path="userNumber" id="userNumber" cssClass="form-control" />
				</div>
				<div class="form-group">
					<label><span style="color: red">*</span>用户名称</label>
					<form:input path="userName" id="userName" cssClass="form-control" />
				</div>
				<div class="form-group">
					<label><span style="color: red">*</span>电话号码</label>
					<form:input path="userMobile" id="userMobile" cssClass="form-control" />
				</div>
				<div class="form-group">
					<label><span style="color: red"></span>岗位名称</label>
					<form:input path="positionName" id="positionName" cssClass="form-control" />
				</div>
				<div class="form-group">
					<label><span style="color: red"></span>用户身份</label>
					<form:select path="roleType" cssClass="form-control" items="${personRoleGroup}" itemLabel="itemname" itemValue="itemcode" ></form:select>
				</div>
				<div class="form-group" align="center">
						<a class="btn btn-primary" href="javascript:viod();" id="btn-save">保存</a>
						<a class="btn btn-default" href="javascript:window.close();">取消</a>
				</div>
			</form:form>
			</div>
		</div>
	</div>
</body>
</html>