<style type="text/css">#Param{width:80%;margin:auto}ul.func-con{width:75%;margin:74px auto 52px;text-align:left}h2.func-desc{font-size:18px;color:#403f44}p.func-tips{font-size:14px;margin-top:16px;color:#767d82}ul.item-group{text-align:center}li.group-item{color:#767d82;cursor:pointer;display:inline-block;width:120px;margin:0 5px;text-align:center}.item-circle{display:inline-block;border-radius:50%;border:#adbbc9 1px solid}.item-outer-circle{width:88px;height:88px;background-color:#FFF}.item-inner-circle{margin-top:5px;width:76px;height:76px;background-color:#adbbc9}i.group-item-icon{display:inline-block;font-size:50px;line-height:78px;vertical-align:middle;color:#FFF}p.item-desc{font-size:13px;margin-top:10px}li.item-checked{color:#fe9818}li.item-checked .item-circle{border:#fe9818 1px solid;background-color:#fe9818}</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			qos = {config = {}}
		}

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

	var srcData = <%=result%>;
	var qosInfo = srcData[K_MODULE].qos.config;
	var enable = qosInfo.enable;

	initSwitch("QosSwitch", enable, function(state, init){
		if (1 == state){
			$("#Param").show();
		}else{
			$("#Param").hide();
		}

		if(!init){
			var data = {};
			data.enable= $("#QosSwitch").attr("data-value");

			showLoading(label.saving);
			saveApi(data, function(ret){
				$.setTimeout(function(){
					closeLoading();
				}, 2000);
			});
		}
	});

	function saveApi(para, callback){
		var data = {
			qos : {
				config : para
			}
		};

		apiSet(data, callback);
	}

	var checked = "item-checked";
	var itemList = [label.qosBTTip,
					label.qosGameTip,
					label.qosWebTip,
					label.qosVideoTip,
					label.qosBalanceTip];

	var radioIdx = parseInt(qosInfo.mode);
	radioFun("PriorityType", radioIdx, function(idx, init){
		$("p.func-tips").text(itemList[idx]);

		if(!init){
			var data = {};
			data.mode = idx + "";

			showLoading(label.saving);
			saveApi(data, function(ret){
				$.setTimeout(function(){
					closeLoading();
				}, 2000);
			});
		}
	});

	function radioFun(id, checkedIdx, callback){
		var radios = $("#" + id + " li.radio");
		var idx = parseInt(checkedIdx, 10);
		var len = radios.length;

		for (var i = 0; i < len; i++){
			if (idx == i){
				$(radios[i]).addClass(checked).attr("data-idx", i);
			}else{
				$(radios[i]).removeClass(checked).attr("data-idx", i);
			}
		}

		radios.click(function(){
			var thisObj = $(this);
			var idx = parseInt(thisObj.attr("data-idx"));

			if (!thisObj.hasClass(checked)){
				thisObj.addClass(checked);
				thisObj.siblings("li.radio").removeClass(checked);
				callback && callback(idx, false);
			}
		});

		callback && callback(idx, true);
	}
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/qos.png?_=20191016014108" />
			<span class="help-title">{%label.QoS%}</span>
		</li>
		<li class="summary">{%helpStr.qos%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/qos.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.QoS%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con">
		<li class="text-con">
			<label class="desc-lbl">{%label.QoS%}</label>
			<span class="set-con-middle">
				<span id="QosSwitch" class="switch">
					<i class="switch-circle icon_select_off"></i>
				</span>
			</span>
		</li>
	</ul>
	<div id="Param" class="hidden">
		<ul class="set-con func-con">
			<h2 class="func-desc">{%label.qosModal%}</h2>
		</ul>
		<ul class="item-group" id="PriorityType">
			<li class="group-item radio item-check">
				<div class="item-circle item-outer-circle">
					<div class="item-circle item-inner-circle">
						<i class="group-item-icon icon_BT_Download"></i>
					</div>
				</div>
				<p class="item-desc">{%label.qosBT%}</p>
			</li>
			<li class="group-item radio">
				<div class="item-circle item-outer-circle">
					<div class="item-circle item-inner-circle">
						<i class="group-item-icon icon_game"></i>
					</div>
				</div>
				<p class="item-desc">{%label.qosGame%}</p>
			</li>
			<li class="group-item radio">
				<div class="item-circle item-outer-circle">
					<div class="item-circle item-inner-circle">
						<i class="group-item-icon icon_web"></i>
					</div>
				</div>
				<p class="item-desc">{%label.qosWeb%}</p>
			</li>
			<li class="group-item radio">
				<div class="item-circle item-outer-circle">
					<div class="item-circle item-inner-circle">
						<i class="group-item-icon icon_Video"></i>
					</div>
				</div>
				<p class="item-desc">{%label.qosVideo%}</p>
			</li>
			<li class="group-item radio">
				<div class="item-circle item-outer-circle">
					<div class="item-circle item-inner-circle">
						<i class="group-item-icon icon_Balance"></i>
					</div>
				</div>
				<p class="item-desc">{%label.qosBalance%}</p>
			</li>
		</ul>
		<ul class="set-con func-con">
			<p class="func-tips"></p>
		</ul>
	</div>
</div>