<style type="text/css">#Help{width:25%}li.current-step h2{background-color:#ff7800}i.icon_remind_line{color:#f34947}div.btn-con{border:0;text-align:left}</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($("li.current-step").next().attr("id"));
				}, ret[K_MODULE].time_zone.config.wait_time * 1000);
			}else{
				closeLoading();
				handleError(code);
			}
		});
	});
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="title">{%label.regionTimeZone%}</li>
		<li class="content">{%helpStr.timeZone%}</li>
	</ul>
</div>
<%+language%>
<div class="head">
	<div class="left-logo">
		<img class="logo" src="/luci-static/images/phicomm.png?_=20191016014108" alt="phicomm" />
		<span class="brand">{%label.phicomm%}</span>
	</div>
	<i id="HelpIcon" class="icon guide-icon icon_help"></i>
</div>
<div class="guide">
	<div class="left-image-con center-container">
		<div class="image-con vertical-center">
			<h1 class="guide-title">{%label.regionTimeZone%}</h1>
			<img class="left-image" src="/luci-static/images/time.png?_=20191016014108" alt="{%label.timeZone%}" />
		</div>
	</div>
	<div id="GuideCon" class="set-con right-set-con center-container">
		<h1 class="desc-title">{%label.regionTimeZone%}</h1>
		<div class="vertical-center">
			<ul class="set-con">
				<li class="text-con text-con-guide">
					<label class="desc-lbl desc-lbl-guide">{%label.region%}</label>
					<span id="Area" class="select">
						<span class="value sel-value"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</ul>
			<ul class="set-con">
				<li class="text-con text-con-guide">
					<label class="desc-lbl desc-lbl-guide">{%label.timeZone%}</label>
					<span id="Region" class="select">
						<span class="value sel-value"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</ul>
			<div class="err-note err-guide hidden">
				<i class="err-icon icon_remind_line"></i>
				<p class="note-str"></p>
			</div>
			<div class="guide-btn-con">
				<input id="Save" class="btn guide-btn" type="button" value="{%btn.nextStep%}" />
			</div>
		</div>
	</div>
</div>
<%+footer%>