<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>校区信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<meta name="robots" content="" />
<link type="text/css" href="<c:url value='/styles/wechat/staffUbind.css'/>" rel="stylesheet"/>
<link type="text/css" href="<c:url value='/styles/avicpm/loadview.css'/>" rel="stylesheet"  />
<script type="text/javascript" src="${ctx }/scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="${ctx }/scripts/wechat/controlOptionMenu.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
<script>
	$(function(){
		if($("#selectedProject").val()==""){
			chooseProject("1");
		}
		$("#a_toWechat").click(function(){
			WeixinJSBridge.call('closeWindow');
		});
	});
	
	function sureOrganization(){
		var organizationId=$("#selectOrganization option:selected").val();
		var projectName=$("#selectOrganization option:selected").text();
		if(organizationId=="请选择校区"){
			alert("请选择校区!");
			return false;
		}
		var openId = $("#openId").val();
		var developId = $("#developId").val();
		$.ajax({
			type: "post",
			url: "<c:url value='/wechat/staff/bindOrganization'></c:url>",
			data:{organizationId:organizationId,openId:openId,developId:developId},
			traditional: true,
			success: function(data){
				if(data=="success"){
					$("#cityAndOrg").attr("style","display:none");
					alert("操作成功！");
					$("#projectName").html(projectName);
					$("#hasProject").show();
					$("#noProject").hide();
				}else{
					alert("操作失败，请稍后再试！");
				}
			},
			error: function(){
				alert("操作失败！");
			}
		});
	}
	
	//选择城市后加载对应小区
	function changeCity(){
		var selectCity=$("#selectCity").val();
		$("#selectOrganization").empty();
		$("#selectOrganization").append("<option>请选择校区</option>");
		if(selectCity!=null && selectCity!=''){
			$.ajax({
				url: "<c:url value='/wechat/staff/getOrganizationListByCityCode'></c:url>",
				type:"post",
				data: {cityCode:selectCity},
				dataType:"json",
				async:false,
				success:function(data) {
					var selectObj=$("#selectOrganization");
					if(data.length>0){
						var optionStr="";
						$.each(data,function(index,obj){
							optionStr+="<option value='"+obj.id+"'>"+obj.name+"</option>";
						});
						selectObj.append(optionStr);
					}
					else{
						alert('该城市暂无校区信息');  
					}
				},
				error:function() {
		     		alert("未知异常");
				}
			});
		}
	}
	
	function chooseProject(type){
		$("#cityAndOrg").attr("style","display:block");
	}
</script>
</head>
<body style="background:#f2f2f2;margin:0;">
	<input type="hidden" id="openId" value="${openId}"/>
	<input type="hidden" id="developId" value="${developId}"/>
	<input type="hidden" id="contextPath" value="${ctx }">
	<input type="hidden" id="selectedProject" value="${wxUser.organizationId }">
	<div id="page">
		<img src="${ctx}/images/servicehome/ygbj.png" width="100%" style="margin:0;padding:0;">
		<c:choose>
			<c:when test="${!empty wxUser.organizationId }">
				<div id="hasProject" style="display:block;">
					<p style="padding:0 15px 10px 15px; line-height:30px;text-align:center;  font-size:1.2em; color:#000;">亲，您目前服务的校区为:<span id="projectName" style="color:red">${organization.name}</span>（<a href="javascript:void();" onclick="chooseProject('1');">切换校区</a>）,您的微信号未绑定员工信息，请联系当前所在运营中心先进行员工绑定！</p>
					<a href="javascript:void();" id="a_toWechat" style=" background:#89ccf6; margin:0 auto; display:block; width:160px; height:40px; text-align:center; text-decoration:none; line-height:40px; color:#fff; border-radius:20px;">知道了</a>
				</div>	
				<div id="noProject" style="display:none;">
					<p style="padding:0 15px 10px 15px; line-height:30px;text-align:center;  font-size:1.2em; color:#000;">亲，您的微信号未绑定员工信息，为了方便物业进行绑定，请您<span style="color:red"><a onclick="chooseProject('1');" href="javascript:void();"  style=" background:#89ccf6; margin:0 auto; display:block; width:160px; height:40px; text-align:center; text-decoration:none; line-height:40px; color:#fff; border-radius:20px;">选择服务校区</a></span></p>
				</div>
			</c:when>
			<c:otherwise>
				<div id="hasProject" style="display:none;">
					<p style="padding:0 15px 10px 15px; line-height:30px;text-align:center;  font-size:1.2em; color:#000;">亲，您目前服务的校区为:<span id="projectName" style="color:red">${organization.name}</span>（<a href="javascript:void();" onclick="chooseProject();">切换校区</a>）,您的微信号未绑定员工信息，请联系当前所在运营中心先进行员工绑定！</p>
					<a href="javascript:void();" id="a_toWechat" style=" background:#89ccf6; margin:0 auto; display:block; width:160px; height:40px; text-align:center; text-decoration:none; line-height:40px; color:#fff; border-radius:20px;">知道了</a>
				</div>	
				<div id="noProject" style="display:block;">
					<p style="padding:0 15px 10px 15px; line-height:30px;text-align:center;  font-size:1.2em; color:#000;">亲，您的微信号未绑定员工信息，为了方便物业进行绑定，请您<span style="color:red"><a onclick="chooseProject();" href="javascript:void();"  style=" background:#89ccf6; margin:0 auto; display:block; width:160px; height:40px; text-align:center; text-decoration:none; line-height:40px; color:#fff; border-radius:20px;">选择服务校区</a></span></p>
				</div>
			</c:otherwise>
		</c:choose>
	</div>
	<div id="cityAndOrg"  class="tcbj" style="display:none;">
	    <div class="tcck" id="tcnr1">
	        <div class="tcnr" id="tcnr2">
	        	<select class="xsf" id="selectCity" onchange="changeCity()">
			        <option value="">请选择城市</option>
			        <c:forEach var="city" items="${cityList }">
			        <option value="${city.cityCode }">${city.cityName }</option>
			        </c:forEach>
		        </select>
		        <select class="xsf" id="selectOrganization">
		        	<option>请选择校区</option>
		        </select>
	        </div>
	        <div class="tcnn"  id="tcnr5">
	            <input type="submit" id="tcnr6" class="an" value="确定" onclick="sureOrganization();"/>
	        </div>
	    </div>
	</div>
</body>
</html>