<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/header2.jsp"%>
<link rel="stylesheet" type="text/css" href="${ctx}/css/newCss/dialog.css">
<title>用户管理</title>
<style>
	
	/*#queryDiv .a_btn, #queryDiv .b_btn {
		margin-right: 5px;
		float:none;
	}
	.btnDiv span {
	    padding-right: 5px !important;
	}*/
</style>
</head>
<body>
<body class="bg1">
	<!--头部-->
	<div class="headCon">
		<%@ include file="/WEB-INF/jsp/top2.jsp"%>
	</div>
	<div class="clear"></div>

	<div class="container_fluid">
		<!--左侧菜单-->
		<div class="searchCon left_menu managerLeft">
			<jsp:include page="/include/manageLeft.jsp">
				<jsp:param name="index" value="用户管理" />
			</jsp:include>
			<!-- <ul>
				<hna:permission privilege="sysUser.view">
				<li class="on"><a href="${ctx}/sysUser/list.do">用户管理</a></li>
				</hna:permission>
				<hna:permission privilege="sysRole.view">
				<li><a href="${ctx}/sysRole/list.do">角色管理</a></li>
				</hna:permission>
				<hna:permission privilege="sysAuthority.view">
				<li><a href="${ctx}/sysAuthority/list.do">权限管理</a></li>
				</hna:permission>
				<hna:permission privilege="sysLog.view">
				<li><a href="${ctx}/sysLog/list.do">日志查看</a></li>
				</hna:permission>
				<hna:permission privilege="sysTask.issuing">
				<li><a href="${ctx}/sysTask/list.do">任务管理</a></li>
				</hna:permission>
			</ul> -->
		</div>
		<!--主要内容-->
		<div class="resultCon" style="margin-left: 255px;position:relative">
			<input type="hidden" id="CSRFToken" value="${csrfToken }"/>
			<!--输入框查询的内容-->	
			<div class="reSearch">
				<div class="p_bar" style="border-bottom: 1px dashed #afb4bb;">您当前的位置：用户管理</div>
				<div class="row">
					<div class="col-md-4">
						<div class="search-group">
							<span class="search_text">P13账号:</span>
							<input class="input_txt" type="text" name="username" placeholder="请输入P13账号"/>
						</div>
					</div>
					<div class="col-md-4">
						<div class="search-group">
							<span class="search_text">用户状态:</span>
							<select name="status"  class="input_txt">
								<option value="">请选择...</option>
								<c:forEach items="${statusMap}" var="status">
									<option value="${status.key}">${status.value}</option>
								</c:forEach>
							</select>
						</div>
					</div>
					<div class="col-md-4">	
						<div class="search-group">
							<span class="search_text">删除标志:</span>
							<select name="deleteFlag" class="input_txt">
								<option value="">请选择...</option>
								<option value="-1" selected="selected">未删除</option>
								<option value="1">已删除</option>
							</select>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="search-group btnCon">
						<span>
							<button class="btn btn-primary" id="searchBtn"><span class="glyphicon glyphicon-search" aria-hidden="ture"></span>查询</button>
						</span>
						<span>
							<button class="btn btn-primary" id="exportBtn"><span class="glyphicon glyphicon-export" aria-hidden="ture"></span>导出</button>
						</span>
						
						<span class="user_export">
							<button class="btn btn-primary" id="importBtnByOne"><span class="glyphicon glyphicon-plus" aria-hidden="ture"></span>新增用户</button>
						</span>
						
						<span>
							<button class="btn btn-primary" id="importModelBtn"><span class="glyphicon glyphicon-import" aria-hidden="ture"></span>导入模板下载</button>
						</span>
						<span>
							<button class="btn btn-primary" id="importBtn"><span class="glyphicon glyphicon-file" aria-hidden="ture"></span>批量用户导入</button>
							<input type="file" id="importBtnCon" name="markFile" style="display:none;"/>
						</span>
					</div>
					
				</div>
			</div>
			<!--表格的内容-->	
			<div class="clear"></div><!-- 清除浮动 -->
			<div class="resultTable" style="width: 99%;padding: 10px;border-radius: 5px;">
				<table id="tbwrap" class="table table-bordered" style="table-layout:fixed;"></table>
				<div class="page eui-pager-custom" id="j_pager"></div>
			</div>	
		</div>
	</div>
				<!-- <div id="menuContent" class="menuContent" style="display:none; position: absolute;background-color: white;">
					<ul id="treeDemo" class="ztree" style="margin-top:0; width:300px;"></ul>
				</div>
				<div id="menuContentForRole" class="menuContent" style="display:none; position: absolute;background-color: white;">
					<ul id="treeDemoForRole" class="ztree" style="margin-top:0; width:300px;"></ul>
				</div> -->
	<script type="text/html" id="tb_template">
		<thead>
			<tr>
				<th>P13账号</th>
				<th>姓名</th>
				<th>分公司代码</th>
				<th>分公司名称</th>
				<th>用户状态</th>
				<th>删除标识</th>
				
				<th>拥有角色</th>
				
				<th style="width:245px">操作</th>
			</tr>
		</thead>
		<tbody data-type="body">
			<!if(list.length>0) { !>
				<!for(var i=0,len=list.length;i<len;i++){
					var item = list[i],classItem = (i%2!=0)?"odd td_odd":"even";
				!>
				<tr class="gradeA <!=classItem!>">
					<td title="<!=item["username"]!>"><!=item["username"]!></td>
					<td title="<!=item["userCnName"]!>"><!=item["userCnName"]!></td>
					<td title="<!=item["branchComCode"]!>"><!=item["branchComCode"]!></td>
					<td title="<!=item["branchComName"]!>"><!=item["branchComName"]!></td>
					<td title="<!=item["statusName"]!>"><!=item["statusName"]!></td>
					<td title="<!=item["deleteFlagName"]!>"><!=item["deleteFlagName"]!></td>
					<!if(item["deleteFlagName"]=="删除"){!>
						<td></td>
						<td></td>
					<!}else{!>
						
						<td><a data-value="<!=item["userId"]!>" class="aboutRole btn btn-primary btn-xs">
						<span class="glyphicon glyphicon-eye-open" aria-hidden="ture"></span>查看</a></td>
						
						<td>

							
							<a title="设置角色" data-value="<!=item["userId"]!>" class="setRole btn btn-primary btn-xs"><span class="glyphicon glyphicon-cog" aria-hidden="ture"></span>设置角色</a> 
							
							<a title="详情" data-value="<!=item["userId"]!>" data-name="<!=item["userCnName"]!>" class="detail btn btn-primary btn-xs"><span class="glyphicon glyphicon-list" aria-hidden="ture"></span>详情</a>
							
							<a title="修改" data-value="<!=item["userId"]!>" data-name="<!=item["userCnName"]!>" class="edit btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="ture"></span>修改</a>
							
							<a title="删除" data-value="<!=item["userId"]!>" data-name="<!=item["userCnName"]!>" class="delete btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="ture"></span>删除</a>
							
						</td>
					<!}!>
				</tr>
			<!}!>
			<!}else{!>
				<tr>
					<td colspan="7"> 暂无数据</td>
				</tr>
			<!}!>
		</tbody>
	</script>

	<script src="${ctx}/js/lib/core.js"></script>
	<script src="${ctx}/js/lib/jquery.ajaxfileupload.js"></script>
	<script type="text/javascript">
		var sysUserDialog;
		$(function() {

			// 1、添加
			$("#addBtn").click(function() {
				seajs.use("component/dialog", function(dialog) {
					sysUserDialog = new dialog({
						"width" : 800,
						"height" : 500,
						"contentType" : "iframe",
						"html" : "${ctx}/sysUser/toAdd.do",
						// 内容
						"title" : "添加系统用户信息" //标题
					});
				});
			});

			// 2、详细
			$("#tbwrap").delegate(
					".detail",
					"click",
					function() {
						// 2.1 获取主键
						var sysUserId = $(this).data("value");
						var sysUserName = $(this).data("name");
						// 2.2 弹窗窗口，显示详细信息
						seajs.use("component/dialog", function(dialog) {
							sysUserDialog = new dialog({
								"width" : 800,
								"height" : 600,
								"contentType" : "iframe",
								"html" : "${ctx}/sysUser/view.do?userId="
										+ sysUserId, // 内容
								"title" : "查看"+sysUserName+"详细信息" //标题
							});
						});
					});

			// 3、编辑
			$("#tbwrap").delegate(
					".edit",
					"click",
					function() {
						// 3.1 获取主键
						var sysUserId = $(this).data("value");

						// 3.2 弹窗窗口，显示详细信息
						seajs.use("component/dialog", function(dialog) {
							sysUserDialog = new dialog({
								"width" : 800,
								"height" : 600,
								"contentType" : "iframe",
								"html" : "${ctx}/sysUser/toEdit.do?userId="
										+ sysUserId,
								// 内容
								"title" : "编辑详细信息" //标题
							});
						});
					});
			// 4、删除
			$("#tbwrap")
					.delegate(
							".delete",
							"click",
							function() {
								var sysUserId = $(this).data("value");

								if (confirm('确定删除？')) {
									$
											.post(
													"${ctx}/sysUser/delete.do",
													{
														userId : sysUserId,
														CSRFToken : $(
																"#CSRFToken")
																.val()
													},
													function(result) {
														if ("succ" == result) {
															alert("操作成功");
															// 刷新列表页面
															top.location
																	.replace("${ctx}/sysUser/list.do?ts="
																			+ new Date()
																					.getTime()); //如果操作成功则跳到列表界面 
															// 关闭弹窗窗口
															sysUserDialog
																	.close();
														} else if ("notThroughSecurityCheck" == result["isThroughSecurityCheck"]) { // 如果不通过安全检查
															var mess = result["mess"];
															$
																	.post(
																			"${ctx}/common/notThroughSecurityCheck.do?ts="
																					+ new Date()
																							.getTime(),
																			mess,
																			function(
																					res) {
																				alert(res);
																			},
																			"json");

														} else {
															alert(result);
														}
													}, "json");
								}

							});
			// 5、查询
			$("#searchBtn").click(function() {
				search();
			});
			$("#tbwrap").delegate(".aboutRole", "click", function (e) {
				// 2.1 获取主键
				var userId = $(this).data("value");
				seajs.use("component/dialog", function (dialog) {
				    sysUserDialog = new dialog({
				        "width" : 800,
				        "height" : 220,
				        "contentType" : "iframe",
						"html" : "${ctx}/sysUser/relevanceRole.do?userId="+userId, // 内容
				        "title" : "拥有角色" //标题
					});
				});
			});
			$("#tbwrap").delegate(".setRole", "click", function () {
				// 2.1 获取主键
				var userId = $(this).data("value");
				// 2.2 弹窗窗口，显示详细信息
				seajs.use("component/dialog", function (dialog) {
				    sysUserDialog = new dialog({
				        "width" : 800,
				        "height" : 590,
				        "contentType" : "iframe",
						"html" : "${ctx}/sysUser/toSetRole.do?userId="+userId, // 内容
				        "title" : "设置角色" //标题
					});
				});
			});
			// 页面加载完成调用查询分页
			search();
			//导出用户信息
			$("#exportBtn").click(function(){
				var deleteVal=$("[name='deleteFlag']").find("option:selected").val();
				window.location.href="${ctx}/sysUser/exportUserInfo.do?deleteFlag="+deleteVal;
			});
			//导入用户模板下载
			$("#importModelBtn").click(function(){
				window.location.href="${ctx}/sysUser/downloadForUserManager.do";
			});
			//单个用户导入
			$(".user_export").delegate("#importBtnByOne", "click", function () {
				seajs.use("component/dialog", function (dialog) {
				    sysUserDialog = new dialog({
				        "width" : 800,
				        "height" : 590,
				        "contentType" : "iframe",
						"html" : "${ctx}/sysUser/addUserViewByOne.do", // 内容
				        "title" : "添加用户" //标题
					});
				});
			});
			
			//批量用户导入
			$("#importBtn").click(function(){
				$("#importBtnCon").click();
			})
			$("#importBtnCon").ajaxfileupload({
			    action: '${ctx}/sysUser/addUserViewByMany.do',
			    valid_extensions : ['xls','xlsx'],
			    params: {
					extra: 'markFile'
			    },				
			    onComplete: function(data,a,b,c) {
					if(data.status=="err"){
						alert(data.mess);
						$("#importBtn").val("批量用户导入");
						return;
					}else{
						alert(data.mess);
						$("#importBtn").val("批量用户导入");
					}
					var result=data;

					console.log(data);
					//alert(JSON.stringify(data));
			    },
			    onStart: function() {
					$("#importBtn").val("正在上传...");
					//if(weWantedTo) return false; // cancels upload
			    },
			    onCancel: function() {
					console.log('no file selected');
			    },
				errow:function(data){
					alert("上传失败");
				}
			});

		});
	</script>

	<script type="text/javascript">
		function search() {
			// 这里放包含查询条件的DIV
			var paramData = {
				page:1,
				username:$("[name='username']").val(),
				status:$("[name='status']").find("option:selected").val(),
				mobile:$("[name='phonenumber']").val(),
				deleteFlag:$("[name='deleteFlag']").find("option:selected").val(),
			};

			seajs.use([ "component/table" ], function(uiTable) {
				$.post("${ctx}/sysUser/ajaxPage.do",paramData,function(data){
					var table = new uiTable({
						 "con": "#tbwrap",//放table的容器
						 "data": {
							 "list": data.dataList//渲染需要的数据
						 },
						 "template": "tb_template",//渲染的模板
						 "pager": {//翻页
							 "con": "#j_pager",//翻页容器
							 "data": {
								 "currentPage": data.currentPage,//当前页
								 "pageCount": data.pageCount,
								 "rowCount": data.rowCount
							 },
							 //翻页样式
							 template: '<ul class="pagination" style="margin: 0;"><li><a title="首页" class="page_first" data-role="first" href="#">首页</a></li><li><a title="上一页" class="page_prev" href="#" data-role="prev">上一页</a></li><li class="pageNum" data-value="pageNum"><a></a></li><li><a title="下一页" class="page_next" href="#" data-role="next">下一页</a></li><li><a title="尾页" class="page_last" href="#" data-role="last">尾页</a></li></ul><div class="pageGo">共<span data-role="rowCount"></span>条 跳转到 <input  type="text" data-target="input" class="input_txt" style="width:80px;"/><a href="#" data-role="go" class="go">GO</a></div>'
						 }
					 });
					 table.getPager().bind("changePage", function (event, page, hander) {//点击翻页时
						 var paramData = {
									page:page,
									username:$("[name='username']").val(),
									status:$("[name='status']").find("option:selected").val(),
									mobile:$("[name='phonenumber']").val(),
									deleteFlag:$("[name='deleteFlag']").find("option:selected").val(),
								};
						 $.post("${ctx}/sysUser/ajaxPage.do",paramData,function(change){
							 table.render({//重新渲染
									list: change.dataList//传入新的渲染数据
								});
								hander({
									"currentPage": change.currentPage,
									"pageCount": change.pageCount,
									"rowCount": change.rowCount
								});
						 });
					 });
				});
			});
		}
	</script>
	<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
	<script>
	     $(function () {
	     	$(".searchCon").perfectScrollbar();
		    $(".resultCon").perfectScrollbar();
			resize();
            $(window).resize(function(){
				resize();
			});			
	    });
	    function resize(){
			//获取窗口高度
			var windowheight=$(window).height();
			var leftList = windowheight-40;
			$(".searchCon").css({"height":leftList+"px"});
			$(".resultCon").css({"height":leftList-30+"px"});
			//$(".tableMain").css({"height":windowheight-40-42-131+"px"});
			//$(".table_list").css({"height":windowheight-40-42-100-85+"px"});
			$(".searchCon").perfectScrollbar("update");
			$(".resultCon").perfectScrollbar("update");
		}
	</script>
	<%@ include file="/include/footer.jsp"%>
</body>
</html>
