{{template "header.tmpl" .}}
<style type="text/css">
#filterform{
	margin: 10px 0px;
}
#filterform .form-group{
	margin-right: 20px;
}
</style>
</head>
<body>
{{template "navbar.tmpl" .}}

<div class="container-fluid">
	<h4 class="text-center">账号管理 <small>[<a href="#" id="add_btn"><i class="glyphicon glyphicon-plus"></i> 点击这里添加</a>]</small></h4>
	<hr />
	<table class="table table-bordered" style="margin-bottom:0px;">
		<thead>
			<tr>
				<th>ID</th>
				<th>账号</th>
				<th>姓名</th>
				<th>最后登录</th>
				<th>是否管理员</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="list"></tbody>
	</table>
</div>

<script type="text/javascript">
var $SESS = {{.Sess}};

function randomPassword(length) {
	var chars = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','0','1','2','3','4','5','6','7','8','9','`','-','=','~','!','@','#','$','%','^','*','(',')','_','+','[',']',';',',','.','{','}',':','<','>','?'];
	var pwd = '';
	for (var i=0; i<length; i++) {
		var k = Math.floor(Math.random() * chars.length);
		pwd += chars[k];
	}
	return pwd;
}

$(function(){
	//加载列表
	function account_list() {
		var list = $('#list');
		list.empty();
		$.post('/syscfg/account_list', {}, function(resp){
			if (resp && resp.errno == 0 && resp.data) {
				var html = '';
				for (var i=0; i<resp.data.length; i++) {
					var item = resp.data[i];
					html += '<tr>';
					html += '<td>' + item.Id + '</td>';
					html += '<td>' + item.Account + '</td>';
					html += '<td>' + item.Name + '</td>';
					html += '<td>' + (item.LastLogin == '' ? '<i class="text-muted">无</i>' : item.LastLogin) + '</td>';
					html += '<td class="' + (item.IsSuper ? 'text-danger' : '') + '">' + (item.IsSuper ? '是' : '否') + '</td>';
					html += '<td class="' + (item.Disabled ? 'danger' : '') + '">' + (item.Disabled ? '禁用' : '正常') + '</td>';
					html += '<td>';
					html += '	<button class="btn btn-xs btn-primary" type="button" data-value="' + item.Id + '">编辑</button>&nbsp;';
					html += '	<button class="btn btn-xs btn-warning" type="button" data-value="' + item.Id + '">重置密码</button>&nbsp;';
					html += '	<button class="btn btn-xs btn-danger" type="button" data-value="' + item.Id + '">删除</button>';
					html += '</td>';
					html += '</tr>';
				}
				list.html(html);
				//修改
				$('.btn-primary', list).click(function(){
					var id = $(this).attr('data-value');
					$.get('/syscfg/account_get', {'id': id}, function(resp){
						if (resp && resp.errno == 0) {
							account_set(resp.data);
						}
					}, 'json');
					return false;
				});
				//重置密码
				$('.btn-warning', list).click(function(){
					var id = $(this).attr('data-value');
					var html = `<form>
					<div class="form-group">
						<label>请输入新密码</label>
						<input type="text" name="Password" class="form-control" maxlength="20" />
					</div>
					</form>`;
					$.alert({
						'title': '修改密码',
						'content': html,
						'size': 'modal-sm',
						'callback': function(dlg) {
							var form = $('form', dlg).get(0);
							if (form.Password.value.length < 6) {
								$.alert({'content': '密码长度不能小于6！'});
								return false;
							} else {
								$.post('/syscfg/account_reset_pwd', {
									'id': id,
									'password': form.Password.value
								}, function(resp){
									if (resp && resp.errno == 0) {
										$.alert({'content': '操作成功！'});
									} else {
										$.alert({'content': resp.error ? resp.error : '操作失败！'});
									}
								}, 'json');
							}
						}
					});
					return false;
				});
				//删除
				$('.btn-danger', list).click(function(){
					var id = $(this).attr('data-value');
					$.alert({
						'content': '确定要删除该记录吗？',
						'btncancel': true,
						'callback': function() {
							$.post('/syscfg/account_del', {'id': id}, function(resp){
								if (resp && resp.errno == 0) {
									account_list();
								} else {
									$.alert({'content': resp.error ? resp.error : '操作失败！'});
								}
							}, 'json');
						}
					});
				});
			}
		}, 'json');
		return false;
	}

	//添加或修改记录
	function account_set(record){
		record = $.extend({
			'Id': 0,
			'Account': '',
			'Name': '',
			'Password': randomPassword(8),
			'IsSuper': false,
			'Disabled': false
		}, record);
		var html = `<form class="form-horizontal">
			<div class="form-group id-group" style="display:none;">
				<label class="col-md-4 control-label">ID</label>
				<div class="col-md-8">
					<input type="text" class="form-control" name="Id" maxlength="20" value="${record.Id}" readonly="readonly" style="width:100px;" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-4 control-label">账号</label>
				<div class="col-md-8">
					<input type="text" class="form-control" name="Account" maxlength="20" value="${record.Account}" placeholder="不能为空" style="width:200px;" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-4 control-label">姓名</label>
				<div class="col-md-8">
					<input type="text" class="form-control" name="Name" maxlength="20" value="${record.Name}" placeholder="不能为空" style="width:200px;" />
				</div>
			</div>
			<div class="form-group pwd-group" style="display:none;">
				<label class="col-md-4 control-label">初始密码</label>
				<div class="col-md-8">
					<input type="text" class="form-control" name="Password" maxlength="20" value="${record.Password}" placeholder="不能为空" style="width:200px;" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-4 control-label">是否是管理员</label>
				<div class="col-md-8">
					<select class="form-control" name="IsSuper" style="width:100px;">
						<option value="0">否</option>
						<option value="1">是</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-4 control-label">状态</label>
				<div class="col-md-8">
					<select class="form-control" name="Disabled" style="width:100px;">
						<option value="0">正常</option>
						<option value="1">禁用</option>
					</select>
				</div>
			</div>
		</form>`;
		$.alert({
			'title': record.Id == 0 ? '添加账号' : '编辑账号',
			'content': html,
			'init': function(dlg) {
				var form = $('form', dlg).get(0);
				form.IsSuper.value = record.IsSuper ? '1' : '0';
				form.Disabled.value = record.Disabled ? '1' : '0';
				if (record.Id == 0) {
					$('.id-group', form).hide();
					$('.pwd-group', form).show();
				} else {
					$('.id-group', form).show();
					$('.pwd-group', form).hide();
				}
			},
			'callback': function(dlg){
				var form = $('form', dlg).get(0);
				if (form.Account.value.length < 2) {
					$.alert({'content': '请填写至少2位字符的账号！'});
				} else if (/\W/.test(form.Account.value) || !/^[A-Za-z]/.test(form.Account.value)) {
					$.alert({'content': '账号只能使用字母数字和下划线的组合，并且必须使用字母开头！'});
				} else if (form.Name.value == '') {
					$.alert({'content': '请填写姓名！'});
				} else if (record.Id == 0 && form.Password.value.length < 6) {
					$.alert({'content': '请填写至少6位字符的初始密码！'});
				} else {
					$.post('/syscfg/account_set', $(form).serialize(), function(resp){
						if (resp && resp.errno == 0) {
							account_list();
						} else {
							$.alert({'content': resp.error ? resp.error : '操作失败！'});
						}
					}, 'json');
					return true;
				}
				return false;
			},
			'btncancel': true
		});
		return false;
	}

	account_list(); //加载页面
	$('#add_btn').click(account_set); //添加按钮
});
</script>
</body>
</html>