<%@ 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" /> -->
<script src="${ctx}/component/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<title>查询日志列表</title>
<style>
	.blockCon{
		/*height: 400px;*/
		border: 1px solid #517184;
		padding:10px 20px ;
	}
	.content3{						
		overflow: hidden;
		color: #eee;			
	}
	.leftCon{
		float: left;
		width: 45%;
	}
	.rightCon{
		float: right;
		width: 45%;
	}
	.mark_hiatus{
		height: 245px;
		position:relative;
		border: 1px solid #517184;
	}
	.mark_hiatus tr{
		line-height: 30px;
	}
	.mark_hiatus th,.mark_hiatus td{
		padding: 0px 10px;
		white-space: nowrap;
	}
	.mark_hiatus td{
		text-align: center;
	}
	.mark_hiatusBtn{
		margin-top: 10px;
		overflow: hidden;
	}
	.btn{
		color:#fff;
		padding: 5px 10px;
		border: none;
		border-radius: 3px;
	}
	
	.checkOrdelete{
		float: right;
		background: #00b591;
	}
	.checkOrdelete2{
		float: right;
		background: #00b591;
	}
	.synchro{
		margin-top:10px;
		text-align: center;
	}
	.commit_synchro {
		background: #00b591;
	}
	.lineHeight{
		line-height:30px;
	}
</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>
				<div style="font-size:16px; margin: 10px 0;" class="lineHeight"  id="fileOper">
					<span><input type="file" id="fileCon" name="markFile" style="display:none;">
						<button id="uploadFile" class="btn btn-primary uploadFile ">
							<span class="glyphicon glyphicon-file" aria-hidden="ture"></span>
							上传
						</button>
					</span>
					<span>
						<button  class="btn btn-primary downModel">
							<span class="glyphicon glyphicon-export" aria-hidden="ture"></span>
							下载模板
						</button>
					</span>
				</div>
				<div id="uploadFileCon" hidden>
				
				</div>
				<!--成功时返回的值-->
				<div id="succShow" hidden>
				
				</div>
			</div>
		</div>
	</div>

	<script src="${ctx}/component/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
	<!--上传文件后的模板引擎-->
	<script type="text/html" id="uploadResultCon">
		<div style="font-size:16px;margin-top: 10px;" class="lineHeight">导入标注同步</div>
		<div class="blockCon">
			<div class="content3">
				<div class="leftCon">
					<p class="lineHeight">需同步到图数据库的标注信息</p>
					<div class="mark_hiatus scroll" >
						<table class="" >
							<thead>
								<tr>
								<th>案件号</th><th>标注状态</th><th>标注日期</th><th>标注人</th>
							</tr>	
							</thead>
							<tbody id="pic_data2">
								<!for(var i=0;i<weaver.length;i++){!>
									<tr>
										<td><input type="checkbox" class="check_box" data-id="<!=weaver[i].caseId!>"/><!=weaver[i].caseId!></td>
										<!if(weaver[i].markStatus==10){!>
										   <td data-status="10" data-markmess="<!=weaver[i].markMess!>" >正常</td> 
										<!}else if(weaver[i].markStatus==11){!>
										   <td data-status="11" data-markmess="<!=weaver[i].markMess!>">可疑</td> 
										<!}else if(weaver[i].markStatus==12){!>
										   <td data-status="12" data-markmess="<!=weaver[i].markMess!>">欺诈</td> 
										<!}else{!>
											<td data-status="00">未处理</td> 
										<!}!>
										<td><!=weaver[i].markDate!></td><td><!=weaver[i].markUser!></td>
									</tr>
								<!}!>
							</tbody>							
						</table>						
					</div>
					<div class="mark_hiatusBtn">
						<input type="button" class="btn checkOrdelete" value="全选/取消"/>
					</div>
				</div>
				<div class="rightCon">
					<p class="lineHeight">需同步到MYSQL数据库的标注信息</p>
					<div class="mark_hiatus scroll" >
						<table>
							<thead>
								<tr>
								<th>案件号</th><th>标注状态</th><th>标注日期</th><th>标注人</th>
							</tr>	
							</thead>
							<tbody id="mysql_data2">
								<!for(var i=0;i<db.length;i++){!>
									<tr>
										<td><input type="checkbox" class="check_box" data-id="<!=db[i].caseId!>"/><!=db[i].caseId!></td>
										<!if(db[i].markStatus==10){!>
										   <td data-status="10" data-markmess="<!=db[i].markMess!>" >正常</td> 
										<!}else if(db[i].markStatus==11){!>
										   <td data-status="11" data-markmess="<!=db[i].markMess!>">可疑</td> 
										<!}else if(db[i].markStatus==12){!>
										   <td data-status="12" data-markmess="<!=db[i].markMess!>">欺诈</td> 
										<!}else{!>
											<td data-status="00">未处理</td> 
										<!}!>
										<td><!=db[i].markDate!></td><td><!=db[i].markUser!></td>
									</tr>
								<!}!>
								
							</tbody>							
						</table>						
					</div>
					<div class="mark_hiatusBtn">
						<input type="button"class="btn checkOrdelete2" value="全选/取消"/>
					</div>
				</div>
			</div>
			<div class="synchro">
				<div style="color: #fff;">选中确定同步的标注</div>
				<div class="mark_hiatusBtn"><input type="button" class="btn commit_synchro" value="提交同步"/></div>
			</div>
		</div>
	</script>
	<!--同步之后返回的模板引擎-->
	<script type="text/html" id="reslutCon">
		<div style="font-size:16px;margin-top: 10px;" class="lineHeight">导入标注同步的结果如下：</div>
		<div class="blockCon">
			<div class="content3">
				<div class="leftCon">
					<p class="lineHeight">图数据库同步失败案件</p>
					<div class="mark_hiatus scroll2" >
						<table class="" >
							<thead>
								<tr>
								<th>案件号</th><th>标注状态</th><th>标注日期</th><th>标注人</th>
							</tr>	
							</thead>
							<tbody id="pic_data2">
								<!for(var i=0;i<weaver.length;i++){!>
									<tr>
										<td><!=weaver[i].caseId!></td>
										<!if(weaver[i].markStatus==10){!>
										   <td data-status="10" data-markmess="<!=weaver[i].markMess!>" >正常</td> 
										<!}else if(weaver[i].markStatus==11){!>
										   <td data-status="11" data-markmess="<!=weaver[i].markMess!>">可疑</td> 
										<!}else if(weaver[i].markStatus==12){!>
										   <td data-status="12" data-markmess="<!=weaver[i].markMess!>">欺诈</td> 
										<!}else{!>
											<td data-status="00">未处理</td> 
										<!}!>
										<td><!=weaver[i].markDate!></td><td><!=weaver[i].markUser!></td>
									</tr>
								<!}!>
							</tbody>							
						</table>						
					</div>
				</div>
				<div class="rightCon">
					<p class="lineHeight">MYSQL数据库同步失败案件</p>
					<div class="mark_hiatus scroll2" >
						<table>
							<thead>
								<tr>
								<th>案件号</th><th>标注状态</th><th>标注日期</th><th>标注人</th>
							</tr>	
							</thead>
							<tbody id="mysql_data2">
								<!for(var i=0;i<db.length;i++){!>
									<tr>
										<td><!=db[i].caseId!></td>
										<!if(db[i].markStatus==10){!>
										   <td data-status="10" data-markmess="<!=db[i].markMess!>" >正常</td> 
										<!}else if(db[i].markStatus==11){!>
										   <td data-status="11" data-markmess="<!=db[i].markMess!>">可疑</td> 
										<!}else if(db[i].markStatus==12){!>
										   <td data-status="12" data-markmess="<!=db[i].markMess!>">欺诈</td> 
										<!}else{!>
											<td data-status="00">未处理</td> 
										<!}!>
										<td><!=db[i].markDate!></td><td><!=db[i].markUser!></td>
									</tr>
								<!}!>
								
							</tbody>							
						</table>						
					</div>
				</div>
			</div>
		</div>
	</script>
	
	<script src="${ctx}/js/lib/jquery.ajaxfileupload.js"></script>
	<script src="${ctx}/js/lib/core.js"></script>
	<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
	<script type="text/javascript">
		$(function () {
			$(".resultCon").perfectScrollbar();
			resize();
			$(window).resize(function(){
				resize();
			});
			
			//点击上传
			$("#uploadFile").click(function(){
			    $("#fileCon").click();//markFile
			})
			var markFile=$("#fileCon");
			$("#fileCon").ajaxfileupload({
			    action: '${ctx}/sysLog/uploadMark.do',
			    valid_extensions : ['xls','xlsx'],
			    params: {
					extra: 'markFile'
			    },				
			    onComplete: function(data) {
					var result=data;
					var ht = baidu.template("uploadResultCon",result);
					$("#uploadFileCon").html(ht);
					$("#uploadFileCon").show();	
					$(".scroll").perfectScrollbar();
					$("#uploadFile").val("上传");
					console.log(data);
					//alert(JSON.stringify(data));
			    },
			    onStart: function() {
					$("#uploadFile").val("正在上传...");
					//if(weWantedTo) return false; // cancels upload
			    },
			    onCancel: function() {
					console.log('no file selected');
			    }
			});
			
			//判断是全选还是取消       图数据库
			$("#uploadFileCon").delegate("input.checkOrdelete","click",function(){
				var n=0;
				$("#pic_data2 .check_box").each(function(){
					if(this.checked){
						n++;
					}
				});
				if(n==0){
					$("#pic_data2 .check_box").prop("checked",true);
				}else{
					$("#pic_data2 .check_box").prop("checked",false);
				}		
			});
			//判断是全选还是取消       mySQL据库
			$("#uploadFileCon").delegate("input.checkOrdelete2","click",function(){
				var n=0;
				$("#mysql_data2 .check_box").each(function(){
					if(this.checked){
						n++;
					}
				});
				if(n==0){
					$("#mysql_data2 .check_box").prop("checked",true);
				}else{
					$("#mysql_data2 .check_box").prop("checked",false);
				}		
			});
			//获取选中的caseId
			$("#uploadFileCon").delegate("input.commit_synchro","click",function(){
				var list=[],list2=[];
				$("#pic_data2 .check_box").each(function(){
					if(this.checked){
						list.push($(this).data("id"));
					}
				});
				
				$("#mysql_data2 .check_box").each(function(){
					if(this.checked){
						list2.push($(this).data("id"));
					}
				});
				list=list.join(",");
				list2=list2.join(",");
				console.log(list);console.log(list2);
				$.ajax({
					type:"POST",
					url:"${ctx}/sysLog/doUploadMark.do",
					data:{weaverError:list,dbError:list2},
					success:function(result){						
						var ht = baidu.template("reslutCon",result);
						alert("执行完毕,请看结果！");
						$("#succShow").html(ht);
						$("#succShow").show();	
						$(".scroll2").perfectScrollbar();
					}
				});
			})
			function download(){
				var $form = $("<form style='display:none' target='downloadframe' action='${ctx}/sysUser/downloadTemplateHeadOffice.do' method='post'>");
				$("body").append($form);
				$form.submit();
				$form.remove();
			}
			$("#fileOper").delegate(".downModel","click",function(){			
				download();
	         })
	    });
		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"});
			$(".resultCon").perfectScrollbar("update");
			$(".scroll").perfectScrollbar("update");
			$(".scroll2").perfectScrollbar("update");
		}		
	</script>
<%@ include file="/include/footer.jsp"%>
</body>
</html>