<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/include/header2.jsp"%>
<title>疑案管理</title>
<style>
	.input_txt{
		width: 200px
	}
</style>
</head>
<body class="bg1">
	<div class="headCon">
		<jsp:include page="/WEB-INF/jsp/top2.jsp">
		<jsp:param name="index" value="疑案管理" />
		</jsp:include>
	</div>
	<div class="clear"></div>

	<div class="container_fluid">
		<!--左侧菜单-->
		<div class="searchCon left_menu managerLeft">
			<jsp:include page="/include/personalLeft.jsp">
				<jsp:param name="index" value="标注管理" />
			</jsp:include>
		</div>
		<!--主要内容-->
		<div class="resultCon">
			<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" style="line-height: 35px;">案件号:</span>
						    <input type="text" class="input_txt" name="name" placeholder="请输入案件号"/>
						</div>
						<div class="search-group">
						    <span class="search_text" style="line-height: 35px;">标注状态:</span>
						    <select class="input_txt" name="markStatus">
								<option value="" data-markstatus="">请选择...</option>
								<option value="可疑" data-markstatus="1">可疑</option>
								<option value="欺诈" data-markstatus="2">欺诈</option>
								<option value="正常" data-markstatus="0">正常</option>
							</select>
						</div>
					</div>
					<div class="col-md-8">
						<div class="search-group">
							<span class="search_text" style="line-height: 35px;">时间范围:</span>
						      	<input 
									name="beginDate" 
									id="beginDate" 
									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(\'endDate\')||\'%y-%M-%d\'}'})"/>
							    <b style="font-size:16px">/</b>
							    <input 
									name="endDate" 
									id="endDate" 
									class="input_txt"  
									readonly="readonly" 
									placeholder="请输入结束日期"
									onfocus="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss',realDateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'beginDate\')||\'2010-01-01\'}',maxDate:'%y-%M-%d'})" />								    
						</div>
						<div class="search-group">
							<span style="float: right;margin-right:20px;margin-bottom: 10px;">
								<button class="btn btn-primary" id="addBtn"><span class="glyphicon glyphicon-export" aria-hidden="ture"></span>标注导出</button>
								<button class="btn btn-primary" id="upload"><span class="glyphicon glyphicon-import" aria-hidden="ture"></span>标注导入</button>
							    <button class="btn btn-primary" id="searchBtn"><span class="glyphicon glyphicon-search" aria-hidden="ture"></span>查询</button>
							</span>
						</div>
					</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>

	<!--表格模板引擎-->
	<script type="text/html" id="tb_template">
		<thead>
			<tr>
				<th style="width:18%;">案件号</th>
				<th style="width:18%;">标注日期</th>
				<th style="width:14%;">标注人</th>
				<th style="width:14%;">姓名</th>
				<th style="width:11%;">标注状态</th>
				<th style="width:25%;">标注内容</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.name!>"><!=item.name!></td>										
					<td title="<!=item.markDate!>"><!=item.markDate!></td>
					<td title="<!=item.markUser!>"><!=item.markUser!></td>
					<td title="<!=item.markUserName!>"><!=item.markUserName!></td>
					<td title="<!=item.markStatus!>"><!=item.markStatus!></td>
					<td title="<!=item.markMess!>"><!=item.markMess!></td>			
				</tr>
			<!}!>
			<!}else{!>
				<tr>
					<td colspan="7"> 暂无数据</td>
				</tr>
			<!}!>
		</tbody>
	</script>

	<script src="${ctx}/js/lib/core.js"></script>
	<script src="${ctx}/component/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
	<script type="text/javascript">
		var sysRoleDialog;
		$(function() {

			// 查询
			$("#searchBtn").click(function() {
				search();				
			});
			search();
			
			//点击导出
			$("#addBtn").click(function(){
				var start = $("#beginDate").val().toString();
				var end = $("#endDate").val().toString();
				var markStatus=$("[name='markStatus']").find("option:selected").data("markstatus");
				<!--$("[name='markStatus']").find("option:selected").val().toString();-->
				var minTime = new Date(Date.parse(start.replace(/-/g,"/")));
				var maxTime = new Date(Date.parse(end.replace(/-/g,"/")));
				if(minTime.getTime()>maxTime.getTime()){
					alert("起始时间不能大于终止时间！");
					return false;
				}
				download(start,end,markStatus);
			});
			
			//下载
			function download(start,end,markStatus){
				var $form = $("<form style='display:none' target='downloadframe' action='${ctx}/sysPersonal/downloadmarkPersonal.do' method='post'>");
				var $start = $("<input name='start' value='"+start+"'>");
				var $end = $("<input name='end' value='"+end+"'>");
				var $markStatus = $("<input name='markStatus' value='"+markStatus+"'>");
				$form.append($start).append($end).append($markStatus);
				$("body").append($form);
				$form.submit();
				$form.remove();
			}
			
			
			//导入标注
			$("#upload").click(function () {
				//$("#timeFilterAlert").css("display","block");
				window.location.href="${ctx}/sysPersonal/markImport.do";
	        });
		})		
	</script>
	<script type="text/javascript">
		function search() {
			//查询时，时间判断
			var beginDate = $("#beginDate").val().toString();
			var endDate = $("#endDate").val().toString();
			var minTime = new Date(Date.parse(beginDate.replace(/-/g,"/")));
			var maxTime = new Date(Date.parse(endDate.replace(/-/g,"/")));
			if(minTime.getTime()>maxTime.getTime()){
				alert("起始时间不能大于终止时间！");
				return false;
			}
			// 这里放包含查询条件的DIV
			var paramData = {
				page:1,
				beginDate:beginDate,
				endDate:endDate,
				markStatus:$("[name='markStatus']").find("option:selected").data("markstatus"),
				name:$("[name='name']").val()//案件号
			};

			seajs.use([ "component/table" ], function(uiTable) {
				//data={"pageCount":3,"dataList":[{"userId":"123","level":2,"username":"C530100VEH16052668","userCnName":"C530100VEH16052668","email":" 12341234"},{"userId":"123","level":2,"username":"C530000VEH16025180","userCnName":"C530000VEH16025180","email":" 123"}],"rowCount":22,"currentPage":1};
				$.post("${ctx}/sysPersonal/showExportInfo.do",paramData,function(data){
					var table = new uiTable({
						 "con": "#tbwrap",//放table的容器,"rowCount":22,"currentPage":1}
						 "data": {
							 "list": data.dataList//渲染需要的数据
						 },
						 "template": "tb_template",//渲染的模板
						 "pager": {//翻页
							 "con": "#j_pager",//翻页容器
							 "data": {
								 "currentPage": data.currentPage,//当前页
								 "pageCount": data.totalPage,
								 "rowCount": data.total
							 },
							 //翻页样式
							 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 = {
									currentPage:page,
									beginDate:beginDate,
									endDate:endDate,
									markStatus:$("[name='markStatus']").find("option:selected").data("markstatus"),
									name:$("[name='name']").val()//案件号
								};
						 $.post("${ctx}/sysPersonal/showExportInfo.do",paramData,function(change){
							 table.render({//重新渲染
									list: change.dataList//传入新的渲染数据
								});
								hander({
									"currentPage": change.currentPage,
									"pageCount": change.totalPage,
									"rowCount": change.total
								});
						 });
					 });
				});
			});
		}
	</script>
	<%@ include file="/include/zTree.jsp" %>	
	<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
	<script>
	     $(function () {
			$(".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-12+"px"});
			//$(".tableMain").css({"height":windowheight-40-42-131+"px"});
			//$(".table_list").css({"height":windowheight-40-42-100-85+"px"});
			$(".resultCon").perfectScrollbar("update");
		}
	</script>
	<%@ include file="/include/footer.jsp"%>
</body>
</html>
