<style type="text/css">#Help{width:25%}li.current-step h2{background-color:#13b1d8}div.guide-sta{margin:20px auto 0;margin-left:130px;text-align:left}i.wan-sta-icon{display:inline-block;font-size:24px;line-height:19px;margin-right:2px;vertical-align:top}i.icon_remind_line{color:#f34947}i.icon_select_on{color:#0bcd1e}p.status-detail{display:inline-block;font-size:14px;width:284px}div.btn-con{border:0;text-align:left}#Detect{background-color:#1499e6;margin:10px 0 10px 136px;width:300px}span.adv-set{cursor:pointer;display:inline-block;margin-right:110px;width:40px;line-height:20px;color:#fe8f19;font-size:16px}div.adv-top{border-top:1px solid #DDD;padding:10px 0 0}i.step-2{background:url(/luci-static/images/step2.png?_=20191016014108) no-repeat}</style>
<%+network-set-script%>
<script type="text/javascript">
(function(){
	<%
		local para = {
			network = {wan = {}, static = {}, dhcp = {}, pppoe = {}, pptp = {}, l2tp = {}},
			dev_feature = {network_set = {}, route_info = {}}
		}

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

	var result = <%=result%>;
	var wan = result[K_MODULE].network.wan;
	var curWanType = wan.protocol;
	var ipProtocol;
	var statusHd = null;
	var next = "guideWifiSet";
	var currentState = stateman.current.name;
	var networkSet = result[K_MODULE].dev_feature.network_set;
	var routeInfo = result[K_MODULE].dev_feature.route_info;
	var networkConnectCap = routeInfo.network_connect;

	var static = result[K_MODULE].network.static;
	var dhcp = result[K_MODULE].network.dhcp;
	var pppoe = result[K_MODULE].network.pppoe;
	var pptp = result[K_MODULE].network.pptp;
	var l2tp = result[K_MODULE].network.l2tp;

	function showPrevious() {
		if (ROUTER.guideList.length > 3){
			$("#Previous").show();
		}
	}
	function showFindPwd(showFlag) {
		if(!parseInt(networkSet.findPwd))
			return ;
		if("hide" == showFlag){
			$("#FindPwd").hide();
		} else {
			$("#FindPwd").show();
			$("#Save").addClass("guide-btn-right");
		}
	}
	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);
		setHelpMsg(nowSelect);
	});

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

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

	function initStaticIp(){
		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(){
		$("#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();
				$("#DnsSet").show();
				ipProtocol = "0";
			}else{
				$("#WanStaticSet").show();
				$("#DnsSet").hide();
				ipProtocol = "1";
			}
		});
	}

	function initL2tp(){
		$("#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();
				$("#DnsSet").show();
				ipProtocol = "0";
			}else{
				$("#WanStaticSet").show();
				$("#DnsSet").show();
				ipProtocol = "1";
			}
		});
	}


	setWantype(curWanType);

	function setWantype(wanType){
		showPrevious();
		if(wanType == 'dhcp'){
			$("#WanPppoeSet").hide();
			$("#WanStaticSet").hide();
			$("#WanVpn").hide();
			showFindPwd("hide");
		}else if(wanType == 'pppoe'){
			$("#WanPppoeSet").show();
			$("#WanStaticSet").hide();
			$("#WanVpn").hide();
			$("#Previous").hide();
			showFindPwd("show");
			initPppoe();
		}else if(wanType == 'static'){
			$("#WanPppoeSet").hide();
			$("#WanStaticSet").show();
			$("#WanVpn").hide();
			showFindPwd("hide");
			initStaticIp();
		}else if(wanType == 'pptp'){
			$("#WanPppoeSet").hide();
			$("#WanStaticSet").hide();
			$("#WanVpn").show();
			showFindPwd("hide");
			initPptp();
		}else{
			$("#WanPppoeSet").hide();
			$("#WanStaticSet").hide();
			$("#WanVpn").show();
			initL2tp();
		}
	}

	function setHelpMsg(wanType){
		var wanDhcp = helpStr.wanDhcp;
		var wanDhcpTip = helpStr.wanDhcpTip;
		var wanPppoe = helpStr.wanPppoe;
		var wanPppoeTip = helpStr.wanPppoeTip;
		if ("1" == networkConnectCap){
			wanDhcp = helpStr.wanDhcpSec;
			wanDhcpTip = helpStr.wanDhcpTipSec;
			wanPppoe = helpStr.wanPppoeSec;
			wanPppoeTip = helpStr.wanPppoeTipSec;
		}

		if(wanType == 'dhcp'){
			$("#Type").text(wanDhcp);
			$("#TypeTip").text(wanDhcpTip);
		}else if(wanType == 'pppoe'){
			$("#Type").text(wanPppoe);
			$("#TypeTip").text(wanPppoeTip);
		}else if(wanType == 'static'){
			$("#Type").text(helpStr.wanStatic);
			$("#TypeTip").text(helpStr.wanStaticTip);
		}else if(wanType == 'pptp'){
			$("#Type").text(helpStr.wanPptp);
			$("#TypeTip").text(helpStr.wanPptpTip);
		}else{
			$("#Type").text(helpStr.wanL2tp);
			$("#TypeTip").text(helpStr.wanL2tpTip);
		}
	}

	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);
		}else{// wan disconnected
			$("i.wan-sta-icon").removeClass("icon_select_on").addClass("icon_remind_line");
			$("p.status-detail").css("color","#F34947").text(stateStr);
		}
	}

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

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

			var wanStatus = data[K_MODULE]["network"]["wan_status"];
			var code = wanStatus["status_code"];
			if ("1" == code){ // WAN口未连接
				showWanState(false, label.wanError);
				$("div.detect").hide();
			}else{
				showWanState(true, label.wanOk);
				if (parseInt(networkSet.detection)){
					$("div.detect").show();
				}
			}

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

	//上网方式检测
	function detectWanType(){
		showLoading(label.wanChecking);
		apiGet({network:{wan_detection:{action:"start"}}});
	}

	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"];
				switch(parseInt(info.running_status, 10)){
				case 0:
					// 上网方式检测还未开始，触发检测
					detectWanType();
					break;
				case 1:
					// 上网方式检测还未完成，轮询...
					$.setTimeout(getWanDetectionState, 2000);
					break;
				case 2:
					closeLoading();

					if ("1" !== info.status_code){ // wan口连接，检测成功
						var wanType = info.protocol;
						id("WanType").changeSel(wanType);
						setWantype(wanType);
						setHelpMsg(wanType);
					}
					break;
				default:
					closeLoading();
					console.warn("unknown network.wan_detection.running_status");
				}
			}else{
				$.setTimeout(getWanDetectionState, 2000);
			}
		});
	}

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

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

	if (parseInt(networkSet.detection)){
		getWanType();
	}

	// 延迟1秒获取WAN口状态，防止大量请求阻塞
	$.setTimeout(refreshWanState, 2000);

	// 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();

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

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

		showLoading(label.saving);
		apiSetWithModule("network", para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				var time = getMaxWaitTime(ret);
				$.setTimeout(function(){
					stateman.go(next);
				}, time * 1000);
			}else{
				closeLoading();
				handleError(code);
			}
		});
	}

	// 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(){
					stateman.go(next);
				}, time * 1000);
			}else{
				closeLoading();
				handleError(code);
			}
		});
	}

	// 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();

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

		if (handleError(checkPassWord(data.password, "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(){
					stateman.go(next);
				}, 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();
		}

		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, ""))){
				return;
			}
		}

		showLoading(label.saving);
		apiSetWithModule("network", para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				var time = getMaxWaitTime(ret);
				$.setTimeout(function(){
					stateman.go(next);
				}, time * 1000);
			}else{
				handleError(code);
				closeLoading();
			}
		});
	}

	$("#Save").click(function(){
		next = $("li.current-step").next().attr("id");

		var wanType = $("#WanType").attr("data-value");
		switch(wanType){
		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;
		}
	});
	$("#FindPwd").click(function(){
		stateman.go("checkRouterLink");
	});

	$("#Previous").click(function(){
		var prev = $("li.current-step").prev().attr("id");
		stateman.go(prev);
	});

	var scroll = new NiceScroll("GuideCon");
	scroll.init();
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li id="Type" class="title"></li>
		<li id="TypeTip" class="content"></li>
		<li class="summary">{%helpStr.specialCharacter%}</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>
<input type="password" style="position:fixed;top:-9999px;" /><!--修复chrome上密码自动填充问题-->
<div class="guide">
	<div class="left-image-con center-container">
		<div class="image-con vertical-center">
			<h1 class="guide-title">{%label.networkset%}</h1>
			<img class="left-image" src="/luci-static/images/network.png?_=20191016014108" alt="{%label.networkset%}" />
		</div>
	</div>
	<div id="GuideCon" class="set-con right-set-con center-container">
		<h1 class="desc-title">{%label.networkset%}</h1>
		<div class="vertical-center">
			<div id="WanSta" class="guide-sta">
				<i class="wan-sta-icon"></i>
				<p class="status-detail"></p>
			</div>
			<div class="btn-con detect hidden">
				<input id="Detect" class="btn detect-btn" type="button" value="{%btn.autoDetect%}" />
			</div>
			<ul class="set-con">
				<li class="text-con text-con-guide">
					<label class="desc-lbl desc-lbl-guide">{%label.wanType%}</label>
					<span id="WanType" class="select">
						<span class="value sel-value">{%label.wanDHCP%}</span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</ul>
			<div id="WanPppoeSet" class="hidden">
				<ul class="set-con">
					<li class="text-con text-con-guide">
						<label class="desc-lbl desc-lbl-guide">{%label.pppoeUser%}</label>
						<input id="PppoeUser" class="text hover" maxLength="32" value="" />
					</li>
				</ul>
				<ul class="set-con">
					<li class="text-con text-con-guide">
						<label class="desc-lbl desc-lbl-guide">{%label.pppoePasswd%}</label>
						<input id="PppoePwd" class="text hover" type="password" autocomplete="new-password" maxLength="32" value="" /><i class="tip icon-eye" data-value="0"></i>
					</li>
				</ul>
			</div>
			<div id="WanVpn" class="hidden">
				<ul class="set-con">
					<li class="text-con text-con-guide">
						<label class="desc-lbl desc-lbl-guide">{%label.vpnServer%}</label>
						<input id="VpnServerIp" class="text hover" maxLength="64" value="0.0.0.0" />
					</li>
				</ul>
				<ul class="set-con">
					<li class="text-con text-con-guide">
						<label class="desc-lbl desc-lbl-guide">{%label.vpnName%}</label>
						<input id="VpnUser" class="text hover" maxLength="32" value="" />
					</li>
				</ul>
				<ul class="set-con">
					<li class="text-con text-con-guide">
						<label class="desc-lbl desc-lbl-guide">{%label.vpnPassword%}</label>
						<input id="VpnPwd" class="text hover" type="password" autocomplete="new-password" maxLength="32" value="" /><i class="tip icon-eye" data-value="0"></i>
					</li>
				</ul>
				<ul class="set-con">
					<li class="text-con text-con-guide">
						<label class="desc-lbl desc-lbl-guide"></label>
						<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" class="hidden">
				<ul class="set-con">
					<li class="text-con text-con-guide">
						<label class="desc-lbl desc-lbl-guide">{%label.ipaddr%}</label>
						<input id="WanIpaddr" class="text hover" maxLength="15" value="0.0.0.0" />
					</li>
				</ul>
				<ul class="set-con">
					<li class="text-con text-con-guide">
						<label class="desc-lbl desc-lbl-guide">{%label.netmask%}</label>
						<input id="WanMask" class="text hover" maxLength="15" value="0.0.0.0" />
					</li>
				</ul>
				<ul class="set-con">
					<li class="text-con text-con-guide">
						<label class="desc-lbl desc-lbl-guide">{%label.gateway%}</label>
						<input id="WanGw" class="text hover" maxLength="15" value="0.0.0.0" />
					</li>
				</ul>
				<ul class="set-con">
					<li class="text-con text-con-guide">
						<label class="desc-lbl desc-lbl-guide">{%label.firstDns%}</label>
						<input id="PrimDns" class="text hover" maxLength="15" value="0.0.0.0" />
					</li>
				</ul>
			</div>
			<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="FindPwd" class="btn guide-btn hidden" type="button" value="{%btn.pppoeFindPwd%}" />
				<input id="Previous" class="btn guide-btn hidden" type="button" value="{%btn.previousStep%}" />
				<input id="Save" class="btn guide-btn guide-btn-right" type="button" value="{%btn.nextStep%}" />
			</div>
		</div>
	</div>
</div>
<%+footer%>
<script type="text/javascript">
