{extend name="common/layout" /}
{block name="title"}权重配置 - {$domainName}{/block}
{block name="main"}
<style>
.table-bordered>tbody>tr>td{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width:200px;vertical-align:middle;}
</style>
<div class="modal" id="modal-store" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content animated flipInX">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span
							aria-hidden="true">&times;</span><span
							class="sr-only">Close</span></button>
				<h4 class="modal-title" id="modal-title">设置权重</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" id="form-store" onsubmit="return save(this)">
					<input type="hidden" name="id"/>
					<input type="hidden" name="subdomain"/>
					<input type="hidden" name="type"/>
					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right">选择线路</label>
						<div class="col-sm-9">
							<select name="line" id="line" class="form-control" onchange="changeLine()"></select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right">线路权重开关</label>
						<div class="col-sm-9">
							<div class="material-switch" style="padding-top:7px"><input id="weight-switch" name="status" type="checkbox" value="1" checked onchange="changeOpen()"/><label for="weight-switch" class="label-primary"></label></div>
						</div>
					</div>
					<table class="table table-striped table-hover table-bordered">
						<thead>
							<tr><th>主机记录</th><th>记录类型</th><th>记录值</th><th>权重</th></tr>
						</thead>
						<tbody id="weight-list">
							<tr><td colspan="4" class="text-center">正在加载...</td></tr>
						</tbody>
					</table>
					<span class="text-muted">提示：权重范围为数字0-100</span>
					<div class="form-group">
						<div class="col-sm-12 text-right">
							<button type="submit" class="btn btn-primary">保存</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-xs-12 center-block" style="float: none;">
	<div class="panel panel-default">
	<div class="panel-heading"><h3 class="panel-title"><a href="/record/{$domainId}" class="btn btn-sm btn-default pull-right" style="margin-top:-6px"><i class="fa fa-reply fa-fw"></i> 返回</a>权重配置 - {$domainName}</h3></div>
	<div class="panel-body">

<form onsubmit="return searchSubmit()" method="GET" class="form-inline" id="searchToolbar">
  <div class="form-group">
	<label>搜索</label>
    <input type="text" class="form-control" name="keyword" placeholder="子域名">
  </div>
  <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> 搜索</button>
  <a href="javascript:searchClear()" class="btn btn-default" title="刷新权重配置列表"><i class="fa fa-refresh"></i> 刷新</a>
</form>

      <table id="listTable">
	  </table>
    </div>
  </div>
</div>
</div>
{/block}
{block name="script"}
<script src="/static/js/layer/layer.js"></script>
<script src="/static/js/bootstrap-table-1.21.4.min.js"></script>
<script src="/static/js/bootstrap-table-page-jump-to-1.21.4.min.js"></script>
<script src="/static/js/custom.js"></script>
<script>
var dnsconfig = {$dnsconfig|json_encode|raw};
var recordLine = {$recordLine|json_encode|raw};
var domainId = {$domainId};
var weightList = [];
var lineList = [];
$(document).ready(function(){
	updateToolbar();
	const defaultPageSize = 15;
	const pageNumber = typeof window.$_GET['pageNumber'] != 'undefined' ? parseInt(window.$_GET['pageNumber']) : 1;
	const pageSize = typeof window.$_GET['pageSize'] != 'undefined' ? parseInt(window.$_GET['pageSize']) : defaultPageSize;

	$("#listTable").bootstrapTable({
		url: '/record/weight/data/{$domainId}',
		pageNumber: pageNumber,
		pageSize: pageSize,
		classes: 'table table-striped table-hover table-bordered',
		uniqueId: 'id',
		columns: [
			{
				field: 'SubDomain',
				title: '子域名'
			},
            {
				field: 'Type',
				title: '记录类型'
			},
			{
				field: 'RecordCount',
				title: '记录数量'
			},
			{
				field: 'Open',
				title: '权重配置状态',
				formatter: function(value, row, index) {
					if(value == 1){
						return '<font color="green"><i class="fa fa-check-circle"></i>已开启</font>';
					}else{
						return '<font color="#b5bbc8"><i class="fa fa-pause-circle"></i>已关闭</font>';
					}
				}
			},
			{
				field: '',
				title: '操作',
				formatter: function(value, row, index) {
					var html = '';
					if(row.Open == 1){
						if(row.Type == 'CNAME'){
							html += '<a class="btn btn-warning btn-xs" title="CNAME类型解析默认必须开权重模式，每次解析应答只返回一条解析结果记录值" disabled>关闭权重</a>&nbsp;&nbsp;';
						}else{
							html += '<a href="javascript:setWeightStatus(\''+row.SubDomain+'\', \'0\')" class="btn btn-warning btn-xs">关闭权重</a>&nbsp;&nbsp;';
						}
					}else{
						html += '<a href="javascript:setWeightStatus(\''+row.SubDomain+'\', \'1\')" class="btn btn-success btn-xs">开启权重</a>&nbsp;&nbsp;';
					}
					html += '<a href="javascript:editframe('+row.id+')" class="btn btn-primary btn-xs">设置权重</a>';
					return html;
				}
			},
		],
	})
})
function editframe(id){
	var row = $("#listTable").bootstrapTable('getRowByUniqueId', id);
	var ii = layer.load(2);
	$.ajax({
		type : 'POST',
		url : '/record/list',
		data : {id: domainId, rr: row.rr},
		dataType : 'json',
		success : function(data) {
			layer.close(ii);
			if(data.code == 0){
				$("#modal-store").modal('show');
				$("#modal-title").html("设置权重 - "+row.SubDomain);
				$("#form-store input[name=id]").val(id);
				$("#form-store input[name=subdomain]").val(row.SubDomain);
				$("#form-store input[name=type]").val(row.Type);
				if(row.Type == 'CNAME') $("#weight-switch").prop("disabled", true);
				else $("#weight-switch").prop("disabled", false);
				
				lineList = [];
				$.each(recordLine, function(i, item){
					if(data.data.find(x => x.Line == item.id)){
						item.open = row.Open;
						if(row.LineAlgorithms && row.LineAlgorithms.LineAlgorithm.length > 0){
							var tmpLine = row.LineAlgorithms.LineAlgorithm.find(x => x.Line == item.id);
							if(tmpLine) item.open = tmpLine.Open;
						}
						lineList.push(item);
					}
				});
				$("#line").empty();
				$.each(lineList, function(i, item){
					$("#line").append('<option value="'+item.id+'">'+item.name+'</option>');
				});

				weightList = data.data;
				changeLine();
			}else{
				layer.alert(data.msg, {icon: 2})
			}
		}
	});
}
function changeLine(){
	var line = $("#line").val();
	$("#weight-switch").prop("checked", lineList.find(x => x.id == line).open);
	$("#weight-list").empty();
	$.each(weightList, function(i, item){
		if(item.Line == line){
			$("#weight-list").append('<tr><td>'+item.Name+'</td><td>'+item.Type+'</td><td>'+item.Value+'</td><td><input type="number" class="form-control" name="weight['+item.RecordId+']" value="'+item.Weight+'" style="width:80px;" min="0" max="100"/></td></tr>');
		}
	});
	changeOpen();
}
function changeOpen(){
	if($("#weight-switch").is(':checked')){
		$("#weight-list input[name^='weight']").prop("disabled", false);
	}else{
		$("#weight-list input[name^='weight']").prop("disabled", true);
	}
}
function save(){
	if($("#form-store input[name=username]").val()==''){
		layer.alert('请确保各项不能为空！');return false;
	}
	var act = $("#form-store input[name=action]").val();
	var ii = layer.load(2);
	$.ajax({
		type : 'POST',
		url : '/record/weight/{$domainId}/act/update',
		data : $("#form-store").serialize(),
		dataType : 'json',
		success : function(data) {
			layer.close(ii);
			if(data.code == 0){
				layer.alert(data.msg,{
					icon: 1,
					closeBtn: false
				}, function(){
					layer.closeAll();
					$("#modal-store").modal('hide');
					searchRefresh();
				});
			}else{
				layer.alert(data.msg, {icon: 2})
			}
		}
	});
	return false;
}
function setWeightStatus(subdomain, status){
	var ii = layer.load(2);
	$.ajax({
		type : 'POST',
		url : '/record/weight/{$domainId}/act/status',
		data : {subdomain: subdomain, status: status},
		dataType : 'json',
		success : function(data) {
			layer.close(ii);
			if(data.code == 0){
				layer.closeAll();
				searchRefresh();
			}else{
				layer.alert(data.msg, {icon: 2});
			}
		}
	});
}
</script>
{/block}