<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>
<script th:include="sys/common/metaCSS" th:remove="tag"></script> 
<script th:include="sys/common/metaJS" th:remove="tag"></script> 
<script src="sys/js/jquery.validate.min.js" th:src="@{/static/sys/js/jquery.validate.min.js}"></script>
<script src="sys/js/jquery-validation/messages_zh.js" th:src="@{/static/sys/js/jquery-validation/messages_zh.js}"></script>
 <style>
    	.clearfix:after {
			visibility: hidden;
			display: block;
			font-size: 0;
			content: " ";
			clear: both;
			height: 0;
		}
		.clearfix { display: inline-table; }
		* html .clearfix { height: 1%; }
		.clearfix { display: block; }
		.fl{display:inline;float:left}
		clearfix >control-label-error{display:inline;float:left;marign-left:10px}
		 label.control-label-error {
  				color: Red;
             }
          .lispan {line-height: 34px;}   
          
          .select1{
   		    width:100%;
		    height: 32px;
		    line-height: 32px;
		    border-top: solid 1px #a7b5bc;
		    border-left: solid 1px #a7b5bc;
		    border-right: solid 1px #ced9df;
		    border-bottom: solid 1px #ced9df;
		    opacity:1;
	        margin-bottom: 10px;
    	}
    </style>
</head>

<body>
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    	<li><a th:href="@{/sys/problem/cnArealist.html}">学校地址管理</a></li>
    </ul>
</div>
<div class="formbody">
	<div class="formtitle"><span>学校地址信息</span></div>
	<form id="roleFrom"   method="post" class="form-horizontal form-validate">
		<input  type="hidden" id="id" th:if="${cnArea.id}" th:value="${cnArea.id}" name="id">
		<ul class="forminfo">
			<li class="clearfix">
				<label class="fl">名称<b>*</b></label>
				  <input  type="text" id="name"  th:value="${cnArea.name}" class="dfinput fl"  name="name">
			</li>
			<input type="hidden" value="4" name="type"/>
			<li class="clearfix">
				<label class="fl">区<b>*</b></label>
				<div class="vocation" style="margin-right: 5px; width: 100px">
					<select name="province" id="province" class="select1" onchange="funcprovince()">
						<option data-type="1" value="" >选择省</option>
					</select>
				</div>

				<div class="vocation" style="margin-right: 5px; width: 100px">
					<select name="city" id="city" class="select1" onchange="funccity()">
						<option data-type="2" value="" >选择市</option>
					</select>
				</div>

				<div class="vocation" style="margin-right: 5px; width: 100px">
					<select name="upId" id="area" class="select1" onchange="funcarea()">
						<option data-type="3" value="" >选择区</option>
					</select>
				</div>
			</li>
			<input  type="hidden" id="py"  value="xx" class="dfinput fl"  name="py">
			<input  type="hidden" id="isHotcity"  value="0" class="dfinput fl"  name="isHotcity">

		   <li class="clearfix">
				<label class="fl">学校详细地址<b>*</b></label>
				  <input  type="text" id="schoolAddress"  th:value="${cnArea.schoolAddress}" class="dfinput fl"  name="schoolAddress">
			</li>
			  <input  type="hidden" id="schoolLng"  th:value="${cnArea.schoolLng}" class="dfinput fl"  name="schoolLng">
			  <input  type="hidden" id="schoolLat"  th:value="${cnArea.schoolLat}" class="dfinput fl"  name="schoolLat">
			<li>
				<label>&nbsp;</label>
				<button type="submit" class="btn">保存</button>
				<button type="button" class="btn" onclick="window.history.go(-1);">取消</button>
			</li>
		</ul>
	</form>
</div>
</body>
<script type="text/javascript">
	var curLocation="[[${location}]]";
	var areaUrl="[[${sysUrl}]]/sys/fx/areaList";
$(function(){
	$('.myselect').on('change',function(){
//判断是否选取prompt属性，无返回值；
		if($(this).val()){
			var selectText = $(this).find('option:selected').attr("data-id");
			$("#upId").val(selectText);
		}
	});
	funcinitprovince();
	$("#roleFrom").validate({
		rules : {
			name : {
				required : true
			 },
			schoolAddress : {
		        required : true
	         }},
		messages: {
			name : {
				required : "请输入学校名称"
			 },
			schoolAddress : {
				required : "请输入学校具体地址"
				 }
		   },
		errorPlacement : function(error, element) {
				error.appendTo(element.parent()); 
		},
		submitHandler : function(form) {
			roleFrom();
		}
	});
	
});
function roleFrom(){
	var url="[[${sysUrl}]]/sys/problem/saveCnArea";
	var params = $("#roleFrom").serialize();
	$.post(url,params,function(data){
		if(data != null){
			if(data.code=="999"){
					layer.msg("操作成功!",{icon:1});
			    	setTimeout(function(){
			    		window.location.href ='[[${sysUrl}]]/sys/problem/cnArealist.html';
					},1000);
				}else{
					layer.msg(data.meta.message,{icon:11});
				}
		}
		
	});
}
function funcinitprovince(){
	var val = 0;
	var type =1;

	$("#province").html("<option value='' >选择省</option>");

	var params ={ 'type' : type,'upId':val}
	$.post(areaUrl,params,function(data){
		if(data.meta.success){
			var html=[];
			for (var i = 0; i < data.data.length; i++) {
				html.push("<option "+((curLocation.indexOf(data.data[i].name)!=-1) ? 'selected' : '')+" data-type='"+data.data[i].type+"' value='"+data.data[i].id+"' >"+data.data[i].name+"</option>");
			}
			$("#province").append(html.join(""));
			funcprovince();
		}else{

		}
	});
}


function funcprovince(){
	var val = $('#province  option:selected').val();
	var type = $('#province  option:selected').data("type");

	$("#city").html("<option value='' >选择市</option>");

	var params ={ 'type' : (type+1),'upId':val}
	$.post(areaUrl,params,function(data){
		if(data.meta.success){
			var html=[];
			for (var i = 0; i < data.data.length; i++) {
				html.push("<option "+((curLocation.indexOf(data.data[i].name)!=-1) ? 'selected' : '')+" data-type='"+data.data[i].type+"' value='"+data.data[i].id+"' >"+data.data[i].name+"</option>");
			}
			$("#city").append(html.join(""));
			funccity();
		}else{

		}
	});
}

function funccity(){
	var val = $('#city  option:selected').val();
	var type = $('#city  option:selected').data("type");

	$("#area").html("<option value='' >选择区</option>");

	var params ={ 'type' : (type+1),'upId':val}
	$.post(areaUrl,params,function(data){
		if(data.meta.success){
			var html=[];
			for (var i = 0; i < data.data.length; i++) {
				html.push("<option "+((curLocation.indexOf(data.data[i].name)!=-1) ? 'selected' : '')+" data-type='"+data.data[i].type+"' value='"+data.data[i].id+"' >"+data.data[i].name+"</option>");
			}
			$("#area").append(html.join(""));
		}else{

		}
	});
}

</script>
</html>