<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/header2.jsp"%>
<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;
	}
	/*.uploadFile{
		background: #00b591;
	}*/
	/*.downModel{
		background: #00b591;
	}*/
	.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;
	}
	#downFalse{
		position: absolute;
		right: 20px;
		top: 50px;
		background-color: #337ab7;
		color: #fff;
		padding: 5px;
		width: 40px;
		height: 40px;
		border-radius: 30px;
		line-height: 30px;
		cursor: pointer;
		font-size: 14px;
	}
</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="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" style="margin-left: 255px;position:relative">
			<div class="reSearch">	
        		<div class="p_bar"　sstyle="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 id="uploadFile" class="btn btn-primary downModel">
						<span class="glyphicon glyphicon-import" aria-hidden="ture"></span>
						下载模板
						</button>
					</span>
				
					<!-- <div title="导出同步失败的数据" id="downFalse">导出</div> -->
				</div>
				<div id="uploadFileCon" hidden>
		
				</div>		
				<!--成功时返回的值-->
				<div id="succShow" hidden>
				
				</div>
			</div>
		</div>
	</div>
<!--<div style="font-size:16px;margin-top: 10px;" class="lineHeight">导入标注成功</div>-->
<!--<div class="mark_hiatus scroll" >
		<table class="" >
			<thead>
				<tr>
				<th>案件号</th><th>标注状态</th><th>标注日期</th><th>标注人</th><th>失败原因</th>
			</tr>	
			</thead>
			<tbody id="pic_data3">
				<!for(var i=0;i<weaverExceptCase.length;i++){!>
					<tr>
						<td><!=weaverExceptCase[i].caseId!></td>
						<!if(weaverExceptCase[i].markStatus==10){!>
						   <td data-status="10" data-markmess="<!=weaverExceptCase[i].markMess!>" >正常</td> 
						<!}else if(weaverExceptCase[i].markStatus==11){!>
						   <td data-status="11" data-markmess="<!=weaverExceptCase[i].markMess!>">可疑</td> 
						<!}else if(weaverExceptCase[i].markStatus==12){!>
						   <td data-status="12" data-markmess="<!=weaverExceptCase[i].markMess!>">欺诈</td> 
						<!}else{!>
							<td data-status="00">未处理</td> 
						<!}!>
						<td><!=weaverExceptCase[i].markDate!></td><td><!=weaverExceptCase[i].markUser!></td>
						<td>图数据库该实体不存在</td>
					</tr>
				<!}!>
			</tbody>							
		</table>						
	</div>-->
<!--上传文件成功的模板引擎-->
<script type="text/html" id="uploadResultCon">
	<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><th>标注信息</th>
						</tr>	
						</thead>
						<tbody id="pic_data">
							<! if(weaver.length<=0){!>
								<td colspan="5" style="height: 100px;">暂时无数据</td>
							<!}
							for(var i=0;i<weaver.length;i++){!>
								<tr>
									<td><input type="checkbox" checked="checked" 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>
									<td title="<!=weaver[i].markMess!>"><span style="width: 200px;overflow: hidden;display: inline-block;"><!=weaver[i].markMess!></span></td>
								</tr>
							<!}!>
						</tbody>							
					</table>						
				</div>
				<p class="lineHeight" style="color:red;">不可导入的标注信息</p>
				<div class="mark_hiatus scroll" >
					<table class="" >
						<thead>
							<tr>
								<th>案件号</th><th>标注状态</th><th>标注日期</th><th>标注人</th><th>失败原因</th>
							</tr>	
						</thead>
						<tbody id="pic_data2">
							<! if(weaverMarkedCase.length<=0){!>
								<td colspan="5" style="height: 100px;">暂时无数据</td>
							<!}
							for(var i=0;i<weaverMarkedCase.length;i++){!>
								<tr>
									<td><input type="checkbox" checked="checked" class="check_box" data-id="<!=weaverMarkedCase[i].caseId!>" disabled="disabled" /><!=weaverMarkedCase[i].caseId!></td>
									<!if(weaverMarkedCase[i].markStatus==10){!>
									   <td data-status="10" data-markmess="<!=weaverMarkedCase[i].markMess!>" >正常</td> 
									<!}else if(weaverMarkedCase[i].markStatus==11){!>
									   <td data-status="11" data-markmess="<!=weaverMarkedCase[i].markMess!>">可疑</td> 
									<!}else if(weaverMarkedCase[i].markStatus==12){!>
									   <td data-status="12" data-markmess="<!=weaverMarkedCase[i].markMess!>">欺诈</td> 
									<!}else{!>
										<td data-status="00">未知</td> 
									<!}!>
									<td><!=weaverMarkedCase[i].markDate!></td><td><!=weaverMarkedCase[i].markUser!></td>
									<td><!=weaverMarkedCase[i].failure!></td>
								</tr>
							<!}!>
						</tbody>							
					</table>
					<p style="margin-left:20px;"><button class="btn btn-danger btn-bg cancelsData"><span class="glyphicon glyphicon-trash" aria-hidden="ture"></span>删除</button></p>						
				</div>				
			</div>	
			<div class="rightCon" style="display: none">
				<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_data">
							<!for(var i=0;i<db.length;i++){!>
								<tr>
									<td><input type="checkbox" checked="checked" 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>
				<p class="lineHeight" style="color:red;">MYSQL数据库不可导入的标注信息</p>
				<div class="mark_hiatus scroll">
					<table>
						<thead>
							<tr>
							<th>案件号</th><th>标注状态</th><th>标注日期</th><th>标注人</th><th>失败原因</th>
						</tr>	
						</thead>
						<tbody id="mysql_data2">
							<!for(var i=0;i<dbMarkedCase.length;i++){!>
								<tr>
									<td><input type="checkbox" checked="checked" class="check_box" data-id="<!=dbMarkedCase[i].caseId!>" disabled="disabled"/><!=dbMarkedCase[i].caseId!></td>
									<!if(dbMarkedCase[i].markStatus==10){!>
									   <td data-status="10" data-markmess="<!=dbMarkedCase[i].markMess!>" >正常</td> 
									<!}else if(dbMarkedCase[i].markStatus==11){!>
									   <td data-status="11" data-markmess="<!=dbMarkedCase[i].markMess!>">可疑</td> 
									<!}else if(dbMarkedCase[i].markStatus==12){!>
									   <td data-status="12" data-markmess="<!=dbMarkedCase[i].markMess!>">欺诈</td> 
									<!}else{!>
										<td data-status="00">未知</td> 
									<!}!>
									<td><!=dbMarkedCase[i].markDate!></td><td><!=dbMarkedCase[i].markUser!></td>
									<td><!=dbMarkedCase[i].failure!></td>
								</tr>
							<!}!>
							
						</tbody>							
					</table>
					<p style="margin-left:20px;"><button class="btn btn-danger btn-bg cancelsData"><span class="glyphicon glyphicon-trash" aria-hidden="ture"></span>删除</button></p>						
				</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>
<!--  -->

<!--<div class="mark_hiatus scroll" >
		<table>
			<thead>
				<tr>
				<th>案件号</th><th>标注状态</th><th>标注日期</th><th>标注人</th><th>失败原因</th>
			</tr>	
			</thead>
			<tbody id="mysql_data3">
				<!for(var i=0;i<dbExceptCase.length;i++){!>
					<tr>
						<td><!=dbExceptCase[i].caseId!></td>
						<!if(dbExceptCase[i].markStatus==10){!>
						   <td data-status="10" data-markmess="<!=dbExceptCase[i].markMess!>" >正常</td> 
						<!}else if(dbExceptCase[i].markStatus==11){!>
						   <td data-status="11" data-markmess="<!=dbExceptCase[i].markMess!>">可疑</td> 
						<!}else if(dbExceptCase[i].markStatus==12){!>
						   <td data-status="12" data-markmess="<!=dbExceptCase[i].markMess!>">欺诈</td> 
						<!}else{!>
							<td data-status="00">未处理</td> 
						<!}!>
						<td><!=dbExceptCase[i].markDate!></td><td><!=dbExceptCase[i].markUser!></td>
						<td>MYSQL数据库该实体不存在</td>
					</tr>
				<!}!>
				
			</tbody>							
		</table>						
	</div>	-->
<!--同步成功之后返回的模板引擎-->	
<script type="text/html" id="tb_template">
	<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><th>失败原因</th>
						</tr>	
						</thead>
						<tbody id="pic_data">
							<! if(weaver.length<=0){!>
								<td colspan="5" style="height: 100px;">暂时无数据</td>
							<!}
							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>
									<td><!=weaver[i].failure!></td>
								</tr>
							<!}!>
						</tbody>							
					</table>						
				</div>
			</div>
			
		</div>
	</div>
</script>	
<!-- <div class="" style="display: none;">rightCon 
				<p class="lineHeight">MYSQL数据库同步失败的标注信息</p>
				<div class="mark_hiatus scroll2" >
					<table>
						<thead>
							<tr>
							<th>案件号</th><th>标注状态</th><th>标注日期</th><th>标注人</th><th>失败原因</th>
						</tr>	
						</thead>
						<tbody id="mysql_data">
							<! if(db.length<=0){!>
								<td colspan="5">暂时无数据</td>
							<!}
							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>
									<td><!=db[i].failure!></td>
								</tr>
							<!}!>
							
						</tbody>							
					</table>						
				</div>
							
			</div>-->
	<script src="${ctx}/component/My97DatePicker/WdatePicker.js" type="text/javascript"></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
				$("#succShow").html("");
				$("#succShow").hide();
				$("#uploadFileCon").show();
				
			})
			var markFile=$("#fileCon");

			$("#fileCon").ajaxfileupload({
			    action: '${ctx}/sysLog/uploadMarkPersonal.do',
			    valid_extensions : ['xls','xlsx'],
			    params: {
					extra: 'markFile'
			    },				
			    onComplete: function(data,a,b,c) {
					if(data.status=="err"){
						alert(data.mess);
						$("#uploadFile").text("上传");
						return;
					}
					if(data==""){
						alert("导入数据不能大于100条!");
						$("#uploadFile").text("上传");
						return;
					}
					var result=data;
					var ht = baidu.template("uploadResultCon",result);
					$("#uploadFileCon").html(ht);
					$("#uploadFileCon").show();
					$(".scroll").perfectScrollbar();
					$("#uploadFile").text("上传");
					console.log(data);
					//alert(JSON.stringify(data));
			    },
			    onStart: function() {
					$("#uploadFile").text("正在上传...");
					//if(weWantedTo) return false; // cancels upload
			    },
			    onCancel: function() {
					console.log('no file selected');
			    },
				errow:function(data){
					alert("上传失败");
				}
			});
			
			//判断是全选还是取消       图数据库
			$("#uploadFileCon").delegate("input.checkOrdelete","click",function(){
				var n=0;
				$("#pic_data .check_box").each(function(){
					if(this.checked){
						n++;
					}
				});
				if(n==0){
					$("#pic_data .check_box").prop("checked",true);
				}else{
					$("#pic_data .check_box").prop("checked",false);
				}		
			});
			//判断是全选还是取消       mySQL据库
			$("#uploadFileCon").delegate("input.checkOrdelete2","click",function(){
				var n=0;
				$("#mysql_data .check_box").each(function(){
					if(this.checked){
						n++;
					}
				});
				if(n==0){
					$("#mysql_data .check_box").prop("checked",true);
				}else{
					$("#mysql_data .check_box").prop("checked",false);
				}		
			});

			//点击不可导中的删除
			var cancelList=null;
			$("#uploadFileCon").delegate(".cancelsData","click",function(){
				var list=[];
				$(this).parent().parent().find("table .check_box").each(function(){
					if(this.checked){
						list.push($(this).data("id"));
						$(this).parent().parent().remove();
					}
				})
				cancelList=list;
			})
			//获取选中的caseId，同步数据
			$("#uploadFileCon").delegate("input.commit_synchro","click",function(){
				var len=$("#pic_data2 tr").length;
				if(len>0){
					if($("#pic_data2 tr td").text()!="暂时无数据"){
						alert("导入数据有错误，请检测、修改后重试！");
						return;
					}
				}
				var list=[],list2=[];
				$("#pic_data .check_box").each(function(){
					if(this.checked){
						list.push($(this).data("id"));
					}
				});
				
				$("#mysql_data .check_box").each(function(){
					if(this.checked){
						list2.push($(this).data("id"));
					}
				});
				list=list.join(",");
				list2=list2.join(",");
				if(cancelList != null){
					cancelList=cancelList.join(",")
				}
				if(list==""){
					alert("没有可同步的数据！");
					return false;
				}
				$.ajax({
					type:"POST",
					url:"${ctx}/sysLog/doUploadMarkBySelf.do",
					data:{weaverError:list,dbError:list2,cancelList:cancelList},
					success:function(result){
						if(result.status=="err"){
							alert(result.mess);
							return;
						}
						var ht = baidu.template("tb_template",result);
						$("#downFalse").hide();
						$("#uploadFileCon").hide();
						$("#succShow").html(ht);
						$("#succShow").show();	
						$(".scroll2").perfectScrollbar();
						alert("同步成功！");

					}
				});
			})
			function download(){
				var $form = $("<form style='display:none' target='downloadframe' action='${ctx}/sysUser/downloadTemplate.do' method='post'>");
				$("body").append($form);
				$form.submit();
				$form.remove();
			}
			$("#fileOper").delegate(".downModel","click",function(){			
				download();
	         })
			 
			//下载失败的数据
			function download2(){
				var $form = $("<form style='display:none' target='downloadframe' action='${ctx}/sysLog/exportErrorCase.do' method='post'>");
				$("body").append($form);
				$form.submit();
				$form.remove();
			}
			$("#downFalse").click(function(){
				download2();
			})
	    });
		function resize(){
			//获取窗口高度
			var windowheight=$(window).height();
			var windowWidth=$(window).width();
			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"});
			$("#uploadFileCon").css("width",windowWidth-255-20+"px");
			$(".p_bar").css("width",windowWidth-255-20+"px");
			$(".resultCon").perfectScrollbar("update");
			$(".scroll").perfectScrollbar("update");
			$(".scroll2").perfectScrollbar("update");
		}		
	</script>
<%@ include file="/include/footer.jsp"%>
</body>
</html>