<%@page import="com.library.util.Tools"%>
<%@page import="com.library.bean.PowerBean"%>
<%@ page language="java" import="java.util.*,com.library.config.*" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理员管理</title>
<script src="../admin/js/jquery-2.1.1.min.js" type="text/javascript"
	charset="utf-8"></script>
<link rel="stylesheet" type="text/css"
	href="../admin/css/bootstrap.min.css" />
<script src="js/Tools.js" type="text/javascript" charset="utf-8"></script>
<link href="../admin/css/offcanvas.min.css" rel="stylesheet"type="text/css">
<link rel="stylesheet" type="text/css" href="../admin/css/default.css">
<script src="../admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    
	<script type="text/javascript" src="http://yanshi.sucaihuo.com/jquery/27/2759/demo/js/bootoast.js" ></script>
		<link rel="stylesheet" href="http://yanshi.sucaihuo.com/jquery/27/2759/demo/css/bootoast.css" />    
</head>
<style type="text/css">
body {
	color: #000;
	background-color: #fff;
	padding: 20px;
}
.jurisdiction{
	width: 15px;
	height: 15px;
}
.layui-btn-xs{
	height: 22px;
	line-height: 22px;
	padding: 0 5px;
	font-size: 12px;
}
	
</style>
<script type="text/javascript">
	var page = 1; //从第一页开始
	var number = 15; //每页显示数量
	var json; //得到的json对象
	var powerJSON = <%=Tools.gson.toJson(PowerConfig.getPowerList()) %>;
	var opearState = 1;//操作状态：！增加，2修改
	var index=0;//修改的下标

	//添加修改管理员
	function addUpdata_Admin() {
		var str = "admin_name=" + $("#admin_name").val()+"&phone="+$("#phone").val()
			+"&password="+$("#password").val()+"&jurisdiction="+getSelectPower();
		if(opearState==1){
			str+="&state=1";
		}else{
			str+="&state=2&id="+json[index].id;
		}
		$.ajax({
			type : "post",
			url : "../../AdminManage/adminManager",
			async : true,
			data : str,
			success : function(data) {
				if (data.status == 1) {
					$("#myModal").modal("hide");
					getgroups();
				} else {
					bootoast({message: data.msg,  type: 'danger',  position:'right-bottom', timeout:2  }); 
				}
			}
		});
	}
	
	//获取选择的权限
	function getSelectPower(){
		var powerList='[';
		$(".jurisdiction").each(function() {
			if ($(this).is(':checked')) {//表示选中
				powerList += $(this).val() + ",";
			}
		});
		if(powerList.length>1){//有加上权限
			powerList = powerList.substring(0, powerList.length - 1) + "]";
		}else{
			powerList='[]';
		}
		return powerList;
	}
	
	

	//显示添加框
	function show_model() {
		$("#admin_name").val("");
		$("#phone").val("");
		$("#password").val("");
		$(".jurisdiction").prop("checked", false);
		$("#myModal").modal("show");
	}
	//显示修改框
	function show_model_Update(i) {
		index=i;
		opearState=2;
		$("#admin_name").val(json[i].admin_name);
		$("#phone").val(json[i].phone);
		$("#password").val(json[i].password);
		//选择对应的权限
		if(json[i].jurisdiction!=null && json[i].jurisdiction.length>3){//有权限
			$(".jurisdiction").each(function() {
				console.log(json[index].jurisdiction);
				var powers = JSON.parse(json[index].jurisdiction);
				for(var i=0;i<powers.length;i++){
					if ($(this).val()==powers[i]) {//表示要选中
						$(this).prop("checked", true);
						break;
					}
				}
			});
		}else{
			$(".jurisdiction").prop("checked", false);
		}
		
		$("#myModal").modal("show");
	}

	
	//获取管理员分组
	function getgroups() {
		$.ajax({
					type : "get",
					url : "../../AdminManage/adminManager",
					async : true,
					data : "state=4",
					success : function(res) {
						json = res.data;
						if (res.status == 1) {
							var htmlCon = "";
							for ( var i = 0; i < json.length; i++) {
								htmlCon += "<tr>"
										+ "<td>"+ (i + 1)+ "</td>"
										+ "<td>"+ json[i].admin_name+ "</td>"
										+ "<td>"+ json[i].phone+ "</td>"
										+ "<td>"+ getPowerName(json[i].jurisdiction)+ "</td>"
										+ "<td>"+ FormatDate(json[i].time)+ "</td>"
										+ "<td><button class='btn layui-btn-xs btn-info' onclick='show_model_Update("+ i+ ")'>修改</button>"
										+ "<button class='btn layui-btn-xs btn-danger' onclick='group_delete("+ json[i].id + ")'>删除</button>"
										+ "</td></tr>";

							}
						$("#tr_content").html(htmlCon);
						} else {
							bootoast({message: data.msg,  type: 'danger',  position:'right-bottom', timeout:2  }); 
						}
					}

				});
	}
	
	//编号获取对应的名称
	function getPowerName(powers){
		powers = JSON.parse(powers);
		var name="";
		for(var i=0;i<powers.length;i++){
			for(var j=0;j<powerJSON.length;j++){
				console.log(powerJSON[j].code+"="+powers[i]);
				if(powerJSON[j].code==powers[i]){//表示就是当前权限
					name+="《"+powerJSON[j].name+"》、";
					break;
				}
			}
		}
		return name.substring(0,name.length-1);
	}
	
	

	//删除管理员账号
	function group_delete(id) {
		if(confirm('确定删除该管理员账号?')){
			var str = "state=3&id=" + id;
			$.ajax({
				type : "get",
				url : "../../AdminManage/adminManager",
				async : true,
				data : str,
				success : function(res) {
					if (res.status == 1) {
						bootoast({message: "删除成功",  type: 'danger',  position:'right-bottom', timeout:2  }); 
						getgroups();
					} else {
					
					}
				}
			});
		} 
		

	}


	//页面加载完后开始执行
	$(function() {
		getgroups();
	});
</script>
<style type="text/css">
.image-style {
	width: 30%;
	min-width: 100px;
	max-width: 180px;
	min-height: 50px;
	max-height: 90px;
}

.btn {
	margin: 1px;
}

.xn-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
</style>
<body>
	<div class="page-header xn-header">
		<h4>管理员管理：</h4>
		<button class='btn btn-primary' onclick='show_model()'>添加管理员</button>
	</div>
	<hr />


	<!-- 表格 -->
	<table
		class="table table-striped table-bordered table-hover" border="1"
		cellpadding="0">
		<tr>
			<th>序号</th>
			<th>名称</th>
			<th>账号</th>
			<th>权限</th>
			<th>创建时间</th>
			<th>操作</th>
		</tr>
		<tbody id="tr_content">
		
		</tbody>
	</table>





	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="z-index: 10000;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">添加管理员</h4>
				</div>
			<div class="modal-body">
					请输入管理员名字：<input type="text" id="admin_name" class="form-control"><br>
					管理员手机号码（登录账户）：<input type="text" id="phone" class="form-control"><br>
					请输入登录密码：<input type="password" id="password" class="form-control"><br>
					权限选择：<br>
					 <div class="row">
						<% 
						List<PowerBean> list = PowerConfig.getPowerList();
						for(PowerBean bean : list){
						
						%>
						 <div class="col-md-4">
						 <lable> <input type="checkbox" class="jurisdiction" name="jurisdiction" value="<%=bean.getCode()%>" /> <%=bean.getName()%></lable> 
						 </div>
						<%	} %>
						</div>
					
			</div>
				<div class="modal-footer">
					<button id="updateBut" type="button" class="btn btn-primary"
						onclick="addUpdata_Admin()">确认</button>
				</div>
			</div>
		</div>
	</div>



</body>
</html>
