<script type="text/javascript">
(function(){
	<%
		local para = {
			network = {lan = {}},
			dev_feature = {lan_set = {}}
		}

		local result = tpl_get_data(para)
		local lan = result[K_MODULE].network.lan
		local reboot_confirm = result[K_MODULE].dev_feature.lan_set.reboot_confirm
	-%>

	var ip = '<%=lan.ip%>';
	var netmask = '<%=lan.netmask%>';
	var reboot_confirm = <%=reboot_confirm%>;

	$("#LanIp").val(ip);
	$("#LanMask").val(netmask);

	function checkLanIp(ip){
		var err = checkIp(ip);
		switch(err){
		case E_BLANK:
			return E_LAN_IP_BLANK;
		case E_INVIPFMT:
			return E_LAN_IP_FORMAT;
		case E_INVIP:
			return E_LAN_IP_ILLEGAL;
		}
		return E_NONE;
	}

	function checkLanMask(mask){
		var err = checkMask(mask);
		switch(err){
		case E_BLANK:
			return E_LAN_NETMASK_BLANK;
		case E_INVMASKFMT:
			return E_LAN_NETMASK_FORMAT;
		case E_INVMASK:
			return E_LAN_NETMASK_ILLEGAL;
		}
		return E_NONE;
	}

	function checkLanIpMask(ip, mask) {
		var err = checkIpMask(ip, mask);

		switch(err){
		case E_INVNETID:
			return E_LAN_NET_ILLEGAL;
		case E_INVHOSTID:
			return E_LAN_NETHOST_ILLEGAL;
		}
		return E_NONE;
	}

	$("#Save").click(function(){
		var data = {};
		var para = {};
		para.network = {};
		para.network.lan = data;

		data.ip = $("#LanIp").val();
		data.netmask = $("#LanMask").val();

		if (handleError(checkLanIp(data.ip))){
			return;
		}

		if (handleError(checkLanMask(data.netmask))){
			return;
		}

		if (handleError(checkLanIpMask(data.ip, data.netmask))){
			return;
		}

		var thenSave = function(){
			if(reboot_confirm){
				showConfirm(label.lanSetTip, function(choose){
					if (choose){
						saveLan(para);
					}
				});
			}else{
				saveLan(para);
			}
		}

		var hostNum = (transIp(data.netmask) ^ 0xFFFFFFFF) + 1;
		if (hostNum < 16){
			showConfirm(label.lanMaskTip, function(choose){
				if (choose){
					thenSave();
				}
			});
		}else{
			thenSave();
		}
	});

	function saveLan(para){
		showLoading(label.saving);
		apiSet(para, function(ret){
			var code = ret[ERR_CODE];
			handleError(code, showNote)?closeLoading():refreshLan(ret);
		});
	}

	function refreshLan(ret){
		var url = "http://" + $("#LanIp").val();
		if(reboot_confirm){
			showProgressBar(label.lanSet, label.rebooting, ROUTER.time.reboot, function(){
				window.location.href = url;
			});
		}else{
			var time = ret[K_MODULE].network.lan.wait_time;
			$.setTimeout(function(){
				closeLoading();
				window.location.href = url;
			}, time * 1000);
		}

		var connected = 0;
		var detect = new Detect({
			tick:3000,
			url:url + '/luci-static/images/phicomm.png'
		});
		stateman.on({
			'connected': function(state){
				if(++connected >= 5){
					console.log('detect connected, jumping');
					window.location.href = url;
				}
			},
			'disconnect': function(state){
				connected = 0;
			}
		});
		detect.start();
	}
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/lan.png?_=20191016014108" />
			<span class="help-title">{%label.lanSet%}</span>
		</li>
		<li class="title">{%helpStr.ip%}</li>
		<li class="content">{%helpStr.ipTip%}</li>
		<li class="title">{%helpStr.netmask%}</li>
		<li class="content">{%helpStr.netmaskTip%}</li>
		<li class="summary">{%helpStr.netmaskTip1%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/lan.png?_=20191016014108" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.lanSet%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con">
		<li class="text-con">
			<label class="desc-lbl">{%label.ipaddr%}</label>
			<input id="LanIp" class="text hover" maxLength="15" value="" />
		</li>
	</ul>
	<ul class="set-con">
		<li class="text-con">
			<label class="desc-lbl">{%label.netmask%}</label>
			<input id="LanMask" class="text hover" maxLength="15" value="" />
		</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">
		<input id="Save" class="btn" type="button" value="{%btn.save%}" />
	</div>
</div>