<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp" %>
<%@page import="java.util.*"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="shortcut icon" href="${ctx}/images/favicon.ico">
		<link rel="stylesheet" type="text/css" href="${ctx}/css/indexNew/jquery.monthpicker.css"> <!--选月份的样式-->
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/base.css" />
		<!-- <link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/all.css" /> -->
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/perfect-scrollbar.css" />
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/static.css" />
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/newCss/top.css">

		<title>打假通</title>
		<style>
			#statisExport{
				position: absolute;
				right: 20px;
				top: 60px;
				background-color: rgba(0,222,223,0.5);
				color: #fff;
				padding: 5px;
				width: 30px;
				height: 30px;
				border-radius: 30px;
				line-height: 30px;
				cursor: pointer;
			}
			.bg1 {
			    overflow: auto;
			}
			.headRight {
			    line-height: 40px;
			}
			.input_txt {
			    padding: 5px 10px;
			    font-size: 14px;
			    line-height: 1.42857143;
			    color: #555;
			    background-color: #fff;
			    background-image: none;
			    border: 1px solid #ccc;
			    border-radius: 4px;
			    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
			    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
			    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
			    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
			    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
			}
			.btn {
			    padding: 3px 5px;
			    background: #0097e5;
			    border-radius: 3px;
			    color: #eee;
			    cursor: pointer;
			    margin-left: 5px;
			}
			/*表头不动的样式*/
			/*.table{	
				border-collapse:collapse; 
				border-spacing:0; 
				table-layout:fixed;
			}*/
			.fixedThead{
				display:block;
				width:100%;
			}
			.table tr{
				display: inline-block;
			}
			.scrollTbody{
				display:inline-block;
				width:100%;
				position: relative;
			}
			/*.table td{
			    overflow-wrap:break-word;
			    text-align:center;
			    text-overflow:ellipsis;
				width:250px;
				word-wrap: break-word;
				word-break:break-all;
				white-space:pre-wrap;
			
			}
			.table th{
				width:250px;
			}
			thead.fixedThead tr{
				border-top:1px solid rgba(0,222,223,0.4);
				border-bottom:1px solid rgba(0,222,223,0.4);
				padding:2px 0px;
				display:inline-block;
			}*/
			.fixedThead tr th span,.scrollTbody tr td span{
				width: 160px;
				display: inline-block;
			}
			.table tbody.scrollTbody tr{
				border-bottom:1px rgba(0,222,223,0.4);
				padding:8px 0px;
				display:inline-block;
			}

		</style>
	</head>
	<body class="bg1">
		<!--头部-->
		<div class="headCon">
			<jsp:include page="../top2.jsp">
				<jsp:param name="index" value="团队长统计" />
			</jsp:include>
		</div>
		<hna:permission privilege="sysTask.statisExport">
		<!--<div id="statisExport">
			导出
		</div>-->
		</hna:permission>
		<div class="clear"></div>
		
		<!--内容-->
		<div class="fullScren">
			<div class="container">
				<div class="block">
					<div class="backg2">
						<p class="title"><span id="dateRange">近一个月某某分公司处理情况</sapn></p>
						<div class="timeRange">
							<!-- <span  data-time="7" data-string="Day">当天</span> -->
							<span data-time="7" data-string="Week">近一个周</span>
							<span class="active" data-time="30" data-string="Month">近一个月</span>
						</div>
						<div class="basicTab" id="tableC" style="width:98%;margin:10px auto;position:relative;">
							<table id="tabC" class="table" style="">
								<thead class="fixedThead">
									<tr>
										<th><span style="width:60px;">序号</span></th>
										<th><span>姓名</span></th>
										<th><span>P13账号</span></th>
										<th><span>操作次数</span></th>
										<th><span>涉案金额</span></th>
										<th><span>分配量</span></th>
										<th><span>处理量</span></th>
										<th><span>处理率</span></th>
									</tr>								
								</thead>
								<tbody id="tbodyCon" class="scrollTbody ps-scrollbar-y">
									
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<!--人伤模型申请-->		
				<div class="block">
					<div class="backg2">
						<p class="title"><span id="dateRange">该时间段人伤模型申请情况</sapn></p>
						<div class="timeRange">
							<input 
									name="minY" 
									id="minY" 
									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(\'maxY\')||\'%y-%M-%d\'}'})"/>
							    <b style="font-size:16px">/</b>
							    <input 
									name="maxY" 
									id="maxY" 
									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(\'minY\')||\'2010-01-01\'}',maxDate:'%y-%M-%d'})" />
								<span class="btn confirm-btn">确定</span>
								<span class="btn export">导出</span>
						</div>
						<div class="basicTab" id="tableDiv" style="width:98%;margin:10px auto;position:relative;">
							<table id="tabCon" class="table" style="">
								<thead class="fixedThead">
									<tr>
										<th><span>案件号</span></th>
										<th><span>下发时间</span></th>
										<th><span>规则</span></th>
										<th><span>任务接收人</span></th>
										<th><span>机构</span></th>
										<th><span>标注状态</span></th>
										<th><span>标注时间</span></th>
										<th><span>案件赔付金额</span></th>
									</tr>								
								</thead>
								<tbody id="tbodyRe" class="scrollTbody ps-scrollbar-y">
									
								</tbody>
							</table>
						</div>
					</div>
				</div>				
			</div>
		</div>
		
		<!--分公司数据模板-->
		<script type="text/html" id="tab_template">
			<!for(var i=0;i<data.length;i++){!>
				<tr>
					<td><!=(i+1)!></td>
					<td><!=data[i].name!></td>
					<td><!=data[i].operateNum!></td>
					<td><!=data[i].money!></td>
					<td><!=data[i].taskNum!></td>
					<td><!=data[i].dealNum!></td>
					<td><!=data[i].dealRate!></td>
				</tr>
			<!}!>
		</script>
		
		<script src="${ctx}/js/lib/jquery-1.11.1.min.js"></script>
		<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
		<script src="${ctx}/js/lib/baiduTemplate.js"></script>
		<script src="${ctx}/js/lib/core.js"></script>
		<script src="${ctx}/js/lib/jquery.ajaxfileupload.js"></script>
		<script src="${ctx}/component/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
		<!--<script src="js/lib/echarts.min.js"></script>
		<script src="js/lib/countUp.js"></script>
		<script src="js/page/macarons.js"></script>-->
		
		<script>
			(function(){
				var time = new Date();
				var ye = time.getFullYear(),mo=(time.getMonth() + 1)<9?"0"+(time.getMonth() + 1):(time.getMonth() + 1);
				var day=time.getDate()<10?"0"+time.getDate():time.getDate();
				var h=time.getHours()<10?"0"+time.getHours():time.getHours();
				var m=time.getMinutes()<10?"0"+time.getMinutes():time.getMinutes();
				var s=time.getSeconds()<10?"0"+time.getSeconds():time.getSeconds();
				var reTime=ye+"-"+mo+"-"+day+" "+h+":"+m+":"+s;
				var time2=new Date(time.getTime()-24*60*60*7*1000);
				var ye2 = time2.getFullYear(),mo2=(time2.getMonth() + 1)<9?"0"+(time2.getMonth() + 1):(time2.getMonth() + 1);
				var day2=time2.getDate()<10?"0"+time2.getDate():time2.getDate();
				var h2=time2.getHours()<10?"0"+time2.getHours():time2.getHours();
				var m2=time2.getMinutes()<10?"0"+time2.getMinutes():time2.getMinutes();
				var s2=time.getSeconds()<10?"0"+time2.getSeconds():time2.getSeconds();
				var reTime2=ye2+"-"+mo2+"-"+day2+" "+h2+":"+m2+":"+s2;
				$("#maxY").val(reTime);
				$("#minY").val(reTime2);
				init();//初始化
				//时间的切换
				$(".timeRange span").click(function(){
					$(".timeRange").children().removeClass("active");
					$(this).addClass("active");
					var timeval = $(this).data("time");
					var spanCon=$(".active").text();
					//var st = $(this).data("string");
					$.ajax({
						type:"POST",
						url:"${ctx}/sysTask/analyzePage3/1.do",
						data:{time:timeval},
						success:function(result){
							var ht='';
							if(result.data.length==0){
								ht +='<tr>'
									+'<td colspan="8">无数据</td>'
									+'</tr>'
							}else{
								for(var i=0;i<result.data.length;i++){
									ht +='<tr>'
										+'<td><span style="width:60px;">'+(i+1)+'</span></td>'
										+'<td><span>'+result.data[i].name+'</span></td>'
										+'<td><span>'+result.data[i].p13account+'</span></td>'
										+'<td><span>'+result.data[i].operationNum+'</span></td>'
										+'<td><span>'+result.data[i].money+'</span></td>'
										+'<td><span>'+result.data[i].taskNum+'</span></td>'
										+'<td><span>'+result.data[i].dealNum+'</span></td>'
										+'<td><span>'+result.data[i].dealRate+'</span></td>'
										+'</tr<span>>'
								}
							}
							
							$("#tbodyCon").html(ht);
							$(".scrollTbody").perfectScrollbar("update");
							if(result.title==undefined){
								result.title="未知分公司";
							}
							$("#dateRange").text(spanCon+result.title+"处理情况");
						}
					});
					//$("#dateRange").text(spanCon+"上海分公司处理情况"); //请求成功的时候要
				})
				
				//点击确定
				$(".confirm-btn").click(function(){
					//查询时，时间判断
					var beginDate = $("#minY").val().toString();
				    var endDate = $("#maxY").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;
					}
					$.ajax({
						type:"POST",
						data:{beginDate:beginDate,endDate:endDate},
						url:"${ctx}/sysTask/analyzePage3/2.do",
						success:function(result){
							if(typeof(result)=="string"){
								result=JSON.parse(result);
							}
							if(result.status=="err"){
								alert(result.mess);
								return;
							}
							$("#dateRange").text("该时间段人伤模型申请情况");
							var ht=getModelStr(result);
							//var ht=baidu.template("tab_template",{data:result});
							$("#tbodyRe").html(ht);
							$("#tableDiv").perfectScrollbar("update");
							$(".scrollTbody").perfectScrollbar("update");
							//$("#tabC").perfectScrollbar();
						}
					});
				});
				//点击导出
				$(".export").click(function(){
					var start = $("#minY").val().toString();
					var end = $("#maxY").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(beginDate,endDate,markStatus){
					var $form = $("<form style='display:none' target='downloadframe' action='${ctx}/sysTask/analyzePage3/2export.do' method='post'>");
					var $start = $("<input name='beginDate' value='"+beginDate+"'>");
					var $end = $("<input name='endDate' value='"+endDate+"'>");
					$form.append($start).append($end);
					$("body").append($form);
					$form.submit();
					$form.remove();
				}
								
			})();
			resize();
			$(window).resize(function(){	
				resize();
			});
			function resize(){
				//获取窗口高度
				var windowheight=$(window).height();
				var divHeight = windowheight-60-120;
				var divWidth=$(".block").width();
				$("#tableC").css("height",divHeight/2+'px');
				$("#tableDiv").css("height",divHeight/2+'px');
				$("#tabCon").css("width",divWidth*0.98+'px');
				$(".scrollTbody").css("height",divHeight/2-60+'px');
				$(".scrollTbody").perfectScrollbar("update");
				$("#tableC").perfectScrollbar("update");
				$("#tableDiv").perfectScrollbar("update");
				//$("#tabC").css("height",divHeight-10+'px');
				//$("#tabC").perfectScrollbar("update");
			}
			function init(){
				$("#tableC").perfectScrollbar();
				$("#tableDiv").perfectScrollbar();
				$(".scrollTbody").perfectScrollbar();
				//表格数据请求
				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage3/1.do",
					success:function(result){
						$("#dateRange").text("近一个月"+result.title+"处理情况");
						var ht=''
						for(var i=0;i<result.data.length;i++){
							ht +='<tr>'
								+'<td><span style="width:60px;">'+(i+1)+'</span></td>'
								+'<td><span>'+result.data[i].name+'</span></td>'
								+'<td><span>'+result.data[i].p13account+'</span></td>'
								+'<td><span>'+result.data[i].operationNum+'</span></td>'
								+'<td><span>'+result.data[i].money+'</span></td>'
								+'<td><span>'+result.data[i].taskNum+'</span></td>'
								+'<td><span>'+result.data[i].dealNum+'</span></td>'
								+'<td><span>'+result.data[i].dealRate+'</span></td>'
								+'</tr>'
						}
						//var ht=baidu.template("tab_template",{data:result});
						$("#tbodyCon").html(ht);
						$("#tableC").perfectScrollbar("update");
						//$("#tabC").perfectScrollbar();
					}
				});
				//人伤模型请求情况
				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage3/2.do",
					success:function(result){
						if(typeof(result)=="string"){
							result=JSON.parse(result);
						}
						if(result.status=="err"){
							alert(result.mess);
							return;
						}
						$("#dateRange").text("该时间段人伤模型申请情况");
						var ht=getModelStr(result);
						//var ht=baidu.template("tab_template",{data:result});
						$("#tbodyRe").html(ht);
						$("#tableDiv").perfectScrollbar("update");
						//$("#tabC").perfectScrollbar();
					}
				});
			}
			//获取人伤模型的字符串
			function getModelStr(result){
				var ht=''
				for(var i=0;i<result.length;i++){
					var item=result[i];
					ht +='<tr>'
						+'<td><span>'+item.notificationNo+'</span></td>'
						+'<td><span>'+item.taskTime+'</span></td>'
						+'<td><span>'+item.ruleId+'</span></td>'
						+'<td><span>'+item.userName+'</span></td>'
						+'<td><span>'+item.branchComName+'</span></td>'
						+'<td><span>'+item.status+'</span></td>'
						+'<td><span>'+item.markTime+'</span></td>'
						+'<td><span>'+item.claimAmount+'</span></td>'
						+'</tr>';
				}
				return ht;
			}
			
		</script>
	</body>
</html>
