<style type="text/css">div.head-con{border-bottom-width:0}div.wan-type-img{position:relative;background-color:#f8f8f8;text-align:center;overflow:hidden}i.router{display:inline-block;background:url(/luci-static/images/network.png?_=20191016014108) no-repeat;background-size:contain;width:6.2rem;height:6rem}i.break-icon{color:#f13f3f;position:absolute;left:7rem;top:1.2rem;background-color:#f8f8f8;font-size:.8rem}#Detect{background-color:#1499e6}#WanPppoeSet{display:none}#WanStaticSet{display:none}div.wan-sta{margin-left:.25rem}i.wan-sta-icon{display:inline-block;font-size:.8rem;vertical-align:middle;text-indent:.35rem}i.icon_remind_line{color:#f34947}i.icon_select_on{color:#0bcd1e}p.status-detail{font-size:.5rem;width:70%;display:inline-block;font-size:.42rem;vertical-align:middle}#Retry{width:88%}ul.set-con input.text{width:5.75rem;border:1px solid #e9e9e9;border-radius:4px;padding:0 .25rem;color:#575757;height:1rem;font-size:.4rem;vertical-align:middle}</style>
<%+network-set-script%>
<script type="text/javascript">
(function(){
	<%
		local para = {
			network = {wan = {}},
			dev_feature = {network_set = {}}
		}

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

	var result = <%=result%>;
	var wan = result[K_MODULE].network.wan;
	var ipProtocol;
	var curWanType = wan.protocol;
	var statusHd = null;
	var currentState = stateman.current.name;
	var networkSet = result[K_MODULE].dev_feature.network_set;

	var WAN_TYPE_DHCP = "dhcp",
		WAN_TYPE_PPPoE = "pppoe",
		WAN_TYPE_STATIC_IP = "static",
		WAN_TYPE_PPTP = "pptp",
		WAN_TYPE_L2TP = "l2tp";

	var wanTypeAll = [{name:label.wanDHCP, value:WAN_TYPE_DHCP},
				   {name:label.wanPPPoE, value:WAN_TYPE_PPPoE},
				   {name:label.wanStatic, value:WAN_TYPE_STATIC_IP},
				   {name:label.wanPptp, value:WAN_TYPE_PPTP},
				   {name:label.wanL2tp, value:WAN_TYPE_L2TP}
				   ];

	var wanType = productSelect(wanTypeAll, networkSet.wan_type);

	initSelect("WanType", wanType, curWanType, function(){
		var nowSelect = $("#WanType").attr("data-value");

		$(".err-note").hide();
		setWantype(nowSelect);
	});

	setWantype(curWanType);

	function initPppoe(pppoe){
		var PppoeUser = pppoe.username;
		var PppoePwd = pppoe.password;
		var PppoeSer = pppoe.server;

		$("#PppoeUser").val(PppoeUser);
		$("#PppoePwd").val(PppoePwd);
		$("#PppoeServ").val(PppoeSer);
	}

	function initStaticIp(static){
		var ipVal = static.ip;
		var maskVal = static.netmask;
		var gwVal = static.gateway;
		var primDns = static.dns_pri;
		var secDns = static.dns_sec;

		$("#WanIpaddr").val(ipVal);
		$("#WanMask").val(maskVal);
		$("#WanGw").val(gwVal);
		$("#PrimDns").val(primDns);
		$("#SecDns").val(secDns);
	}

	function initPptp(pptp){
		$("#VpnServerIp").val(pptp.server);
		$("#VpnUser").val(pptp.username);
		$("#VpnPwd").val(pptp.password);
		$("#WanIpaddr").val(pptp.ip);
		$("#WanMask").val(pptp.netmask);
		$("#WanGw").val(pptp.gateway);
		$("#PrimDns").val(pptp.dns_pri);
		$("#SecDns").val(pptp.dns_sec);

		initRadio("IpProtocol", pptp.ip_protocol=="1"?"1":"0", function(idx){
			if (0 == idx){
				$("#WanStaticSet").hide();
				ipProtocol = "0";
			}else{
				$("#WanStaticSet").show();
				ipProtocol = "1";
			}
		});
	}

	function initL2tp(l2tp){
		$("#VpnServerIp").val(l2tp.server);
		$("#VpnUser").val(l2tp.username);
		$("#VpnPwd").val(l2tp.password);
		$("#WanIpaddr").val(l2tp.ip);
		$("#WanMask").val(l2tp.netmask);
		$("#WanGw").val(l2tp.gateway);
		$("#PrimDns").val(l2tp.dns_pri);
		$("#SecDns").val(l2tp.dns_sec);

		initRadio("IpProtocol", l2tp.ip_protocol=="1"?"1":"0", function(idx){
			if (0 == idx){
				$("#WanStaticSet").hide();
				ipProtocol = "0";
			}else{
				$("#WanStaticSet").show();
				ipProtocol = "1";
			}
		});
	}

	function setWantype(wanType){
		switch(wanType){
			case WAN_TYPE_DHCP:
				$("span.select-value").text(label.wanDHCP);
				$("div.wan-type-img").show();
				$("#WanPppoeSet").hide();
				$("#WanStaticSet").hide();
				$("#WanVpn").hide();
				$("#WanType").attr("data-value","dhcp");
				break;
			case WAN_TYPE_PPPoE:
				var para = {
					network:{pppoe: null},
				};
				apiGet(para, function(data){
					var pppoe = data[K_MODULE]["network"]["pppoe"];
					$("span.select-value").text(label.wanPPPoE);
					$("div.wan-type-img").show();
					$("#WanPppoeSet").show();
					$("#WanStaticSet").hide();
					$("#WanVpn").hide();
					$("#WanType").attr("data-value","pppoe");
					initPppoe(pppoe);
				});
				break;
			case WAN_TYPE_STATIC_IP:
				var para = {
					network:{static: null},
				};
				apiGet(para, function(data){
					var static = data[K_MODULE]["network"]["static"];
					$("span.select-value").text(label.wanStatic);
					$("div.wan-type-img").hide();
					$("#WanPppoeSet").hide();
					$("#WanStaticSet").show();
					$("#WanVpn").hide();
					$("#WanType").attr("data-value","static");
					initStaticIp(static);
				});
				break;
			case WAN_TYPE_PPTP:
				var para = {
					network:{pptp: null},
				};
				apiGet(para, function(data){
					var pptp = data[K_MODULE]["network"]["pptp"];
					$("span.select-value").text(label.wanPptp);
					$("#WanPppoeSet").hide();
					$("#WanStaticSet").hide();
					$("#WanVpn").show();
					$("#WanType").attr("data-value","pptp");
					initPptp(pptp);
				});
				break;
			case WAN_TYPE_L2TP:
			default:
				var para = {
					network:{l2tp: null},
				};
				apiGet(para, function(data){
					var l2tp = data[K_MODULE]["network"]["l2tp"];
					$("span.select-value").text(label.wanL2tp);
					$("#WanPppoeSet").hide();
					$("#WanStaticSet").hide();
					$("#WanVpn").show();
					$("#WanType").attr("data-value","l2tp");
					initL2tp(l2tp);
				});
				break;
		}
	}

	function showWanState(state, stateStr){
		if (state){// wan connected
			$("i.wan-sta-icon").removeClass("icon_remind_line").addClass("icon_select_on");
			$("p.status-detail").css("color","#575757").text(stateStr);
			$("i.break-icon").hide();
		}else{// wan disconnected
			$("i.wan-sta-icon").removeClass("icon_select_on").addClass("icon_remind_line");
			$("p.status-detail").css("color","#F34947").text(stateStr);
			$("i.break-icon").show();
		}
	}

	//上网状态检测
	function refreshWanState(){
		var para = {
			network:{wan_status:null},
			wisp:{config:null}
		};

		apiGet(para, function(data){
			if (currentState != stateman.current.name){
				return;
			}

			var wanStatus = data[K_MODULE]["network"]["wan_status"];
			var netStatus = wanStatus["internet_status"];
			var code = wanStatus["status_code"];
			var wispState = data[K_MODULE]["wisp"]["config"];
			var wispEnable = wispState.enable;

			if ("1" == code){ // WAN口未连接
				$("div.detect").hide();
			}else{
				// 已连接，可以开启上网类型检测
				$("div.detect").show();
			}

			if ("1" == netStatus){	// 能上网
				showWanState(true, label.wanOk);
			}else{	// 不能上网
				if ("1" == wispEnable){	// 开启无线扩展
					if ("1" == wispState.connected){
						showWanState(false, label.wispInternet);
					}else{
						showWanState(false, label.wispFail);
					}
				}else{	// 未开启无线扩展
					if ("1" == code){
						showWanState(false, label.wanError);
					}else{
						showWanState(false, label.internetInterrupt);
					}
				}
			}

			clearTimeout(statusHd);
			statusHd = $.setTimeout(refreshWanState, 3000);
		});
	}

	//上网方式检测
	function detectWanType(){
		var para = {
			network:{wan_detection:{action:"start"}}
		};

		apiGet(para);
	}

	function getWanDetectionState(){
		var para = {
			network:{wan_detection:{action:"get"}}
		};

		apiGet(para, function(data){
			var code = data[ERR_CODE];
			if (E_NONE == code){
				var info = data[K_MODULE]["network"]["wan_detection"];
				if ("2" == info.running_status){ // 上网方式检测完成
					closeLoading();

					if ("1" !== info.status_code){ // wan口连接，检测成功
						var wanType = info.protocol;
						setWantype(wanType);
					}
				}else{
					// 上网方式检测还未完成，轮询...
					$.setTimeout(getWanDetectionState, 2000);
				}
			}else{
				$.setTimeout(getWanDetectionState, 2000);
			}
		});
	}

	function getWanType(){
		showLoading(label.wanChecking);
		detectWanType();// 通知后台进行上网方式检测
		$.setTimeout(getWanDetectionState, 2000);// 轮询上网方式检测结果
	}

	$("#Detect").click(function(){
		$(".err-note").hide();
		getWanType();
	});

	refreshWanState();

	// static IP set
	function saveStatic(){
		var wanConf = {};
		var data = {};
		var para = {};

		para.network = {};
		para.network.wan = wanConf;
		wanConf.protocol = 'static';
		para.network.static = data;
		data.ip = $("#WanIpaddr").val();
		data.netmask = $("#WanMask").val();
		data.gateway = $("#WanGw").val();
		data.dns_mode = "1";
		data.dns_pri = $("#PrimDns").val();
		data.dns_sec = $("#SecDns").val();

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

		if (handleError(checkNetworkDns(data.dns_pri, data.dns_sec))){
			return;
		}

		showLoading(label.saving);
		apiSetWithModule("network", para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				var time = getMaxWaitTime(ret);
				$.setTimeout(function(){
					closeLoading();

					clearTimeout(statusHd);
					statusHd = $.setTimeout(refreshWanState, 3000);
				}, time * 1000);
			}else{
				handleError(code);
				closeLoading();
			}
		});
	}

	// DHCP set
	function saveDhcp(){
		var wanConf = {};
		var para = {};

		para.network = {};
		para.network.wan = wanConf;
		para.network.dhcp = {};
		wanConf.protocol = 'dhcp';

		showLoading(label.saving);
		apiSetWithModule("network", para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				var time = getMaxWaitTime(ret);
				$.setTimeout(function(){
					closeLoading();

					clearTimeout(statusHd);
					statusHd = $.setTimeout(refreshWanState, 3000);
				}, time * 1000);
			}else{
				handleError(code);
				closeLoading();
			}
		});
	}

	// PPPoE set
	function savePppoe(){
		var wanConf = {};
		var data = {};
		var para = {};

		para.network = {};
		para.network.wan = wanConf;
		wanConf.protocol = 'pppoe';
		para.network.pppoe = data;
		data.username = $("#PppoeUser").val();
		data.password = $("#PppoePwd").val();
		data.server = $("#PppoeServ").val();

		if (handleError(checkUserName(data.username, "pppoe"))){
			return;
		}

		if (handleError(checkPassWord(data.password, "pppoe"))){
			return;
		}

		if (handleError(checkServer(data.server, "pppoe"))){
			return;
		}

		showLoading(label.saving);
		apiSetWithModule("network", para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				var time = getMaxWaitTime(ret);
				$.setTimeout(function(){
					closeLoading();

					clearTimeout(statusHd);
					statusHd = $.setTimeout(refreshWanState, 3000);
				}, time * 1000);
			}else{
				handleError(code);
				closeLoading();
			}
		});
	}

	// PPTP/L2TP set
	function saveVpn(){
		var wanConf = {};
		var data = {};
		var para = {};
		var vpnType;
		para.network = {};
		para.network.wan = wanConf;
		wanConf.protocol = $("#WanType").attr("data-value");

		if ("pptp" == $("#WanType").attr("data-value")){
			para.network.pptp = data;
			vpnType = "pptp";
		}else{
			para.network.l2tp = data;
			vpnType = "l2tp";
		}

		data.server = $("#VpnServerIp").val();
		data.username = $("#VpnUser").val();
		data.password = $("#VpnPwd").val();
		data.ip_protocol = ipProtocol;
		if ("1" == ipProtocol){
			data.ip = $("#WanIpaddr").val();
			data.netmask = $("#WanMask").val();
			data.gateway = $("#WanGw").val();
			data.dns_mode = "1";
			data.dns_pri = $("#PrimDns").val();
			data.dns_sec = $("#SecDns").val();
		}

		if (handleError(checkServer(data.server, vpnType))){
			return;
		}

		if (handleError(checkUserName(data.username, vpnType))){
			return;
		}

		if (handleError(checkPassWord(data.password, vpnType))){
			return;
		}

		if ("1" == ipProtocol){
			if(handleError(checkStaticConf(data.ip, data.netmask, data.gateway))){
				return;
			}

			if (handleError(checkNetworkDns(data.dns_pri, data.dns_sec))){
				return;
			}
		}

		showLoading(label.saving);
		apiSetWithModule("network", para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				var time = getMaxWaitTime(ret);;

				$.setTimeout(function(){
					closeLoading();

					clearTimeout(statusHd);
					statusHd = $.setTimeout(refreshWanState, 3000);
				}, time * 1000);
			}else{
				handleError(code);
				closeLoading();
			}
		});
	}

	function sendConfDatas(){
		var selStr = $("#WanType").attr("data-value");

		switch(selStr){
		case WAN_TYPE_DHCP:
			saveDhcp();
			break;
		case WAN_TYPE_PPPoE:
			savePppoe();
			break;
		case WAN_TYPE_STATIC_IP:
			saveStatic();
			break;
		case WAN_TYPE_PPTP:
		case WAN_TYPE_L2TP:
			saveVpn();
			break;
		default:
			break;
		}
	}

	$("#SaveConf").click(sendConfDatas);

})();
</script>
<div class="head-con">
	<a href="javascript:history.go(-1);" class="head-btn-l"><i class="head-btn icon icon_back"></i></a>
	<h1 class="head-title">{%label.networkset%}</h1>
</div>
<div class="set-con below-head">
	<div class="wan-type-img">
		<i class="router"></i>
		<i class="break-icon icon_error hidden"></i>
	</div>
	<div id="WanSta" class="wan-sta">
		<i class="wan-sta-icon"></i>
		<p class="status-detail"></p>
	</div>
	<div class="btn-con detect hidden">
		<input id="Detect" class="btn" type="button" value="{%btn.autoDetect%}" />
	</div>
	<ul class="set-con">
		<label class="desc-lbl">{%label.wanType%}</label>
		<li class="text-con">
			<span id="WanType" class="select" data-value="0">
				<span class="select-value">{%label.wanDHCP%}</span>
				<i class="tip icon_list-expansion"></i>
			</span>
		</li>
	</ul>
	<div id="WanPppoeSet">
		<ul class="set-con">
			<label class="desc-lbl">{%label.pppoeUser%}</label>
			<li class="text-con">
				<input id="PppoeUser" class="text hover" maxLength="32" value="" />
			</li>
		</ul>
		<ul class="set-con">
			<label class="desc-lbl">{%label.pppoePasswd%}</label>
			<li class="text-con">
				<input id="PppoePwd" class="text hover" maxLength="32" value="" /><i class="tip icon-eye" data-value="0"></i>
			</li>
		</ul>
		<ul class="set-con">
			<label class="desc-lbl">{%label.serName%}</label>
			<li class="text-con">
				<input id="PppoeServ" class="text hover" placeholder="{%label.allowNoWrite%}" maxLength="64" value="" />
			</li>
		</ul>
	</div>
	<div id="WanVpn" class="hidden">
		<ul class="set-con">
			<label class="desc-lbl">{%label.vpnServer%}</label>
			<li class="text-con">
				<input id="VpnServerIp" class="text hover" maxLength="64" value="0.0.0.0" />
			</li>
		</ul>
		<ul class="set-con">
			<label class="desc-lbl">{%label.vpnName%}</label>
			<li class="text-con">
				<input id="VpnUser" class="text hover" maxLength="32" value="" />
			</li>
		</ul>
		<ul class="set-con">
			<label class="desc-lbl">{%label.vpnPassword%}</label>
			<li class="text-con">
				<input id="VpnPwd" class="text hover" type="password" maxLength="32" value="" /><i class="tip icon-eye" data-value="0"></i>
			</li>
		</ul>
		<ul class="set-con set-con-radio">
			<label class="desc-lbl"></label>
			<li class="text-con">
				<span id="IpProtocol" class="radio-group">
					<span class="radio uncheck">
						<i class="uncheck icon_radiobox_off"></i><i class="checked icon_radiobox_on"></i>
						<label>{%label.dynamicIp%}</label>
					</span>
					<span class="radio radio-r uncheck">
						<i class="uncheck icon_radiobox_off"></i><i class="checked icon_radiobox_on"></i>
						<label>{%label.staticIp%}</label>
					</span>
				</span>
			</li>
		</ul>
	</div>
	<div id="WanStaticSet">
		<ul class="set-con">
			<label class="desc-lbl">{%label.ipaddr%}</label>
			<input id="WanIpaddr" class="text hover" maxLength="15" value="0.0.0.0" />
		</ul>
		<ul class="set-con">
			<label class="desc-lbl">{%label.netmask%}</label>
			<input id="WanMask" class="text hover" maxLength="15" value="0.0.0.0" />
		</ul>
		<ul class="set-con">
			<label class="desc-lbl">{%label.gateway%}</label>
			<input id="WanGw" class="text hover" maxLength="15" value="0.0.0.0" />
		</ul>
		<ul class="set-con">
			<label class="desc-lbl">{%label.firstDns%}</label>
			<input id="PrimDns" class="text hover" maxLength="15" value="0.0.0.0" />
		</ul>
		<ul class="set-con">
			<label class="desc-lbl">{%label.secDns%}</label>
			<input id="SecDns" class="text hover" maxLength="15" value="0.0.0.0" />
		</ul>
	</div>
	<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="SaveConf" class="btn" type="button" value="{%btn.save%}" />
	</div>
</div>