<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Xenon Boostrap Admin Panel" />
	<meta name="author" content="" />
	<title>系统用户管理</title>
</head>
<body class="page-body">
	<div class="page-container">
		<%@ include file="../../common/menu.jsp"%>
		<div class="main-content">
			<%@ include file="../../common/header.jsp"%>
			<div class="page-title">
				<div class="title-env">
					<h1 class="title">系统用户管理</h1>
				</div>
				<div class="breadcrumb-env">
					<ol class="breadcrumb bc-1">
						<li>
							<a href="#"><i class="fa-home"></i>系统管理</a>
						</li>
						<li class="active">
							<strong>系统用户管理</strong>
						</li>
					</ol>
				</div>
			</div>			
			<!-- Removing search and results count filter -->
			<div class="panel panel-default">
			  <c:if test="${PERMISSION.query}">
				<form class="form-horizontal" role="form" method="post">
					<div class="form-group">
						<label class="col-sm-1 control-label">用户名</label>
						<div class="col-sm-2">
							<input type="text" id="user_name" name="user_name" class="form-control" id="field-1">
						</div>
						<label class="col-sm-1 control-label" for="field-1">手机号码</label>
						<div class="col-sm-2">
							<input type="text" id="phone" name="phone" class="form-control" id="field-1">
						</div>
						<label class="col-sm-1 control-label" for="field-1">用户角色</label>
						<div class="col-sm-2">
							<select class="form-control" id="role_id" name="role_id"> 
								<option value="" selected>所有</option>
							    <c:forEach items="${rList }" var="r">
							      <option value="${r.id }">${r.name }</option>
							    </c:forEach>
							</select>
						</div>
						<button type="button" id="btn_search" class="btn btn-info">查询</button>
						<c:if test="${PERMISSION.add}">
							<button type="button" class="btn btn-add" onclick="toSave();">新增</button>
						</c:if>
					</div>
				</form>
			  </c:if>
				<div class="panel-body">
					<table class="table table-bordered table-striped" id="table-list">
						<thead>
							<tr>
								<th style="text-align: center;">用户名</th>
								<th style="text-align: center;">姓名</th>
								<th style="text-align: center;">手机号码</th>
								<th style="text-align: center;">邮箱</th>
								<th style="text-align: center;">性别</th>
								<th style="text-align: center;">用户角色</th>
								<th style="text-align: center;">状态</th>
								<th style="text-align: center;">创建时间</th>
								<th style="text-align: center;">操作</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<%@ include file="../../common/footer.jsp"%>
		</div>
	</div>
	
	<div class="modal fade" id="modal-delete" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">删除提示</h4>
				</div>
				<div class="modal-body">
					确定删除该用户吗？
				</div>
				<form role="form" class="form-horizontal">
					<div class="modal-footer">
						<input type="hidden" name="ids" id="ids">
						<button type="button" id="btn_delete" class="btn btn-info" onclick="deleteInfo();">确定</button>
						<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="modal fade" id="modal-change-status" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">提示</h4>
				</div>
				<div id="modal-change-status-div" class="modal-body">
					确定停用该用户吗？
				</div>
				<input type="hidden" id="changeUserId" value="" />
				<input type="hidden" id="changeUserStatus" value="" />
				<div class="modal-footer">
					<button type="button" class="btn btn-info"  id="btn_change_info" onclick="changeInfo(this);">确定</button>
					<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		function formReset(){
			setTimeout(function(){
				$('#search').click();
			},100);
	    }
		
		var table;
		$(function() {
			//table
			table = $('#table-list').dataTable({
				"dom": "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
				"aaSorting": [
					[7, "desc"]
				], //默认第几个排序
				"aoColumnDefs": [
					//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
					{"orderable":false,"aTargets":[0,1,2,3,4,5,6,8]} 
				],
				"bStateSave": false, //状态保存
				"bProcessing": false, // 是否显示取数据时的那个等待提示
                "bServerSide": true,//这个用来指明是通过服务端来取数据
                "sAjaxSource": "${ROOT_PATH}/sysUser/findList.do",//这个是请求的地址
                "bLengthChange" : true,// 每行显示记录数  
                "iDisplayLength" : 10,// 每页显示行数  
                "bSort" : true,// 排序
                "bAutoWidth" : false, //是否自适应宽度  
                "oLanguage": {  	// 分页语言
                    "sLengthMenu": "每页显示 _MENU_  条",  
                    "sZeroRecords": "没有找到符合条件的数据",  
                    "sProcessing": "我也是醉了，正在加载数据...",  
                    "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",  
                    "sInfoEmpty": "没有记录",  
                    "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",  
                    "sSearch": "搜索：",  
                    "oPaginate": {  
                        "sFirst": "首页",  
                        "sPrevious": "前一页",  
                        "sNext": "后一页",  
                        "sLast": "尾页"  
                    }  
        		},
				"aoColumns": [
					 {  
                        "sClass":"center", 
                        "mDataProp" : "user_name", 
                        "aTargets":[0],  
                        "mData":"user_name"
                    },
                    {  
                        "sClass":"center", 
                        "mDataProp" : "real_name", 
                        "aTargets":[1],  
                        "mData":"real_name"
                    },
                    {  
                    	"sClass":"center", 
                       	"mDataProp" : "phone",  
                        "aTargets":[2],  
                        "mData":"phone"  
                    },
                    {  
                    	"sClass":"center", 
                       	"mDataProp" : "email",  
                        "aTargets":[3],  
                        "mData":"email"  
                    },
                    {  
                        "sClass":"center", 
                        "mDataProp" : "sex", 
                        "aTargets":[4],  
                        "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象  
 						   	var ru =  ''
 							if(c.sex == '1'){
 								ru = '男';
 							}else if(c.sex == '2'){
 								ru = '女';
 							}
 							return ru;   
                         }  
                    },
                    {  
                        "sClass":"center", 
                        "mDataProp" : "role_name", 
                        "aTargets":[5],  
                        "mData":"role_name"
                    },
                    {  
                        "sClass":"center", 
                        "mDataProp" : "status", 
                        "aTargets":[6],  
                        "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象  
 						   	var ru =  ''
 						   	if(c.status == ''){
 						   		ru = '未知状态';
 							}else if(c.status == 'QIYONG'){
 								ru = '启用';
 							}else if(c.status == 'TINGYONG'){
 								ru = '停用';
 							}
 						   	return ru;   
                         }  
                    },
                    {  
                        "sClass":"center", 
                        "mDataProp" : "create_date", 
                        "aTargets":[7],  
                        "mData":"create_date"
                    },
					{  
                    	"sClass":"center",  
                        "aTargets":[8],  
                        "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象  
							var ru = '';
							if('${PERMISSION.update}' == 'true'){
								ru += '<a href=\"javascript:;\" class=\"btn btn-secondary btn-sm btn-icon icon-left\" onclick=\"toModify(\''+ c.id +'\');\">修改</a>';
							}
							if('${PERMISSION.update}' == 'true' && c.user_name != 'admin'){
								ru = ru + '<a href=\"javascript:;\" class=\"btn btn-white btn-sm btn-icon icon-left" onclick=\"changeTip(\''+ c.id +'\',this,\''+c.status+'\');\">';
								if(c.status == 'QIYONG'){
									ru = ru +  '停用';
	 							}else if(c.status == 'TINGYONG'){
	 								ru = ru +  '启用';
	 							}
								ru = ru + '</a>';
							}
							if('${PERMISSION.delete}' == 'true' && c.user_name != 'admin'){
								ru = ru + '<a href=\"javascript:;\" class=\"btn btn-danger btn-sm btn-icon icon-left\" onclick=\"deleteTip(\''+ c.id +'\');\">删除</a>';
							}
							if('${PERMISSION.update}' != 'true' && '${PERMISSION.delete}' != 'true'){
								ru = '无权限';
							}
							return ru;   
                        }  
                    }
				],
				 "fnServerData" : function(sSource, aoData, fnCallback) {  
	                //获取检索参数
					var user_name = $("#user_name").val();
					var phone = $("#phone").val();
					var role_id = $("#role_id").val();
					 $.ajax({
			                url : sSource,//这个就是请求地址对应sAjaxSource
			                data : {"aoData":JSON.stringify(aoData),"user_name":user_name,"phone":phone,"role_id":role_id},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
			                type : 'post',
			                dataType : 'json',
			                async : false,
			                success : function(result) {
			                	fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
			    				//表格数据居中
			    				$("td").attr("style","text-align:center");
			    				
			                },
			                error : function(msg) {
			                }
			            });
		           }  
			});
			//检索
			$('#btn_search').click( function() {
			    table.fnDraw();
			});
		});
		
		/** 添加系统用户 */
		function toSave()
		{
			window.location.href='${ROOT_PATH}/sysUser/toSave.do';
		}
		
		/** 修改系统用户 */
		function toModify(id)
		{
			window.location.href='${ROOT_PATH}/sysUser/toEdit.do?id=' + id;
		}
		
		/** 账号禁用/启用 */
		function changeInfo(src)
		{
			var userId = $("#changeUserId").val();
			var status = $("#changeUserStatus").val();
			$("#btn_change_info").attr("disabled","disabled");  
			$.ajax({
                url : "${ROOT_PATH}/sysUser/changeUserStatus.do",
                data : {"id":userId,"status":status},
                type : 'post',
                dataType : 'json',
                async : false,
                success : function(data) {
                	
                	window.setTimeout("enableBtn('#btn_change_info');",Constants.reloadTime);
                	if(data.result == '01'){
                		$("#modal-change-status").modal('hide');
                		toastr.success('更新成功', null, opts);
                		table.fnDraw();
	                } else {
                		toastr.error(data.msg, null, opts);
                		$("#modal-change-status").modal('hide');
                	}
                },
                error : function(msg) {
                	window.setTimeout("enableBtn('#btn_change_info');",Constants.reloadTime);
                	$("#modal-change-status").modal('hide');
                }
            });
		}
		
		/** 账号禁用/启用 */
		function changeTip(userId,src, status)
		{
			
			$("#changeUserId").val(userId);
			if(status == 'QIYONG'){
				$("#modal-change-status-div").html("确认要停用吗？");
				$("#changeUserStatus").val('TINGYONG');
			}else if(status == 'TINGYONG'){
				$("#modal-change-status-div").html("确认要启用吗？");
				$("#changeUserStatus").val('QIYONG');
			}
			$("#modal-change-status").modal('show', {backdrop: 'static'});
		}
		
		/** 账号删除 */
		function deleteInfo()
		{
			var id = $("#ids").val();
			$("#btn_delete").attr("disabled","disabled");  
			$.ajax({
                url : "${ROOT_PATH}/sysUser/delete.do",
                data : {"id":id},
                type : 'post',
                dataType : 'json',
                async : false,
                success : function(data) {
                	window.setTimeout("enableBtn('#btn_delete');",Constants.reloadTime);
                	if(data.result == '01'){
                		$("#modal-delete").modal('hide');
                		table.fnDraw();
	                }
                	else
                	{
                		$("#modal-delete").modal('hide');
                	}
                },
                error : function(msg) {
                	window.setTimeout("enableBtn('#btn_delete');",Constants.reloadTime);
                	$("#modal-delete").modal('hide');
                }
            });
		}
		/** 账号删除 */
		function deleteTip(id){
			$("#ids").val(id);
			jQuery('#modal-delete').modal('show', {backdrop: 'static'});
		}

	</script>
</body>
</html>