<style type="text/css">#Con{background-color:#f0f0f0}#AddDev{position:fixed;top:0;line-height:1.111rem;text-align:right;font-size:.4rem;color:#575757;right:.45rem;display:none}ul.list{margin:0 .5rem}a.list-item{text-decoration:none}li.list-item{font-size:0;height:1.25rem;line-height:1.25rem;overflow:hidden;border-bottom:1px solid #e9e9e9}a.list-item:last-child li.list-item{border-bottom:0}div.left-con{float:left;width:20%}i.verdor-icon{font-size:1.25rem;display:inline-block}div.right-con{float:right;width:80%}p.list-con-l{font-size:0;float:left}p.list-con-r{position:relative;color:#949494;font-size:.4rem;float:right;max-width:2rem;text-align:right;min-width:2rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}span.list-con1{color:#575757;font-size:.417rem}i.dev-other{float:right;line-height:1.25rem;font-size:.5rem;color:#a8a8a8;-webkit-transform:rotate(180deg)}</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			parent_ctrl = {config = {}, parent_list = {}},
			device_manage = {client_list = {}}
		}

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

	var parentInfo = <%=result%>;

	function setTimeData(hour, minute){
		var time;
		time = hour * 3600;
		time += minute * 60;
		return time;
	}

	function getCurTime(){ // HourMinutes   1012
		var date = new Date();
		var curtime = setTimeData(date.getHours(), date.getMinutes());
		return curtime;
	}

	function getCurDay(){
		var date = new Date();
		var day = ""+date.getDay();
		if(day == "0"){
			return 6;
		}
		return Number(day)-1;
	}

	init(parentInfo);

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

		var switchParent = ret.parent_ctrl.config;

		initSwitch("SwitchParent", switchParent.enable, function(state,init){
			if (1 == state){
				$("#ParentList").show();
				$("#AddDev").show();
			}else{
				$("#ParentList").hide();
				$("#AddDev").hide();
			}

			if (!init){
				var data = {};
				var para = {};
				para.parent_ctrl = {};
				para.parent_ctrl.config = data;

				data.enable = $("#SwitchParent").attr("data-value");
				showLoading(label.saving);
				apiSet(para, function(){
					$.setTimeout(function(){
						closeLoading();
					}, 2000);
				});
			}
		});
	}

	var devList = [];
	var parentList = parentInfo[K_MODULE].parent_ctrl.parent_list;

	getDevlist(parentList);
	parentRule(devList);

	function checkDev(rule){
		for(var i = 0; i < devList.length; ++i){
			if (rule["mac"] == devList[i]["mac"]){
				return i;
			}
		}
		return -1;
	}

	function getDevlist(rules){
		for(var i = 0; i < rules.length; ++i){
			var flag = checkDev(rules[i]);
			if(flag == -1){
				var dev={};
				dev["name"] = rules[i]["name"];
				dev["mac"] = rules[i]["mac"];
				dev["brand"] = rules[i]["brand"];
				dev["AccessNetwork"] = checkAccessNetwork(rules[i]);
				devList.push(dev);
			}else{
				devList[flag]["AccessNetwork"] = checkAccessNetwork(rules[i]);
			}
		}
	}

	function checkAccessNetwork(client){
		for (var i = 0; i < devList.length; i++){
			if (devList[i]["mac"] == client["mac"]){
				if (devList[i]["AccessNetwork"] == label.allow){
					return label.allow;
				}
			}
		}

		if (Number(getCurTime()) >= Number(client.start_time) &&
			Number(getCurTime()) <= Number(client.end_time) &&
			client["cycle"][getCurDay()] == "1"){
			return label.allow;
		}
	}

	function JSON2UriParam(data){
		return $.param(data).replace(/\+/g, '%20');
	}

	function parentEntry(client){
		var param = JSON2UriParam(client);
		var vendor;
		if(client.brand){
			vendor = "icon_" + getAlias(client.brand);
		}else{
			vendor = "icon_" + getVendor(client.mac);
		}
		var devName = htmlEscape(getStrInMax(client.name, 16));
		var AccessNetwork = (client.AccessNetwork == label.allow)?label.allow:label.forbid;
		return '<a href="#/parentCtrlRule/?keyBack=1&' + param + '" class="list-item"><li class="list-item">' +
			'<div class="left-con"><i class="verdor-icon ' + vendor + '"></i></div>' +
			'<div class="right-con">' +
				'<p class="list-con-l">' +
					'<span class="list-con1">' + devName + '</span>'+
				'</p>' +
				'<i class="icon_back dev-other"></i>' +
				'<p class="list-con-r">' + AccessNetwork + '</p>' +
			'</div>' +
		'</li></a>';
	}

	function parentRule(clients){
		var parentListObj = $("#ParentList");
		var len = clients.length;
		for (var i = 0; i < len; i++){
			parentListObj.append(parentEntry(clients[i]));
		}
	}

	$("#AddDev").click(function(){
		stateman.go("devList",{param:{"keyBack":1}});
	});
})();
</script>
<div class="head-con">
	<a href="#/phone/App" class="head-btn-l"><i class="head-btn icon icon_back"></i></a>
	<h1 class="head-title">{%label.parentCtrl%}</h1>
	<span id="AddDev">{%label.add%}</span>
</div>
<div class="set-con below-head">
	<ul class="blank-bg"></ul>
	<ul class="set-con">
		<div class="switch-con">
			<label class="desc-title">{%label.parentCtrl%}</label>
			<span id="SwitchParent" class="switch">
				<i class="switch-circle"></i>
			</span>
		</div>
		<p class="desc-tetail">{%label.parentCtrlRemark%}</p>
	</ul>
	<ul class="blank-bg"></ul>
	<ul id="ParentList" class="list"></ul>
</div>