<style type="text/css">div.router-link{vertical-align:middle;width:628px;height:223px;margin:104px auto 45px}div.pic-router-bg{background:url(/luci-static/images/pic-router_pc.png?_=20191016014108) no-repeat;background-size:628px 223px}p.note-tip{margin-top:133px;text-align:center}div.router-str{color:#3f4044;font-size:14px;display:inline-block;width:258px;margin-top:14px}div.old-router{text-align:left}div.new-router{text-align:right}input.btn-right{margin-left:28px;background-color:#ff7800}input.router-unlinked{background-color:#e8e8e8;color:#909396}li.current-step h2{background-color:#13b1d8}input.btn-left{margin-left:0}</style>
<script type="text/javascript">
(function(){
	<%
		local para = {find_pwd = {link_status = {}}}
		local data = tpl_get_data(para, true)
	-%>
	var result = <%=data%>;
	var currentState = stateman.current.name;

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

		var linkStatus = ret.find_pwd.link_status;
		var link = linkStatus["status"];
		if ("1" == link){
			showLinkState(link, label.connectSuccess);
			$("#Start").removeClass("router-unlinked");
		}else{
			showLinkState(link, label.connectTip);
			$("#Start").addClass("router-unlinked");
		}
	}

	function showLinkState(state, stateStr){
		if (state){
			$("p.note-str").css("color","#FF7800").text(stateStr);
		}else{
			$("p.note-str").css("color","#F34947").text(stateStr);
		}
	}

	var refreshLindStateHd = null;
	function refreshLinkState(){
		var para = {
			find_pwd:{link_status:null}
		};

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

			refreshLindStateHd = $.setTimeout(refreshLinkState, 2000);
		});
	}

	$("#Back").click(function(){
		stateman.go("guideNetworkSet");
	});

	$("#Start").click(function(){
		if (!($("#Start").hasClass("router-unlinked"))){
			showLoading(label.findingPppoePwd);
			clearTimeout(refreshLindStateHd);

			var para = {
				find_pwd:{config:null}
			};

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

				var data = ret.find_pwd.config;

				var setValue = {};
				setValue.find_success = data.find_success;
				setValue.user = data.user;
				setValue.password = data.password;
				for (var k in setValue){
					sessionLS.setItem(k, setValue[k]);
				}
				stateman.go("findPppoePwd");
			});
		}
	});

	initPage(result);
	refreshLinkState();

	var scroll = new NiceScroll("GuideCon");
	scroll.init();
})();
</script>
<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>
</div>
<div id="GuideCon" class="guide">
	<div class="router-link pic-router-bg">
		<div class="err-note">
			<p class="note-str note-tip">{%label.connectTip%}</p>
		</div>
		<div class="router-str old-router">{%label.oldRouterWan%}</div>
		<div class="router-str new-router">{%label.newRouterLan%}</div>
	</div>
	<div class="fun-btn">
		<input id="Back" class="btn guide-btn btn-left" type="button" value="{%btn.back%}"/>
		<input id="Start" class="btn guide-btn btn-right router-unlinked" type="button" value="{%btn.startFindPwd%}"/>
	</div>
</div>
<%+footer%>