{extend name="$base" /}
{block name="resources"}
<style>
.table label{display: inline-block;vertical-align: middle;height: 20px;width: 140px;line-height: 20px;font-weight: normal;}
.table label input{margin-top: -3px;}
.table label span{margin-left: 3px;}
.num{font-weight: normal;}
.modal-infp-style label input{margin-top: -3px;}
.modal-infp-style label span{margin-left: 3px;}
.modal-infp-style label{width: 150px;margin-left: 10px;display: inline-block;font-weight: normal;}
.contailner{padding: 15px;}
</style>
{/block}
{block name="main"}
<div class="space-10"></div>
<div class="ncsc-form-goods">
	{include file="admin/Express/expressTitle"}
	<!-- 基础设置 -->
	<div class="contailner">
		<table class="table">
	<colgroup>
		<col style="width: 20%">
		<col style="width: 80%;">
	</colgroup>
	<thead>
		<tr align="left" style="border-bottom: 1px solid #E3E3E3;">
			<th>省</th>
			<th>市</th>
		</tr>
	</thead>
	<tbody>
		{volist name="list" id="vo"}
		<tr align="left">
			<th class="province">
				<label for="province_{$vo.province_id}">
					<i class="checkbox-common">
						<input type="checkbox" id="province_{$vo.province_id}" value="{$vo.province_id}" name="province_id_{$vo.province_id}" onclick="provinceClick({$vo.province_id},this);" {notempty name="$provinces"}{foreach name="provinces" item="po"}{if condition="$vo['province_id'] eq $po"}checked="checked"{/if}{/foreach}{/notempty}>
					</i>
					<span>{$vo.province_name}</span>
				</label>
			</th>
			<td class="city">
			{volist name="$vo['city_list']" id="co"}
				<label style="width: 230px;">
					<i class="checkbox-common">
					<input type="checkbox" value="{$co.city_id}" name="city_pid_{$co.province_id}" class="city_{$co.city_id}" pid="{$co.province_id}" onclick="cityClick({$co.city_id},{$co.province_id},this)" {notempty name="citys"}{foreach name="$citys" item="to"}{if condition="$co['city_id'] eq $to"}checked="checked"{/if}{/foreach}{/notempty}>
					</i>
					<span>{$co.city_name}</span>
					<span class="num">(0)</span>
					<a href="javascript:;" onclick="selectDistrictAjax({$co.city_id},this);"  style="color: #999;">&nbsp;<i class="fa fa-pencil" aria-hidden="true"></i></a>
				</label>
			{/volist}
			</td>
		</tr>
		{/volist}
		<tr>
			<td colspan="2" style="text-align:center">
			<button type="button" class="btn-common btn-big" onclick="save();">保存</button></td>
		</tr>
	</tbody>
</table>
	</div>
<input type="hidden" id="districts" value="{notempty name='$districts'}{$districts}{/notempty}">
<!-- 模态框 -->
<div class="modal fade hide" id="evaluate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h3 class="modal-title" id="myModalLabel">选择子地区</h3>
			</div>
			<div class="modal-body">
				<div class="modal-infp-style">
					{volist name="districtList" id="do"}
					<label style="display: none;">
						<i class="checkbox-common">
						<input type="checkbox" value="{$do.district_id}" name="district_pid_{$do.city_id}" class="district_{$do.district_id}">
						</i>
						<span>{$do.district_name}</span>
					</label>
					{/volist}
				</div>
			</div>
			<input type="hidden" id="nowSelectCityId" >
			<input type="hidden" id="lowerLevelNumVal" >
			<div class="modal-footer">
				<span style="font-size: 12px;color: red;float: left;">选择完成后点击页面最下方的保存后方可生效</span>
				<input type="hidden" id="evaluate_id" >
				<button type="button" class="btn-common btn-success" data-dismiss="modal" >确认</button>
				<button type="button" class="btn" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
</div>
<script>
//初始化
$(function(){
	var arr = $("#districts").val().split(',');
	$("input[name^=district_pid_]").each(function(i,d){
		var d_id = $(d).val();
		for (var a = 0; a <arr.length; a++) {
			if(d_id == arr[a]){
				$(".district_"+d_id).attr("checked",true);
				arr.splice(a,1);
			}
		}
	})
	$("input[name^=city_pid_]").each(function(i,d){
		var city_id = $(d).val();
		var selectNums = $("input[name=district_pid_"+city_id+"]:checked").length;
		$(this).parent().next().next().text('('+selectNums+')');
	});
	$("input:checked").parent().addClass('selected');
});
	
//点击弹出模态框显示县级地区
function selectDistrictAjax(city_id,event){
	var city_name = $(event).prev().prev("span").text();
	$("#nowSelectCityId").val(city_id);
	$("#myModalLabel").text("选择 "+city_name+" 子地区");
	$("input[name=district_pid_"+city_id+"]").parents('label').show();
	$("#evaluate").modal('show');
}

//点击模态框确认按钮时执行事件
$(".btn-success").click(function(){
	var city_id = $("#nowSelectCityId").val();
	if(city_id.length>0){
		$("input[name=district_pid_"+city_id+"]").parent('label').hide();
	}
	//将选中的县的值存入数组
	var selectNum =  $("input[name=district_pid_"+city_id+"]:checked").length;
	if(selectNum >0){
		$(".city_"+city_id).attr("checked",true).parent().addClass('selected');
	}else{
		$(".city_"+city_id).attr("checked",false).parent().removeClass('selected');
	}
	var province_id = $(".city_"+city_id).attr("pid");
	if($("input[name=city_pid_"+province_id+"]:checked").length>0){
		$("#province_"+province_id).attr("checked",true).parent().addClass('selected');
	}else{
		$("#province_"+province_id).attr("checked",false).parent().removeClass('selected');
	}
	$(".city_"+city_id).parent().next().next(".num").text('('+selectNum+')');
});

//点击省时执行时间
function provinceClick(province_id,event){
	if($(event).is(":checked")){
		$("input[name=city_pid_"+province_id+"]:checkbox").attr("checked",true).parent().addClass('selected');
		$("input[name=city_pid_"+province_id+"]:checkbox").each(function (i,d){
			var city_id = $(d).val();
			$("input[name=district_pid_"+city_id+"]:checkbox").attr("checked",true).parent().addClass('selected');
			var selectNums = $("input[name=district_pid_"+city_id+"]:checkbox").length;
			$(this).parent().next().next().text('('+selectNums+')');
		});
	}else{
		$("input[name=city_pid_"+province_id+"]:checkbox").attr("checked",false).parent().removeClass('selected');
		$("input[name=city_pid_"+province_id+"]:checkbox").each(function (i,d){
			var city_id = $(d).val();
			$("input[name=district_pid_"+city_id+"]:checkbox").attr("checked",false).parent().removeClass('selected');
			$(this).parent().next().next().text('(0)');
		});
	}
}

//点击市时执行事件
function cityClick(city_id,province_id,event){
	if($(event).is(":checked")){
		$("input[name=district_pid_"+city_id+"]:checkbox").attr("checked",true).parent().addClass('selected');
		var selectNums = $("input[name=district_pid_"+city_id+"]:checkbox").length;
		$(event).parent().next().next().text('('+selectNums+')');
	}else{
		$("input[name=district_pid_"+city_id+"]:checkbox").attr("checked",false).parent().removeClass('selected');
		$(event).parent().next().next().text('(0)');	
	}
	if($("input[name=city_pid_"+province_id+"]:checked").length>0){
		$("input[name=province_id_"+province_id+"]:checkbox").attr("checked",true).parent().addClass('selected');
	}else{
		$("input[name=province_id_"+province_id+"]:checkbox").attr("checked",false).parent().removeClass('selected');
	}
}

//关闭模态框
$(function(){ 
	$('#evaluate').on('hide.bs.modal', function () {
		var city_id = $("#nowSelectCityId").val();
		if(city_id.length>0){
			$("input[name=district_pid_"+city_id+"]").parents('label').hide();
		}
	})
});
	
//保存所选地区
function save(){
	var districtArray = new Array();
	$("input[name^=district_pid_]").each(function (i,d){ 
		if(d.checked) {
			districtArray.push(d.value);
		}
	});
	
	var cityArray = new Array();
	$("input[name^=city_pid_]").each(function (i,d){ 
		if(d.checked) {
			cityArray.push(d.value);
		}
	})
	
	var provinceArray = new Array();
	$("input[name^=province_id_]").each(function (i,d){ 
		if(d.checked) {
			provinceArray.push(d.value);
		}
	});
	
	var province_id = provinceArray.join(',');
	var city_id = cityArray.join(',');
	var district_id =districtArray.join(',');
	$.ajax({
		type : "post",
		url : "{:__URL('__URL__/nsfx/ADMIN_MODULE/distribution/addorupdatedistributionareaajax')}",
		data : {
			"province_id" : province_id,
			"city_id" : city_id,
			"district_id" : district_id
		},
		success : function(data){
			if(data['code']>0){
				showTip(data['message'],"success");
				location.href = "{:__URL('__URL__/nsfx/ADMIN_MODULE/distribution/distributionareamanagement')}";
			}
		}
	})
}
</script>
{/block}