<style type="text/css">div.link-message{text-align:center}div.link-img{position:relative;margin-top:3.2rem;overflow:hidden}i.link-router{display:inline-block;background:url(/luci-static/images/pic-router_h5.png?_=20191016014108) no-repeat;background-size:contain;width:7.7rem;height:2.3rem;margin-left:.2rem}i.break-icon{color:#f13f3f;position:absolute;left:6.6rem;top:.6rem;background-color:#f8f8f8;font-size:.8rem}div.router-note{margin-bottom:2.5rem}div.router-str{color:#3f4044;display:inline-block;font-size:.35rem}div.old-router{width:48%}div.new-router{width:48%}p.link-tip{width:80%;font-size:.417rem}#Start{background-color:#fe8f19}</style>
<script>
(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").show();
		}else{
			showLinkState(link, label.connectTip);
			$("#Start").hide();
		}
	}

	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(){
		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();
})();
</script>
<div class="head-con">
	<h1 class="head-title">{%label.findPwd%}</h1>
</div>
<div class="set-con below-head link-message">
	<div class="link-img">
		<i class="link-router"></i>
		<i class="break-icon icon_error hidden"></i>
	</div>
	<div class="router-note">
		<div class="router-str old-router">{%label.oldRouterWan%}</div>
		<div class="router-str new-router">{%label.newRouterLan%}</div>
	</div>
	<div class="err-note">
		<p class="note-str link-tip">{%label.connectTip%}</p>
	</div>
	<div class="btn-con">
		<input id="Back" class="btn btn-left" type="button" value="{%btn.back%}"/>
		<input id="Start" class="btn btn-right" type="button" value="{%btn.startFindPwd%}"/>
	</div>
</div>
