<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/header2.jsp"%>
<!-- <link type="text/css" rel="stylesheet" href="${ctx}/css/baseFrame.css" /> -->
<link rel="stylesheet" type="text/css" href="${ctx}/css/newCss/dialog.css">
<script src="${ctx}/component/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<title>查询日志列表</title>
<style>
	/*.c_table td.t_tit {
		width: 7%;	
	}
	#compare,#upload{
		background: #00B591;
		border:1px solid #00B591;
	}*/
	table.searchTab td {
	    padding: 5px 0px;
	}
</style>
</head>
<body class="bg1">
	<!--头部-->
   	<div class="headCon">
        <%@ include file="/WEB-INF/jsp/top2.jsp"%>
    </div>
    <div class="container_fluid">
    	<!--左侧菜单-->
		<div class="searchCon left_menu managerLeft">
			<jsp:include page="/include/manageLeft.jsp">
				<jsp:param name="index" value="日志查看" />
			</jsp:include>
		</div>

		<div class="resultCon"  style="margin-left: 255px;position:relative">	
			<div class="reSearch">	
	       		<div class="p_bar" style="border-bottom: 1px dashed #afb4bb;">您当前的位置：日志管理/系统日志</div>
				<form id="sysLogForm" action="post">
					<input type="hidden" id="page" name="page" value="1" />
					<table border="0" class="searchTab" style="width:100%">
						<tr>
							<td class="search_text">操作人 :</td>
							<td><input type="text" name="operationUsername" id="operationUsername" value="" class="input_txt" placeholder="请输入操作人"/></td>
							<td class="search_text">操作动作 :</td>
							<td>
								<select  id="operationAction" name="operationAction" class="input_txt">
									<option value="">--请选择--</option>
									<c:forEach items="${operActionMap}" var="var" >
										<option value="${var.key }">${var.value}</option>
									</c:forEach>
								</select> 
							</td>
							<td class="search_text">操作时间:</td>
							<td>
								<input 
									name="beginOperationTime" 
									id="beginOperationTime" 
									class="input_txt"  
									readonly="readonly" 
									placeholder="请输入起始时间"
									onfocus="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss',realDateFmt:'yyyy-MM-dd',realTimeFmt:'HH:mm:ss',minDate:'2010-01-01',maxDate:'#F{$dp.$D(\'endOperationTime\')||\'%y-%M-%d\'}'})" 
									/>
								&nbsp;/&nbsp;
								<input 
									name="endOperationTime" 
									id="endOperationTime" 
									class="input_txt"  
									readonly="readonly" 
									placeholder="请输入终止时间"
									onfocus="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss',realDateFmt:'yyyy-MM-dd',realTimeFmt:'HH:mm:ss',minDate:'#F{$dp.$D(\'beginOperationTime\')||\'2010-01-01\'}',maxDate:'%y-%M-%d'})" 
									class="input_txt" 
									/>
							</td>
						</tr>
						<tr>
							<td class="search_text">IP地址:</td>
							<td><input type="text" name="ip" id="ip" value="" class="input_txt" placeholder="请输入IP地址"/></td>
							<td class="search_text">日志类型 :</td>
							<td>
								<select  id="logType" name="logType" class="input_txt" >
									<option value="">--请选择--</option>
									<c:forEach items="${logTypeMap}" var="var" >
										<option value="${var.key }">${var.value}</option>
									</c:forEach>
								</select> 
							</td>
							<td class="search_text"></td>
							<td style="text-algin:right;">
								<button class="btn btn-primary" id="searchBtn" type="button"><span class="glyphicon glyphicon-search" aria-hidden="ture"></span>查询</button>
								<hna:permission privilege="sysLog.view">
									<button id="export" class="btn btn-primary" type="button"><span class="glyphicon glyphicon-export" aria-hidden="ture"></span>导出</button>
								</hna:permission>
								<hna:permission privilege="sysLog.compare">
								 	<button type="button" title="根据日志中的案件标注信息同步数据库中案件标注信息" id="compare" class="btn btn-primary"><span class="glyphicon glyphicon-wrench" aria-hidden="ture"></span>日志同步</button>
								</hna:permission>
								<!-- <input type="button" value="导入标注" id="upload" class="a_btn"/> -->
							</td>
		
						</tr>
					</table>
				</form>
			</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>
	
	<script type="text/html" id="tb_template">
	    <thead>
			<tr>
				<th>操作人</th>
				<th>操作内容</th>
				<th>请求地址</th>
				<th>IP地址</th>
				<th>操作动作</th>
				<th>日志类型</th>
				<th>操作时间</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody data-type="body" id="queryTable">
    		<!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["operationUsername"]!>"><!=item["operationUsername"]!></td>
					<td title="<!=item["opeContent"]!>"><!=item["opeContent"]!></td>
			    	<td title="<!=item["requestUrl"]!>"><!=item["requestUrl"]!></td>
			    	<td title="<!=item["ip"]!>"><!=item["ip"]!></td>
				   <td title="<!=item["operationActionName"]!>"><!=item["operationActionName"]!></td>
  					<td title="<!=item["operationTypeName"]!>"><!=item["operationTypeName"]!></td>
			    	<td title="<!=item["operationTime"]!>"><!=item["operationTime"]!></td>
			    	<td>
						<a title="详情" data-value="<!=item["logId"]!>" class="detail btn btn-primary btn-xs">
						<span class="glyphicon glyphicon-list" aria-hidden="ture"></span>详情</a>&nbsp;
					</td>
		   		</tr>
        	<!}!>
    		<!}else{!>
				<tr>
		    		<td colspan="10"> 暂无数据</td>
				</tr>
    		<!}!>
 		</tbody>
	</script>

	<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
	<script type="text/javascript">
		var sysLogDialog;
		$(function(){
			// 2、详细
			$("#tbwrap").delegate(".detail", "click", function () {
				// 2.1 获取主键
				var logId = $(this).data("value");
				// 2.2 弹窗窗口，显示详细信息
				seajs.use("component/dialog", function (dialog) {
				    sysLogDialog = new dialog({
				        "width" : 800,
				        "height" : 600,
						"scrollable":false,
				        "contentType" : "iframe",
						"html" : "${ctx}/sysLog/view.do?logId="+logId, // 内容
				        "title" : "查看系统操作日志信息" //标题
					});
				});
			});
			// 5、查询
			$("#searchBtn").click(function () {
				search();
	        });
			// 6、导出
			$("#export").click(function () {
				download();
	        });
			$("#compare").click(function () {
				window.location.href="${ctx}/sysLog/toCampareMark.do";
	        });
			/*$("#upload").click(function () {
				window.location.href="${ctx}/sysLog/toUploadMark.do";
	        });*/
		});
	
		$(function () {
			$(".resultCon").perfectScrollbar();
			$(".searchCon").perfectScrollbar();
	        search();
			resize();
			$(window).resize(function(){
				resize();
			});
	    });
		function resize(){
			//获取窗口高度
			var windowheight=$(window).height();
			var leftList = windowheight-40;
			$(".searchCon").css({"height":leftList+"px"});
			$(".resultCon").css({"height":leftList-12+"px"});
			//$(".tableMain").css({"height":windowheight-40-42-105+"px"});
			//$(".table_list").css({"height":windowheight-40-42-100-85+"px"});
			$(".searchCon").perfectScrollbar("update");
			$(".resultCon").perfectScrollbar("update");
		}
		function download(){
			var $form = $("<form style='display:none' target='downloadframe' action='${ctx}/sysLog/ajaxPage.do' method='post'>");
			var $dFlag = $("<input name='exportExcel' value='true'>");
			var $dOperationUsername = $("<input name='operationUsername' value='"+$("#operationUsername").val()+"'>");
			var $dOperationAction = $("<input name='operationAction' value='"+$("#operationAction option:selected").val()+"'>");
			var $dBeginOperationTime = $("<input name='beginOperationTime' value='"+$("#beginOperationTime").val()+"'>");
			var $dEndOperationTime = $("<input name='endOperationTime' value='"+$("#endOperationTime").val()+"'>");
			var $dLogType = $("<input name='logType' value='"+$("#logType option:selected").val()+"'>");
			var $dIp = $("<input name='ip' value='"+$("#ip").val()+"'>");
			$form.append($dFlag).append($dOperationUsername).append($dOperationAction).append($dBeginOperationTime).append($dEndOperationTime).append($dLogType).append($dIp);
			$("body").append($form);
			$form.submit();
			$form.remove();
		}
		function search() {
			
	        seajs.use(["component/table"], function (uiTable) {
	        	$("#page").val(1);
				var serializedForm = $("#sysLogForm").serialize();
		        $.post("${ctx}/sysLog/ajaxPage.do", serializedForm, 
		        function (result) {
		        	// alert("status="+result.status+", currentPage="+result.currentPage+", pageCount="+result.pageCount+", rowCount="+result.rowCount);
	            	var table = new uiTable({
	                	"con": "#tbwrap",
	                    "data": {
	                         "list": result.dataList
	                    },
	                    "template": "tb_template",
	                    "pager": {
	                    	"con": "#j_pager",
	                        "data": {
	                        	"currentPage": result.currentPage,
	                            "pageCount": result.pageCount,
	                            "rowCount": result.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) {
	                	$("#page").val(page);
	        			var serializedForm = $("#sysLogForm").serialize();
	                	$.post("${ctx}/sysLog/ajaxPage.do", serializedForm,
	                    function (result) {
	                    	table.render({ "list": result.dataList });
	                    	//fullRows("queryTable");
		                    hander({"currentPage": result.currentPage, "pageCount": result.pageCount, "rowCount": result.rowCount });
	                 	}, "json");
	                });
	        	}, "json");
	      	});
		}
	</script>
<%@ include file="/include/footer.jsp"%>
</body>
</html>