<style type="text/css">#Param li.text-con{color:#4f5356;border:0;text-align:left}span.pool-con{display:inline-block;width:310px;height:36px;line-height:36px;text-align:right}span.net{display:inline-block;border-right:1px solid #DDD;font-size:14px;padding-right:5px}input.rag-input{width:38px;line-height:20px;font-size:14px;text-align:center;border:1px solid #DDD;border-radius:4px;margin-left:10px;margin-top:-1px}span.to{display:inline-block;line-height:24px;font-size:14px;margin-left:10px}div.tab-con{font-size:14px;color:#4f5356;text-align:center;margin:20px 50px 10px}table.set-con{width:100%;border-collapse:collapse;table-layout:fixed}.set-con-long{width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.set-con-short{width:22%}input.text-con{color:#4f5356;height:34px;line-height:34px;width:80%;padding:0 .5em;font-size:14px;border:1px solid #DDD;border-radius:4px;text-align:center}input.dev-name{width:100%}span.text-con{width:160px;line-height:40px;display:inline-block;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.boder-tr{border-bottom:1px solid #e7e7e7;height:40px;line-height:40px;background-color:#f4f4f4}ul.add-item{color:#ff8000;margin-top:4px;font-size:32px;float:right;margin-right:30px;cursor:pointer}ul.add-gray{color:#bfbfbf;cursor:default}span.color-gray{color:#bfbfbf}span.handle-tip{display:inline-block;width:50%;line-height:40px;cursor:pointer}i.vendor-icon{font-size:40px;display:inline-block;width:40px;height:40px;margin-right:10px;vertical-align:middle}.table-height{height:40px;line-height:40px;border-bottom:1px solid #e7e7e7}p.note-str{text-align:left}.line-gray{opacity:.7;filter:alpha(opacity=70)}li.text-tip{height:36px;line-height:36px;vertical-align:inherit;width:80%!important}li.text-con span.select-con{width:100%;padding:0;vertical-align:inherit}span.select span.sel-con{width:100%;text-align:center}li.text-tip ul.sel-opts-ul{width:100%}label.tip-lbl{line-height:24px;display:inline-block}</style>
<script type="text/javascript">
(function(){
	<%
		local json = require("luci.json")
		local para = {
			dhcpd = {config = {}, bind_list = {}},
			device_manage = {client_list = {}}
		}

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

	var result = <%=result%>;

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

		var dhcp = ret.dhcpd.config;
		var networkAddr = dhcp.network_address;
		initSwitch("Switch", dhcp.enable, function(state){
			if (1 == state){
				$("#Param").show();
				$("#DhcpTab").show();
			}else{
				$("#Param").hide();
				$("#DhcpTab").hide();
			}
		});

		$("#DhcpNet").text(networkAddr.substring(0, networkAddr.lastIndexOf(".")));
		$("#DhcpNet").attr("data-value", networkAddr);
		$("#DhcpStart").val(dhcp.pool_start);
		$("#DhcpEnd").val(dhcp.pool_end);
	}

	init(result);

	var addFlag = "1";
	var editFlag = "1";
	var bindLists = result[K_MODULE].dhcpd.bind_list;
	var bindListLen = bindLists.length;
	var devListsObj = result[K_MODULE].device_manage.client_list;
	var networkAddr = result[K_MODULE].dhcpd.config.network_address;
	var index = networkAddr.indexOf("/");
	var ip = networkAddr.substring(0, index);
	var maskBits = networkAddr.substring(index + 1);
	var netmask = 0xffffffff ^ (0xffffffff & (Math.pow(2, 32 - maskBits) -1));
	var devList = [];
	var macList = [];

	var tmpDevlist = devListsObj.sort(function(a, b){
		var aStatus =parseInt(a.online_status);
		var bStatus =parseInt(b.online_status);

		if (aStatus === bStatus){
			// 按主机名升序
			if (a.name < b.name){
				return -1;
			}else if(a.name == b.name){
				return 0;
			}else{
				return 1;
			}
		}else{
			// 优先显示在线主机
			return bStatus - aStatus;
		}
	});

	devListsObj = tmpDevlist;

	for (var i = 0; i < devListsObj.length; i++){
		devList[i] = {name:devListsObj[i].name, value:devListsObj[i].mac};
		macList[i] = devListsObj[i].mac;
	}

	function staticIpBindHtm(index, bindlist){
		var icon;
		if(bindlist.brand){
			icon = "icon_" + getAlias(bindlist.brand);
		}else{
			icon = "icon_" + getVendor(bindlist.mac);
		}
		var lineColor = checkSameNetwork(ip, bindlist.ip, netmask) ? "" : "line-gray";

		return '<tr class="table-height ' + lineColor + '" data-value="'+ index +'">' +
					'<td class="set-con-long">' +
						'<i class="vendor-icon ' + icon + '"></i>' +
						'<span class="text-con dev-name" title="'+ bindlist.name +'">' + bindlist.name + '</span>' +
					'</td>' +
					'<td class="set-con-short">' +
						'<span class="text-con ip-addr">' + bindlist.ip + '</span>' +
					'</td>' +
					'<td class="set-con-short">' +
						'<span class="text-con mac-addr">' + bindlist.mac + '</span>' +
					'</td>' +
					'<td class="set-con-short">' +
						'<span class="handle-tip edit-item color-orange">' + label.edit + '</span>' +
						'<span class="handle-tip del-item color-orange">' + label.del + '</span>' +
					'</td>' +
				'</tr>';
	}

	var newRow = '<td>' +
					'<li class="text-con text-tip text-width">' +
						'<span id="DevName" class="select select-con">' +
							'<span class="value sel-value sel-con">' + '</span>' +
							'<i class="tip icon_list-expansion">' + '</i>' +
						'</span>' +
					'</li>' +
				'</td>' +
				'<td>' +
					'<input id="IpAddr" class="text-con hover" maxLength="15" value="" />' +
				'</td>' +
				'<td id="MacAddr"></td>' +
				'<td class="set-con">' +
					'<span id="Bind" class="handle-tip bind-item color-orange">' + label.bind + '</span>' +
					'<span id="Cancel" class="handle-tip cancel-item color-orange">' + label.cancel + '</span>' +
				'</td>';

	function initBindListTab(bindLists){
		var bindListTabObj = $("#DhcpBind");
		var len = bindLists.length;

		if (10 == len){
			$("ul.add-item").addClass("add-gray");
		}

		if (0 == len){
			$("ul.add-item").click();
		}else{
			for(var i=0; i<len; i++){
				bindListTabObj.append(staticIpBindHtm(i,bindLists[i]));
			}
		}

		$(".del-item").click(function(){
			if (addFlag == "1"){
				var itemNum = $(this).parents("tr").attr("data-value");
				var data = {};
				var para = {};
				para.dhcpd = {};
				para.dhcpd.bind_list = data;

				data.id = bindLists[itemNum]["id"];
				data.mac = $(this).parents("tr").find("span.mac-addr").text();

				showLoading(label.saving);
				apiDel(para, function(){
					$.setTimeout(function(){
						closeLoading();
						stateman.go("pc.dhcpServerApp");
					}, 2000);
				});
			}
		});

		$(".edit-item").click(function(){
			if (addFlag == "1" && editFlag == "1"){
				editFlag = "0";
				addFlag = "0";
				$("ul.add-item").addClass("add-gray");
				$("span.edit-item").addClass("color-gray");
				$("span.del-item").addClass("color-gray");
				$("span.edit-item").removeClass("color-orange");
				$("span.del-item").removeClass("color-orange");

				var clientNum = $(this).parents("tr").attr("data-value");
				var macValue;
				$(this).parents("tr").html(newRow);

				if (macList.indexOf(bindLists[clientNum].mac) < 0){
					macValue = devListsObj[0].mac;
				}else{
					macValue = bindLists[clientNum].mac;
				}

				initSelect("DevName", devList, macValue, function(val){
					for (var i = 0; i < devListsObj.length; i++){
						if (devListsObj[i].mac == val){
							$("#MacAddr").text(devListsObj[i].mac);
						}
					}
				});

				$("#IpAddr").val(bindLists[clientNum].ip);
				$("#MacAddr").text(bindLists[clientNum].mac);
			}

			$("#Bind").click(function(){
				saveBindItem(this, "modify");
			});

			$("#Cancel").click(function(){
				stateman.go("pc.dhcpServerApp");
			});

			$("input.hover").bind("focus", function(){
				$(".err-note").hide();
			});
		});
	}

	function creatEmptyLine(){
		var bindListTabObj = $("#DhcpBind");
		var emptyRow = '<tr class="table-height" data-value="-1">' + newRow + '</tr>';

		bindListTabObj.append(emptyRow);
	}

	function saveBindItem(curPt, action){
		var itemNum = $(curPt).parents("tr").attr("data-value");
		var data = {};
		var para = {};
		para.dhcpd = {};
		para.dhcpd.bind_list = data;

		data.id = "";
		if (action == "modify"){
			data.id = bindLists[itemNum]["id"];
		}

		for (var i = 0; i < devListsObj.length; i++){
			if (devListsObj[i].mac == $("#MacAddr").text()){
				data.name = devListsObj[i].name;
			}
		}

		data.ip = $("#IpAddr").val();
		data.mac = $("#MacAddr").text();

		if (handleError(checkBindItem(data.name, data.ip, data.mac))){
			return;
		}

		showLoading(label.saving);
		if ("modify" == action){
			apiSet(para, function(ret){
				var code = ret[ERR_CODE];
				if (E_NONE == code){
					$.setTimeout(function(){
						closeLoading();
						stateman.go("pc.dhcpServerApp");
					}, 2000);
				}else{
					$.setTimeout(function(){
						handleError(code);
						closeLoading();
					}, 800);
				}
			});
		}else if("bind" == action){
			apiAdd(para, function(ret){
				var code = ret[ERR_CODE];
				if (E_NONE == code){
					$.setTimeout(function(){
						closeLoading();
						stateman.go("pc.dhcpServerApp");
					}, 2000);
				}else{
					$.setTimeout(function(){
						handleError(code);
						closeLoading();
					}, 800);
				}
			});
		}
	}

	$("ul.add-item").click(function(){
		if (editFlag == "1"){
			if (document.getElementById("DhcpBind").rows.length < 11
				&& document.getElementById("DhcpBind").rows.length == (bindListLen + 1)){
				addFlag = "0";
				$("span.edit-item").addClass("color-gray");
				$("span.del-item").addClass("color-gray");
				$("span.edit-item").removeClass("color-orange");
				$("span.del-item").removeClass("color-orange");
				$("ul.add-item").addClass("add-gray");
				creatEmptyLine();

				initSelect("DevName", devList, devListsObj[0].mac, function(val){
					for (var i = 0; i < devListsObj.length; i++){
						if (devListsObj[i].mac == val){
							$("#IpAddr").val(devListsObj[i].ip);
							$("#MacAddr").text(devListsObj[i].mac);
						}
					}
				});
			}

			$("#Bind").click(function(){
				saveBindItem(this, "bind");
			});

			$("#Cancel").click(function(){
				stateman.go("pc.dhcpServerApp");
			});

			$("input.hover").bind("focus", function(){
				$(".err-note").hide();
			});
		}
	});

	$("#Save").click(function(){
		var data = {};
		var para = {};
		para.dhcpd = {};
		para.dhcpd.config = data;

		data.enable = $("#Switch").attr("data-value");
		data.pool_start = $("#DhcpStart").val();
		data.pool_end = $("#DhcpEnd").val();
		data.network_address = $("#DhcpNet").attr("data-value");

		if ("1" == data.enable){
			if (handleError(checkPool(ip, data.pool_start, data.pool_end))){
				return;
			}
		}

		showLoading(label.saving);
		apiSet(para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				$.setTimeout(function(){
					closeLoading();
				}, (ret[K_MODULE].dhcpd.config.wait_time * 1000));
			}else{
				$.setTimeout(function(){
					handleError(code);
					closeLoading();
				}, 800);
			}
		});
	});

	initBindListTab(bindLists);

	function checkPool(ipHead, poolStart, poolEnd){
		if ("" == poolStart){
			return E_DHCPD_START_BLANK;
		}

		if (!checkNum(poolStart)){
			return E_DHCPPOOLSTART;
		}

		var ipStart = ipHead.replace(/\d*$/,poolStart);
		var ipStartVal = transIp(ipStart);

		if(E_NONE != checkIPNetHost(ipStartVal, netmask)){
			return E_DHCPD_START_ILLEGAL;
		}

		if(!checkSameNetwork(ip, ipStartVal, netmask)){
			return E_DHCPD_START_LANIP_SUBNET;
		}

		if ("" == poolEnd){
			return E_DHCPD_END_BLANK;
		}

		if (!checkNum(poolEnd)){
			return E_DHCPPOOLEND;
		}

		var ipEnd = ipHead.replace(/\d*$/,poolEnd);
		var ipEndVal = transIp(ipEnd);

		if(E_NONE != checkIPNetHost(ipEndVal, netmask)){
			return E_DHCPD_END_ILLEGAL;
		}

		if(!checkSameNetwork(ip, ipEndVal, netmask)){
			return E_DHCPD_END_LANIP_SUBNET;
		}

		if(parseInt(poolStart) > parseInt(poolEnd)){
			return E_DHCPD_START_END_LESS;
		}

		return E_NONE;
	}

	function checkBindItem(name, ip, mac){

		var err = checkIp(ip);
		switch(err){
		case E_BLANK:
			return E_DHCPD_IP_BLANK;
		case E_INVIPFMT:
			return E_DHCPD_IP_FORMAT;
		case E_INVIP:
			return E_DHCPD_IP_ILLEGAL;
		}

		return E_NONE;
	}
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/dhcp.png?_=20191016014108" />
			<span class="help-title">{%label.dhcpServer%}</span>
		</li>
		<li class="title">{%helpStr.dhcp%}</li>
		<li class="content">{%helpStr.dhcpTip%}</li>
		<li class="title">{%helpStr.addressPool%}</li>
		<li class="content">{%helpStr.addressPoolTip%}</li>
		<li class="title">{%helpStr.ipMacBind%}</li>
		<li class="content">{%helpStr.ipMacBindTip%}</li>
		<li class="summary">{%helpStr.ipMacBindTip1%}</li>
		<li class="summary">{%helpStr.ipMacBindTip2%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/dhcp.png?_=20191016014108" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.dhcpServer%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con">
		<li class="text-con">
			<label class="desc-lbl">{%label.dhcpServer%}</label>
			<span class="set-con-middle">
				<span id="Switch" class="switch">
					<i class="switch-circle icon_select_off"></i>
				</span>
			</span>
		</li>
	</ul>
	<div id="Param" class="hidden">
		<ul class="set-con">
			<li class="text-con">
				<label class="desc-lbl">{%label.ipRange%}</label>
				<span class="pool-con">
					<span id="DhcpNet" class="net"></span>
					<input id="DhcpStart" class="rag-input hover" maxlength="5" value="" />
					<span class="to">{%label.to%}</span>
					<input id="DhcpEnd" class="rag-input hover" maxlength="5" value="" />
				</span>
			</li>
		</ul>
	</div>
	<div class="btn-con">
		<input id="Save" class="btn" type="button" value="{%btn.save%}" />
	</div>
	<div id="DhcpTab" class="tab-con hidden">
		<table id="DhcpBind" class="set-con">
			<tr class="boder-tr">
				<th class="set-con-long">{%label.deviceName%}</th>
				<th class="set-con-short">{%label.ipaddr%}</th>
				<th class="set-con-short">{%label.macAddr%}</th>
				<th class="set-con-short">{%label.handle%}</th>
			</tr>
		</table>
		<ul class="add-item"><i class="icon_add"></i></ul>
		<div class="err-note hidden">
			<i class="err-icon icon_remind_line"></i>
			<p class="note-str"></p>
		</div>
	</div>
</div>
