<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>企业用户信息管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- bootstrap 3.0.2 -->
<link href="<c:url value='/styles/lib/bootstrap.min.css'/>" rel="stylesheet" type="text/css" />
<link href="<c:url value='/styles/lib/font-awesome.min.css'/>" rel="stylesheet" type="text/css" />
<link href='<c:url value='/styles/lib/ionicons.min.css' />' rel="stylesheet" type="text/css" />
<link href="<c:url value='/styles/lib/datatables/dataTables.bootstrap.css' />" rel="stylesheet" type="text/css" />
<link href="<c:url value='/styles/AdminLTE.css'/>" rel="stylesheet" type="text/css" />
<script src="${ctx }/scripts/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<c:url value='/scripts/estate/newWin.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/My97DatePicker/WdatePicker.js'/>" ></script>
<style type="text/css">
.init-dialog.in {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
}
.panel-heading {
    padding: 10px 15px;
    border-bottom-width: 1px;
}
</style>
<script type="text/javascript">
	var contextPath="";

	$(function(){
		contextPath=$("#contextPath").val();
		
		$("#status").val($("#status_").val());
		//初始化企业信息
		initVirtual($("#organizationId").val());
		
		//监控查询按钮
		$("#btn-search").click(function(){
			$("#conditionform").submit();
		});
		
		//监控项目发生改变
		/* $("#organizationId").change(function(){
			$("#organizationId").hide();
			initVirtual();
			
			
		}); */
		$("#organizationId .options").on("click",function(){
			var id = $(this).data("id");
			var name = $(this).data("name");
			$(".input-organ").val(name);
			$("#organizationId").hide();
			initVirtual(id);
		})
		$(".input-organ").on("click",function(ev){
			 var str = $(this).val();
             ev.stopPropagation();
			/* $("#organizationId .options").each(function(index,ele){
				var id = $(ele).data("id");
				var name = $(ele).data("name");
				if(name.indexOf(str) != -1 ){
					$(ele).show();
				}else{
					$(ele).hide();
				}
			})  */
			$("#organizationId").show();
			//str.indexOf("3") != -1 	
		});
		$(".input-organ").keyup(function(){
			var str = $(this).val();
			$("#organizationId .options").each(function(index,ele){
				var id = $(ele).data("id");
				var name = $(ele).data("name");
				if(name.indexOf(str) != -1 ){
					$(ele).show();
				}else{
					$(ele).hide();
				}
			});
			
			$("#organizationId").show();
		})
		//$("div.content *").not(".keep")
		$("body").not("#organization-wp").on("click",function(ev){
			$("#organizationId").hide();
		});
		
	});
	
	function goPage(pageNo){
		if(pageNo=="gopage"){
			$("#pageNo").val($("#gopage").val());
		}else{
			$("#pageNo").val(pageNo);
		}
		$("#conditionform").submit();
	}
	
	function initVirtual(id){
		//var organizationId=$("#organizationId").val();
		var virtualId_=$("#virtualId_").val();
		$("#virtualId").empty();
		if(id!=""){
			//$(".input-organ").val($("#organizationId option:selectd").text());debugger
			var optionStr="";
			$("#virtualId").append("<option value=''>请选择企业</option>");
			$.ajax({
				url :contextPath+"/busi/property/getvirtualArchTypeOne",
				type : "POST",
				//data : {organizationId: organizationId},
				data : {organizationId: id},
				dataType:"json",
				success : function(data) {
					$.each(data,function(index,obj){
						if(virtualId_!=""&&virtualId_==obj.id){
							optionStr+="<option selected='selected' value='"+obj.id+"'>"+obj.name+"</option>";
						}else{
							optionStr+="<option value='"+obj.id+"'>"+obj.name+"</option>";
						}
					});
					$("#virtualId").append(optionStr);
				},
				error : function(data) {
				}
			});
		}
		else{
			$("#virtualId").append("<option value=''>请选择企业</option>");
		}
	}
	
	function memberInfo(userId,funcid){
		var url=contextPath+"/member/info?userId="+userId+"&funcid="+funcid;
	   	//下单完成之后，自动刷新页面
		var winObj=openWin("",560,580,url);
	   	var loop = setInterval(function() {     
		    if(winObj!=null&&winObj.closed) {    
		        clearInterval(loop);
		        $("#conditionform").submit();
		    }    
		}, 1000);
	}
	

	function update(userId,funcid){
		var url=contextPath+"/member/form?userId="+userId+"&funcid="+funcid;
	   	//下单完成之后，自动刷新页面
		var winObj=openWin("",650,650,url);
	   	var loop = setInterval(function() {     
		    if(winObj!=null&&winObj.closed) {    
		        clearInterval(loop);
		        $("#conditionform").submit();
		    }    
		}, 1000);
	}
	
	function exportUserModel(){
		location.href=$("#contextPath").val()+"/upload/UserTemplate.xlsx";
	}
	
	function importUserModel(){
		if(confirm("您确定要批量导入用户信息")){
   			window.location.href="importUserModelList?funcid=${funcid}";
   		}
	}
	
	function del(userId,funcid,userName){
		if(confirm("您确定要删除"+userName+"用户信息吗？")){
			/*
			$.ajax({
				url :contextPath+"/member/delete",
				type : "POST",
				data:{userId:userId},
				dataType:"json",
				success : function(data) {
					
				},
				error : function(data) {
				}
			});*/
   		}
	}
</script>
<style type="text/css">
	th {
		text-align: center;
	}
	td {
		height:60px;
		text-align: center;
		vertical-align: middle !important;
	}
	input{
		width:200px;
	}
	.organization-wp{
		display: inline-block;
		width: 160px;
		position: relative;
	}
	.organization-wp .input-organ{
		padding: 5px;
		width: 160px;
		height: 31px;
	    border: 1px solid #d0d0d0;
    	border-radius: 5px;
	}
	.organization-wp #organizationId{
		position: absolute;
		top: 32px;
		left: 5px;
		z-index: 1;
		display: none;
		border: 1px solid #d0d0d0;
    	border-radius: 5px;
    	background: #fff;
    	
	}
	.organization-wp #organizationId .options{
		width: 160px;
		height: 31px;
		padding: 0 5px;
		line-height: 31px;
		font-size: 14px;
		background: #fff;
	}
	.organization-wp #organizationId .options:hover{
		background: #f1f1f1;
		cursor: pointer;
	}
</style>
</head>
<body>
	<input type="hidden" value="${ctx}" id="contextPath">
	<input type="hidden" value="${virtualId}" id="virtualId_">
	<input type="hidden" value="${status}" id="status_">
	<input type="hidden" value="${imageServer}" id="imageServer">
	<section class="content">
		<div class="row">
			<div class="col-xs-12">
				<div class="boxlist">
					<!-- /.box-header -->
					<div class="box-body table-responsive">
						<form:form id="conditionform" action="${ctx}/member/userlist?funcid=${funcid}" method="POST">
							<input type="hidden" id="pageNo" name="pageNo" />
							<input type="hidden" id="funcid" value="${funcid}">
							<div class="form-group">
								<%--<label>项目名称</label>
								<div class="organization-wp">
									<input class="input-organ" placeholder="请输入项目名称"/>
									<div id="organizationId">
										<c:forEach items="${organizationList }" var="obj">
											<div class="options" data-id="${obj.id }" data-name="${obj.name }">${obj.name }</div>
										</c:forEach> 
									</div>
								</div>--%>

								<c:if test="${fn:length(organizationList) > 1}">
									<label>项目名称</label>
									<div class="organization-wp">
										<input class="input-organ" placeholder="请输入项目名称"/>
										<div id="organizationId">
											<c:forEach items="${organizationList }" var="obj">
												<div class="options" data-id="${obj.id }" data-name="${obj.name }">${obj.name }</div>
											</c:forEach>
										</div>
									</div>
									~
								</c:if>
								<c:if test="${fn:length(organizationList) == 1}">
									<input id="organizationId" type="hidden" value="${organizationList[0].id}"/>
								</c:if>

								<select name="virtualId" id="virtualId" style="width:160px;">
									<option value="">请选择企业</option>
								</select>
								
								<label>关键字</label> <input type="text" name="keyWord" value="${keyWord}" placeholder="请输入姓名、电话号码查询" />
								
								<label>状态</label> 
								<select name="status" id="status"  style="width:160px;">
								<option value="">请选择认证状态</option>
								<option value="0">未审核</option>
								<option value="2">未认证</option>
								<option value="1">已认证</option>
								</select>							
								<br/>
								
								<label for="">注册时间</label>
	                            <input type="text" name="bgTime" id="bgTime" value="${bgTime }" 
										class="Wdate" onfocus="WdatePicker({startDate:'%y-%M-%d 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
										readonly="true" placeholder="请选择开始时间" style="width: 200px;" />
	                            <input type="text" name="endTime" id="endTime" value="${endTime }" 
										class="Wdate" onfocus="WdatePicker({startDate:'%y-%M-%d 23:59:59',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
										readonly="true" placeholder="请选择结束时间" style="width: 200px;" /> 
							</div>
							
							<span style="float:right; margin-bottom: 2px;"> 
								<a class="btn btn-default" href="#" id='btn-search'>查询</a>
								<a class="btn btn-success" href="#" onclick="exportUserModel()">下载模板</a>
								<a class="btn btn-success" href="#" onclick="importUserModel()">导入员工信息</a>
								<a class="btn btn-success" href="#" onclick="update('',${funcid})">添加员工信息</a>
							</span>
						</form:form>
						<table class="table table-bordered table-hover" id="dataareaid">
							<thead>
								<tr>
									<th>微信头像</th>
									<th>微信昵称</th>
									<th>姓名</th>
									<th>手机号</th>
									<th>状态</th>
									<th>企业信息</th>
									<th>注册时间</th>
									<th>识别照片</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
							<c:forEach items="${page.items }" var="obj" varStatus="status">
								<tr>
									<td>
									<c:choose>
									<c:when test="${!empty obj.headimgUrl }">
									<img alt="" src="${obj.headimgUrl }" style="height:60px;">
									</c:when>
									<c:otherwise>
									<img alt="" src="${ctx }/images/common/default_head.png" style="height:60px;">
									</c:otherwise>
									</c:choose>
									</td>
									<td>${obj.nickName}</td>
									<td>${obj.userName}</td>
									<td>${obj.userMobile}</td>
									<td>
										<c:if test="${empty obj.userId}">
										未注册
										</c:if>
										<c:choose>
										<c:when test="${obj.status=='0'||obj.status=='' }">待审核</c:when>
										<c:when test="${obj.status=='1' }">已认证</c:when>
										<c:when test="${obj.status=='2' }">未认证</c:when>
										<c:otherwise></c:otherwise>
										</c:choose>
									</td>
									<td>${obj.organizationName} ${obj.virtualName }</td>
									<td>${obj.createTime }</td>
									<td>
										<c:if test="${empty obj.imageUserList}">
										<div style="width:72px;height:72px;"><img style="width:72px;height:72px;margin-left:0px" alt="" src="${ctx }/images/common/default_head.png"></div>
										</c:if>
										<c:if test="${not empty obj.imageUserList }">
										 <c:forEach items="${obj.imageUserList }" var="model">
										<div style="width:72px;height:72px;"><img style="width:72px;height:72px;margin-left:0px" alt="" src="${imageServer }${model.imageUrl}"></div>
										</c:forEach>
										</c:if>
									</td>
									<td>

										<a href="javascript:memberInfo(${obj.userId},${funcid});" title="查看审核">
											<span style="text-decoration:underline">查看审核</span>
                                   		</a>
                                   		<a href="javascript:update(${obj.userId},${funcid});" title="修改用户">
											<span style="text-decoration:underline">修改用户</span>
                                   		</a>

                                   		<!-- 

	                                   		<a href="javascript:del(${obj.userId},${funcid},'${obj.userName }');" title="删除用户">
												<span style="text-decoration:underline">删除用户</span>
	                                   		</a>

                                   		-->
                                   	</td>
								</tr>
							</c:forEach>
							</tbody>
						</table>
						<div class="btn-page">
		                    <!-- 页码 -->
		                    <div align="center" class="pages clearfix">
		                           <c:forEach items="${page.iterPages }" var="pageNo">
									<c:choose>
										<c:when test="${pageNo == page.currentPage }">
											<span class='current'>${pageNo }</span>
										</c:when>
										<c:when test="${pageNo != null}">
											<a href="javascript:void(0);" onclick='goPage(${pageNo});'>${pageNo}</a>
										</c:when>
										<c:otherwise>
											<em>...</em>
										</c:otherwise>
									</c:choose>
								</c:forEach>
								<strong>共<span style="color:black;font-weight:bold;font-size:16px;">${page.totalCount}</span>条</strong>
								<strong>跳转到第</strong><input type="text" id="gopage" style="width: 40px;" onkeyup="this.value=this.value.replace(/\D/g,'')" onkeypress="this.value=this.value.replace(/\D/g,'')"/><strong>页</strong>
								<a class="btn-sm  btn-primary" href="javascript:goPage('gopage');" id='bindBtn'>确定</a>
		                	</div>
			            </div>
					</div>
				</div>
			</div>
		</div>
	</section>
</body>
</html>