<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<!-- 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" />
<!-- date -->
<link rel="stylesheet" type="text/css" href="${ctx}/scripts/js_datetime/date.css" />
<script src="${ctx }/scripts/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<c:url value='/scripts/loading/jquery.blockUI.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/loading/loading.js'/>"></script>
<script type="text/javascript">
	$(document).ready(function(){
		function fn(selector,container){
		    $(selector).click(function(){
		        var stats = $(this).prop('checked') || false;
		        $(container).each(function(idx,item){
		            $(item).prop('checked',stats);
		        });
		    });
		    
		    $(container).click(function(){
		     var chklen = $(container).filter(function(idx,el){
			     if($(el).prop('checked')){
			    	 return el;
			     }
		     }).length;
			var chkStats = $(container).length === chklen;
		 		$(selector).prop('checked',chkStats);
		    });
		};
		fn("#checkAll","input[name='chkBtn']");
		
		//解绑
		$("#unbindBtn").click(function(){
			var contextPath =$("#contextPath").val();
			if($("#dataareaid input:checked[name='chkBtn']").length < 1){
				alert('请选择要解除绑定的数据');
				return;
			}
			if(confirm('确定要解绑吗?')){
				var dataAreaIds="";
				for(var i=0;i<$("#dataareaid input:checked[name='chkBtn']").length;i++){
					dataAreaIds+=$("#dataareaid input:checked[name='chkBtn']")[i].value+";";
				}
				showBlock();
				
				var dataAreaIds="";
				for(var i=0;i<$("#dataareaid input:checked[name='chkBtn']").length;i++){
					dataAreaIds+=$("#dataareaid input:checked[name='chkBtn']")[i].value+";";
				}
				showBlock();
				$.ajax({
					url: contextPath+"/admin/staffBind/unbind",
					type:"post",
					data: {dataAreaIds:dataAreaIds},
					dataType:"json",
					success:function(data){
						if(data.errcode==200){
							alert('解绑成功');
							$("#conditionform").submit();
						}else{
							alert('解绑失败');
						}
						hideBlock();
					},error:function(e){
						alert('解绑失败');
					}
				});
			}
		});
	});
	
	//点击绑定
	function binding(id,organizationId){
		var contextPath =$("#contextPath").val();
		var funcid=$("#funcid").val();
		showBlock();
		location.href=contextPath+"/admin/staffBind/prebind?id="+id+"&organizationId="+organizationId+"&funcid="+funcid;
	}
	
	//翻页
	function goPage(pageNo){
		showBlock();
		if(pageNo=="gopage"){
			$("#pageNo").val($("#gopage").val());
		}else{
			$("#pageNo").val(pageNo);
		}
		$("#conditionform").submit();
	}
</script>
<style type="text/css">
	th{ text-align:center;}
	td{ text-align:center;vertical-align:middle;}
</style>
</head>
<body>
	<input type="hidden" value="${ctx}" id="contextPath"> 
	<input type="hidden" value="${funcid}" id="funcid"> 
	<section>
		<div class="row">
			<div class="col-xs-12">
				<div class="boxlist">
					<!-- /.box-header -->
					<div class="box-body table-responsive">
						<form action="${ctx}/admin/staffBind/query?funcid=${funcid }" method="POST" id="conditionform">
							<input type="hidden" id="pageNo" name="pageNo" />
							<div class="form-group">
								<label>校区</label>
								<select name="organizationId"  id="organizationId" style="width:160px;margin-left:5px;">
	                               	<option value="">请选择</option>
	                               	<c:forEach items="${organizationList}" var="organization">
	                               		<option value="${organization.id }" <c:if test="${organization.id == organizationId }">selected="selected"</c:if>>${organization.name }</option>
	                               	</c:forEach>
		                        </select>
								<label>微信昵称</label>
								<input id="nickName" name="nickName" value="${nickName }" placeholder="请输入微信昵称"/> 
								<label>是否绑定</label>
								<select id="IsBinding" name="IsBinding" > 
									<option value="">请选择</option>
									<option value="0" <c:if test="${IsBinding==0 }">selected="selected"</c:if>>未绑定</option>
									<option value="1" <c:if test="${IsBinding==1 }">selected="selected"</c:if>>已绑定</option>
								</select>
							</div>
							<span style="float:right;">
								<a class="btn btn-default" href="javascript:goPage();" id='btn-search'>查询</a>
                               	<a class="btn btn-danger" href="#" id='unbindBtn'>解绑</a>
                       		</span>
						</form>
						<table class="table table-bordered table-hover" id="dataareaid">
							<thead>
								<tr>
									<th><input type="checkbox" id="checkAll"></th>
									<th>公众号名称</th>
									<th>微信用户openId</th>
									<th>微信昵称</th>
									<th>校区名称</th>
									<th>绑定员工姓名</th>
									<th>关注时间</th>
									<th>是否绑定</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach items="${page.items }" var="obj">
									<tr>
										<td><input type="checkbox" name="chkBtn"
											value="${obj.id }" /></td>
										<td>${obj.publicnoName }</td>
										<td>${obj.openId }</td>
										<td><a href="<c:url value='/admin/staffBind/detail?id=${obj.id }&funcid=${funcid }'/>">${obj.nickName }</a></td>
										<td>${obj.organizationName }</td>
										<td>${obj.staffName }</td>
										<td><fmt:formatDate value="${obj.subscribeTime }" pattern="yyyy-MM-dd HH:mm:ss" /></td>
										<td>
											<c:choose>
												<c:when test="${obj.isBinding eq '1'}">已绑定</c:when>
												<c:otherwise>
													<a class="btn btn-success" href="javascript:binding(${obj.id },${obj.organizationId });" id='bindBtn'>绑定</a>
												</c:otherwise> 
											</c:choose>
										</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-success" href="javascript:goPage('gopage');" id='bindBtn'>确定</a>
		                	</div>
			            </div>
					</div>
				</div>
			</div>
		</div>
	</section>
</body>
</html>