<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	response.setHeader("Pragma","No-cache");    
	response.setHeader("Cache-Control","no-cache");    
	response.setDateHeader("Expires", -10);  
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@include file="/WEB-INF/views/base.jsp"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>用户管理</title>
   	<%@include file="/WEB-INF/views/common_base_css.jsp"%>
</head>

<body>
	<input type="hidden" id="basePath" value="<%=basePath %>"  >
    <div id="wrapper">

    	<jsp:include page="../menu.jsp"></jsp:include>
			
        <div id="page-wrapper" class="gray-bg">
        	<jsp:include page="../head.jsp"></jsp:include>
        	<jsp:include page="../pageNav.jsp"></jsp:include>
        	
        	<input type="hidden" id="pageNo"  name="pageNo" value="1" >
            <!-- 页面 主题内容  开始-->
	        <div class="wrapper wrapper-content animated fadeInRight">
	        <div class="row">
	        	<!-- 用户 分配角色 弹层 -->
	        	<div class="modal inmodal" id="user-role" tabindex="-1" role="dialog" aria-hidden="true">
              		<div class="modal-dialog">
                     	<div class="modal-content animated flipInY">
                        	<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">角色分配</h4>
                           	</div>
                           	<div class="modal-body">
                           		<table >
                           			<tbody>
			                           	<c:forEach items="${roleList }" var="role" varStatus="status">	
			                           		<c:if test="${status.index%4 == 0 }">
			                           			<tr>
			                           		</c:if>
			                           		<td style="padding-left:35px;${status.index < 4 ? '':'padding-top: 20px' }">
				                           		 <div id="checkbox${role.roleId }" class="i-checks"><label  ><input  type="checkbox" value="${role.roleId }"> <i></i> ${role.roleName } </label></div>
						                    </td>
						                    <c:if test="${status.index%4 == 3 }">
			                           			</tr>
			                           		</c:if>
			                           		<c:if test="${status.index%4 !=3 && status.last }">
								                </tr>
								            </c:if>
						                </c:forEach>
				               		</tbody>
				                </table>
                           	</div>
                           	<!-- 角色菜单  tab 开始 -->
 <!--  	                	<div class="modal-body">
                            	<div class="tabs-container" >
                       				<div class="tabs-left" >
			                            <ul class="nav nav-tabs" style="width: 30%;">
			                            	<c:forEach items="${roleList }" var="role" varStatus="status">
			                                	<li class="${status.first ? 'active':'' }">
			                                		<a  data-toggle="tab" href="tabs.html#tab-${status.index }">
			                                			${role.roleName }
			                                		</a>
			                                	</li>
			                                </c:forEach>
			                            </ul>
			                            <div class="tab-content ">
			                            	<c:forEach items="${roleList }" var="role" varStatus="status">
				                                <div id="tab-${status.index }" class="tab-pane ${status.first ? 'active':'' }">
				                                    <div class="panel-body" style="width: 70%; margin-left: 30%;padding:10px">
				                                        <strong>当前角色拥有菜单：</strong>
				                                        <table class="table table-stripped small m-t-md" style="width:auto">
						                                    <tbody>
						                                    	<c:forEach items="${role.menuList }"  var="menu" varStatus="st">
						                                    		<c:if test="${st.index%3 == 0 }">
								                                   		<tr>
								                                    </c:if>
								                                        <td class="no-borders">
								                                            <i class="fa fa-circle text-navy"></i>
								                                        </td>
								                                        <td  class="no-borders">
								                                            ${menu.menucnname }
								                                        </td>
								                                    <c:if test="${st.index%3 == 2 }">    
								                                    	</tr>
								                                    </c:if>
								                                    <c:if test="${st.index%3 !=2 && st.last }">
								                                    	</tr>
								                                    </c:if>
							                                    </c:forEach>
						                                    </tbody>
						                                </table>
				                                    </div>
				                                </div>
				                            </c:forEach>    
			                            </div>
                        			</div>
                   				 </div>
                            </div>   --> 
                            <!-- 角色菜单  tab 结束-->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            	<button type="button" data-dismiss="modal" id="updateUserRole" class="btn btn-primary">保存</button>
                            </div>
                         </div>
                     </div>
                 </div>
	        	<!-- 用户 分配角色 弹层 -->
	        
	            <!-- 查询条件 开始 -->
	           
	            <div class="ibox-content m-b-sm border-bottom">
			        <div class="row">
			            <div class="col-sm-4">
			                <div class="form-group">
			                    <label class="control-label" for="username">姓名</label>
			                    <input type="text" id="Username" name="username" value="${condition.username }" placeholder="姓名" class="form-control">
			                </div>
			            </div>
			            <div class="col-sm-4">
			                <div class="form-group">
			                    <label class="control-label" for="employeeNo">员工号</label>
			                    <input type="text" id="EmployeeNo" name="employeeno" value="${condition.employeeno }" placeholder="员工号" class="form-control">
			                </div>
			            </div>
			            <div class="col-sm-4">
			                <div class="form-group">
			                    <label class="control-label" for="search">查询</label>
			                    <button onclick="query()" class="btn btn-w-m btn-success form-control"><i class="fa fa-search"></i>&nbsp;&nbsp;查询</button>
			                </div>
			            </div>
			        </div>
				</div>
	            <!-- 查询条件 结束 -->
	            
	            <!-- 用户列表开始 -->
	            <div class="ibox float-e-margins">
				    <div class="ibox-title">
				        <a href="userAdd" class="btn btn-w-m btn-primary"><i class="fa fa-plus-square"></i>&nbsp;&nbsp;新增</a>
				    </div>
				    <div class="ibox-content" id="UserListPartial">
						
				    </div>
				    
				</div>
	            <!-- 用户列表结束 -->
	        </div>    
	        </div>
	        <!-- 页面主题内容 结束 -->
        </div>
    </div>


    <!-- Mainly scripts -->
    <%@include file="/WEB-INF/views/common_base_script.jsp"%>
    <!-- Toastr script -->
    <script src="${jsPath }/sysuser/sysuser.js"></script>
        <script>
            $(document).ready(function () {
                $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
                });
                initData();
            });
            
            var basePath = "<%=basePath %>";
            function initData(){
            	var userName = $("#Username").val();
	            var employeeno = $("#EmployeeNo").val();
	            var pageNo = $("#pageNo").val();
				//第一次加载数据
				$.ajax({
					type : 'POST',
					async : false,
					url : basePath + 'sysUser/initDataList',
					data : {'pageNo' : pageNo, 'username':userName, 'employeeno': employeeno },
					dataType : 'html',
					success : function(data){
						$("#UserListPartial").html(data);
						//alert(data);
						//var test = document.getElementById('UserListPartial');
						//test.innerHTML = data;
					}
				})
            }
        	
        	function query(){
        		$("#pageNo").val("1");
        		initData();
        	}
        </script>     
        
</body>

</html>