<style type="text/css">div.head-con{border-bottom-width:0}div.welcome{background-color:#f8f8f8;text-align:center}i.router{display:inline-block;background:url(/luci-static/images/time.png?_=20191016014108) no-repeat;background-size:contain;width:6.2rem;height:6rem}div.btn-con-2{margin:1rem auto 0}span.select-width{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:80%;position:absolute}ul.sel-list li.sel-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:97%;border-bottom:1px solid #dcdcdc}ul.sel-list{overflow:auto;max-height:4.4rem}</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			time_zone = {config = {}}
		}

		local data = tpl_get_data(para, true)
	-%>

	var timeZoneInfo = <%=data%>;

	var areaList = TIMEZONE.getAreaList();

	var regionListAll = TIMEZONE.getRegionListAll();

	function init(result){
		var errNo = result[ERR_CODE];
		var ret;
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		var time_zone = ret.time_zone.config;

		var selRegion = id("Region");

		initSelect("Region", regionListAll, time_zone.region);

		initSelect("Area", areaList, time_zone.area, function(val, init){
			var regionList = TIMEZONE.getRegionList(val);
			if (ROUTER.areaList.length == 1){
				id("Area").disable(true);
			}

			if (init){
				selRegion.resetOptions(regionList, time_zone.region);
			}else{
				selRegion.resetOptions(regionList, regionList[0].value);
			}
		});
	}

	init(timeZoneInfo);

	$("#Save").click(function(){
		var data = {};
		var para = {};
		para.time_zone = {};
		para.time_zone.config = data;
		data.area = $("#Area").attr("data-value");
		data.region = $("#Region").attr("data-value");
		showLoading(label.saving);
		apiSet(para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				$.setTimeout(function(){
					closeLoading();
					stateman.go("guideNetworkSet");
				}, ret[K_MODULE].time_zone.config.wait_time * 1000);
			}else{
				closeLoading();
				handleError(code);
			}
		});
	});
})();
</script>
<div class="head-con">
	<h1 class="head-title">{%label.regionTimeZone%}</h1>
</div>
<div class="set-con below-head">
	<div class="welcome">
		<i class="router"></i>
	</div>
	<ul class="set-con">
		<label class="desc-lbl">{%label.region%}</label>
		<li class="text-con">
			<span id="Area" class="select">
				<span class="select-value select-width"></span>
				<i class="tip icon_list-expansion"></i>
			</span>
		</li>
	</ul>
	<ul class="set-con">
		<label class="desc-lbl">{%label.timeZone%}</label>
		<li class="text-con">
			<span id="Region" class="select">
				<span class="select-value select-width"></span>
				<i class="tip icon_list-expansion"></i>
			</span>
		</li>
	</ul>
	<div class="err-note hidden">
		<i class="err-icon icon_remind_line"></i>
		<p class="note-str"></p>
	</div>
	<div class="btn-con btn-con-2">
		<input id="Save" class="btn" type="button" value="{%btn.nextStep%}" />
	</div>
</div>
