<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/header.jsp"%>
<link type="text/css" rel="stylesheet" href="${ctx}/css/baseFrame.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/css/index.css" />
<title></title>
<style>
	.selected {
		height: 35px;
		line-height: 35px;
		border-bottom: 1px solid #6d5c96;
	}
	.selected span{
		padding: 5px 10px;
		border-right: 1px solid #6d5c96;
		cursor: pointer;
	}
	.active3 {
		border-bottom:3px solid #0097e5;
		color:#fff;
	}
	.confirm-btn {
		padding: 3px 5px;
		background: #00b591;
		border-radius: 3px;
		color: #eee;
		cursor: pointer;
		margin-left: 5px;
	}
	.mySearch input {
		border: none;
		height: 20px;
		padding: 3px 8px;
		width:120px;
		border-radius:3px;
	}
	.btn {
		padding: 3px 5px;
		background: #00b591;
		border-radius: 3px;
		color: #eee;
		cursor: pointer;
		margin-left: 5px;
	}
</style>
</head>
<body class="bg1">
	<div class="headCon">
		<jsp:include page="/WEB-INF/jsp/top.jsp">
		<jsp:param name="index" value="疑案管理" />
		</jsp:include>
	</div>
	<div class="searchCon">
		<ul>
			<li><a href="${ctx}/sysPersonal/personalCount.do">个人统计</a></li>
			<li><a href="${ctx}/sysPersonal/taskApply.do">任务申请</a></li>
			<li><a href="${ctx}/sysPersonal/markExport.do">标注管理</a></li>
			<li class="on"><a href="${ctx}/sysPersonal/personalSearch.do">个人查询</a></li>			
			<!-- <li><a href="${ctx}/sysPersonal/markImport.do">标注导入</a></li>-->					
		</ul>
	</div>
	<!-- <div id="resultCon1" class="resultCon" style="margin-left: 255px;"> -->
	<div class="resultCon" style="margin-left: 255px;position:relative;">
		<div class="wrap">
			<div class="m_right" >
				<div class="p_bar">您当前的位置：个人查询</div>			
			</div>		
		</div>
		<div class="picCon" style="margin-top:20px;border:1px solid #6d5c96;">
			<!--选项卡-->		
			<div class="selected">
				<span class="active3" data-classed="dealSearch" data-id="dealSearch">处理查询</span>
				<span data-classed="markSearch"  data-id="markSearch">标注查询</span>
			</div>
			<!---->
			<div>
				<!--处理查询-->
				<div id="dealSearch"  class="picBlock dealSearch">
					<div class="mySearch" style="color: #666;margin: 10px 0 0 10px;">
						<span>
							<label style="color: #eee;">组号：</label>
							<input type="text" name="groupId" class="groupId"/>
						</span>
						<span>
							<label style="color: #eee;">案件号：</label>
							<input type="text"  name="caseId" class="caseId"/>
						</span>
						<span class="btn search-btn" data-id="dealSearch">查询</span>
					</div> 
					<div class="dealSearchCon">
						<table id="dealTbwrap" class="table_list"></table>
						<div class="page eui-pager-custom" id="deal_pager"></div>
					</div>
				</div>	
				<!--标注查询-->
				<div id="markSearch" class="picBlock markSearch">
					<div class="mySearch" style="color: #666;margin: 10px 0 0 10px;">
						<span>
							<label style="color: #eee;">实体id：</label>
							<input type="text" name="node_id" class="groupId"/>
						</span>
						<!--<span>
							<label style="color: #eee;">案件号：</label>
							<input type="text"  class="caseId"/>
						</span>-->
						<span class="btn search-btn" data-id="markSearch">查询</span>
					</div> 
					<div class="markSearchCon">
						<table id="markTbwrap" class="table_list"></table>
						<div class="page eui-pager-custom" id="mark_pager"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!--表格模板引擎-->
	<script type="text/html" id="tb_template">
		<thead>
			<tr>
				<th>用户名</th>
				<th>姓名</th>
				<th>电话</th>
				<th>邮箱</th>
				<th>用户状态</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["username"]!>"><!=item["username"]!></td>
					<td title="<!=item["userCnName"]!>"><!=item["userCnName"]!></td>
					<td title="<!=item["mobile"]!>"><!=item["mobile"]!></td>
					<td title="<!=item["email"]!>"><!=item["email"]!></td>
					<td title="<!=item["statusName"]!>"><!=item["statusName"]!></td>				
				</tr>
			<!}!>
			<!}else{!>
				<tr>
					<td colspan="7"> 暂无数据</td>
				</tr>
			<!}!>
		</tbody>
	</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}/component/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
	<script src="${ctx}/js/lib/echarts3.1.10.js"></script>
	<script>
	     $(function () {
			$(".resultCon").perfectScrollbar();
			resize();
            $(window).resize(function(){
				resize();
			});	
			//默认隐藏
			$("#markSearch").hide();
			//选项卡
			$(".selected span").click(function(){
				$(".picBlock").hide();
				$(".selected").children().removeClass("active3");
				$(this).addClass("active3");
				var classed = $(this).data("classed");
				$("."+classed).show();
				$("."+classed).css("display","");
			})
			
			//查询
			$(".search-btn").click(function() {
				var id=$(this).data("id");
				if(id=='dealSearch'){
					search('dealTbwrap','deal_pager');
				}else if(id=='markSearch'){
					search('markTbwrap','mark_pager');
				}
				
			});
			//search('dealTbwrap','deal_pager');
	    });
	    function resize(){
			//获取窗口高度
			var windowheight=$(window).height();
			var leftList = windowheight-40;
			$(".searchCon").css({"height":leftList+"px"});
			$(".resultCon").css({"height":leftList-12+"px"});
			$(".picCon").css({"height":leftList-12-70+"px"});
			//$(".tableMain").css({"height":windowheight-40-42-131+"px"});
			//$(".table_list").css({"height":windowheight-40-42-100-85+"px"});
			$(".resultCon").perfectScrollbar("update");
		}
		function search(tabId,pageId) {
			// 这里放包含查询条件的DIV
			var paramData,url;
			if(tabId=="dealTbwrap"){
				paramData = {
					page:1,
					groupId:$("[name='groupId']").val(),
					caseId:$("[name='caseId']").val()
				};
				url="${ctx}/sysPersonal/getDealCaseBySelf.do";
			}else if(tabId=="markTbwrap"){
				paramData = {
					page:1,
					node_id:$("[name='node_id']").val()
				};
				url="${ctx}/sysPersonal/analyzeMark.do";
			}
			

			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(url,paramData,function(data){
					var table = new uiTable({
						 "con": "#"+tabId,//放table的容器,"rowCount":22,"currentPage":1}
						 "data": {
							 "list": data.dataList//渲染需要的数据
						 },
						 "template": "tb_template",//渲染的模板
						 "pager": {//翻页
							 "con": "#"+pageId,//翻页容器
							 "data": {
								 "currentPage": data.currentPage,//当前页
								 "pageCount": data.pageCount,
								 "rowCount": data.rowCount
							 },
							 //翻页样式
							 template: '<ul><a title="首页" class="page_first" data-role="first" href="#">首页</a><a title="上一页" class="page_prev" href="#" data-role="prev">上一页</a><span data-value="pageNum" class="pageNum"></span><a title="下一页" class="page_next" href="#" data-role="next">下一页</a><a title="尾页" class="page_last" href="#" data-role="last">尾页</a></ul><div class="pageGo">共<span data-role="rowCount"></span>条 跳转到 <input type="text" data-target="input" class="page_input"/><a href="#" data-role="go" class="go">GO</a></div>'
						 }
					 });
					 table.getPager().bind("changePage", function (event, page, hander) {//点击翻页时
						var paramData,url;
						if(tabId=="dealTbwrap"){
							paramData = {
								page:1,
								groupId:$("[name='groupId']").val(),
								caseId:$("[name='caseId']").val()
							};
							url="${ctx}/sysPersonal/getDealCaseBySelf.do";
						}else if(tabId=="markTbwrap"){
							paramData = {
								page:1,
								node_id:$("[name='node_id']").val()
							};
							url="${ctx}/sysPersonal/analyzeMark.do";
						}
						$.post(url,paramData,function(change){
							 table.render({//重新渲染
									list: change.dataList//传入新的渲染数据
								});
								hander({
									"currentPage": change.currentPage,
									"pageCount": change.pageCount,
									"rowCount": change.rowCount
								});
						 });
					 });
				});
			});
		}
		
	</script>
	<%@ include file="/include/footer.jsp"%>
</body>
</html>
