<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>选择自提点</title>
	{js:jquery}
	{js:dialog}
	{js:artTemplate}
<style>
.__takeself {font-size: 12px;}
.__takeself,.__takeself * {margin: 0;padding: 0;list-style: none;}
.__takeself .__takeself_box {padding: 8px;}
.__takeself .__takeself_box h3 {height: 28px;line-height: 28px;text-indent: 15px;background: #F0AD4E;color: #fff;border: 1px solid #EEA236;border-radius: 5px;}
.__takeself .__takeself_box .__select {overflow: hidden;margin-top: 10px;}
.__takeself .__takeself_box .__select select {
	display: block;border-radius: 0;border: none;
	background: #fff;outline: 1px solid #ddd;
	width: 32%;float: left;height: 36px;line-height: 36px;margin: 0 0 0 2%;padding: 0;
}
.__takeself .__takeself_box .__select select:nth-of-type(1){margin-left: 0 !important;}
.__takeself .__takeself_box .__takeself_list {}
.__takeself .__takeself_box .__takeself_list li {margin-top: 10px;}
.__takeself .__takeself_box .__takeself_list li label {}
.__takeself .__takeself_box .__takeself_list li label input {display: none;}
.__takeself .__takeself_box .__takeself_list li label span {display: block;padding: 5px 0;line-height: 18px;text-indent: 10px;border: 1px solid #ddd;border-radius: 5px;}
.__takeself .__takeself_box .__takeself_list li label span:hover {background: #f0f0f0;cursor: pointer;}
.__takeself .__takeself_box .__takeself_list li label input:checked + span {color: #fff;border-color: #4CAE4C;background: #5CB85C;}
</style>
</head>
{set:$dev = IClient::getDevice()}
<body class="__takeself" style="{if:$dev=='pc'}width:400px;{/if}min-height:300px;">
	<div class="__takeself_box">
		<h3>选择自提点</h3>
		<div class="__select">
			<select name="province" onchange="getData('province');">
				<option value="">选省份</option>
				{query:name=takeself as ts join=left join areas as a on a.area_id eq ts.province fields=a.* order=ts.sort asc group=ts.province}
				<option value="{$item['area_id']}">{$item['area_name']}</option>
				{/query}
			</select>
			<select name="city" onchange="getData('city');">
				<option value="">选城市</option>
			</select>
			<select name="area" onchange="getData('area');">
				<option value="">选区域</option>
			</select>
		</div>

		<ul class="__takeself_list" id="takeselfBox"></ul>
	</div>

	<!--自提点模板-->
	<script type="text/html" id="takeselfRowTemplate">
	<li>
		<label>
			<input type='radio' value='<%=JSON().stringify(item)%>' name='takeselfItem' />
			<span>
			<%=item['address']%>

			<%if(item['phone']){%>
			，电话：<%=item['phone']%>
			<%}%>

			<%if(item['mobile']){%>
			，手机：<%=item['mobile']%>
			<%}%>
			</span>
		</label>
	</li>
	</script>
</body>

<script type='text/javascript'>
//获取数据
function getData(typeVal)
{
	var selectedVal = $('[name="'+typeVal+'"] option:selected').val();
	$.getJSON("{url:/block/getTakeselfList}",{"id":selectedVal,"type":typeVal},function(jsonData)
	{
		switch(typeVal)
		{
			case "province":
			{
				$('[name="city"] option:gt(0)').remove();
				for(var index in jsonData)
				{
					var item = jsonData[index];
					$('[name="city"]').append('<option value="'+item['city']+'">'+item['city_str']+'</option>');
				}
			}
			break;

			case "city":
			{
				$('[name="area"] option:gt(0)').remove();
				for(var index in jsonData)
				{
					var item = jsonData[index];
					$('[name="area"]').append('<option value="'+item['area']+'">'+item['area_str']+'</option>');
				}
			}
			break;

			case "area":
			{
				$('#takeselfBox').empty();
				for(var index in jsonData)
				{
					var item = jsonData[index];
					var takeselfHtml = template.render('takeselfRowTemplate',{"item":item});
					$('#takeselfBox').append(takeselfHtml);
				}
			}
			break;
		}
	});
}
</script>
</html>
