{{template "inc"}}
<!-- Main Header -->
{{template "header"}}
<!-- Left side column. 权限菜单 -->
{{template "memu"}}
<style type="text/css">
 .resultshowstyle{
	display: inline-block;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    z-index: 999;
	width:680px;
	/*height: 484px;*/
}
.first{
	margin-bottom:0px; 
}
.first tr>th:nth-child(1){
	width:101px;
}
.first tr>th:nth-child(2){
	width:306px;
}
.first tr>th:nth-child(3){
	width:259px;
}
.first thead tr th{
	padding-left: 4px;
	width:132px;
}
.second{
	overflow-y: scroll;
    height: 376px;
    display: block;
	overflow-x: hidden;
}
#resultdata{
    white-space: nowrap;
    overflow-x: scroll;
}
.table>tbody>tr>td{
	padding-left: 0px;
    padding-right: 0px;
}
.table>tbody>tr>td:nth-child(1) div{
	width: 100px;
    padding-left: 4px;
	white-space: normal;
	word-break: break-all;
    word-wrap: break-word;
}
.table>tbody>tr>td:nth-child(2) div{
	width: 300px;
    padding-left: 4px;
	white-space: normal;
	word-break: break-all;
    word-wrap: break-word;
}
.table>tbody>tr>td:nth-child(3) div{
	width: 269px;
    padding-left: 4px;
	white-space: normal;
	word-break: break-all;
    word-wrap: break-word;
}
.codestyle{
	font-size: 18px;
    border-bottom: 2px solid #f4f4f4;
    padding: 9px 5px;
    color: #335;
}
.datanull{
	padding-Left:20px;
}
.extractsource{
	padding: 0px 50px;
}
.extracttype{
	padding: 0px 50px;
}
</style>
<div class="content-wrapper">
	<section class="content-header" style="padding: 49px 15px 0 15px;">
		<h1>
			
		</h1>
		<ol class="breadcrumb">
		  <li><a href="/admin/resulttrack"><i class="fa fa-dashboard"></i> 结果追踪</a></li>		  
		</ol>
    </section>
	<section class="content">
		<div id="resultdata">
		</div>
	</section>
</div>

{{template "dialog"}}
{{template "footer"}}
<script>
	$(function(){
		var tracks = {{.tracks}};
		console.log(tracks)
		var n = 0;
		var oneboxhtml = "";
		var finishhtml = "";
		var flag1 = false;
		var flag3 = false;
		for(var key in tracks){
			flag1 = true;
			oneboxhtml = createnewbox(key,tracks[key])
			if(oneboxhtml != ""){
				finishhtml = finishhtml + oneboxhtml;
			}
		}
		if(!flag1 || finishhtml == ""){//没有数据
			flag3 = true;
			finishhtml = '<div class="datanull">无追踪数据</div>'
		}
		$("#resultdata").html(finishhtml)
		if(flag3){
			$("#resultdata").css("overflow-x","hidden");
		}
		var wheight = $(".content-wrapper").height();
		$(".box").css("height",wheight*0.8+"px");
		$(".second").css("height",wheight*0.8-90+"px");
	})
	
	function createnewbox(key,arr){
		var tablehtml = "";
		var flag2 = false;
		var sourcehtml = "";
		var typehtml = "";
		for(var i in arr){
			flag2 = true;
			if(sourcehtml == ""){
				sourcehtml = '<span class="extractsource">抽取来源:<span class="sourceval">'+arr[i]["extfrom"]+'</span></span>'
			}
			if(typehtml == ""){
				typehtml = '<span class="extracttype">抽取来源:<span class="typeval">'+arr[i]["matchtype"]+'</span></span>'
			}
			tablehtml = tablehtml + createtable(arr[i])
		}
		if(flag2){
			var boxhtml = '<div class="resultshowstyle">'
							+'<div class="box box-primary">'
								+'<div class="codestyle">Code:'+key+sourcehtml+typehtml
								+'</div>'
								+'<table class="table first">'
									+'<thead>'
			    						+'<tr>'
			      							+'<th>匹配代码</th>'
			      							//+'<th>抽取来源</th>'
											//+'<th>抽取类型</th>'
											+'<th>抽取结果</th>'
											+'<th>抽取描述</th>'
											+'<th style="width:20px;"></th>'
			    						+'</tr>'
			  						+'</thead>'
								+'</table>'
								+'<table class="table table-striped second">'
			 						+'<tbody>'
									+tablehtml
									+'</tbody>'
								+'</table>'
							+'</div>'
						+'</div>'
			return 	boxhtml	
		}
		return "";		
	}
	function createtable(map){
		var trhtml = '<tr>'
						+'<td><div>'+map["code"]+'</div></td>'
						//+'<td><div>'+map["extfrom"]+'</div></td>'
						//+'<td><div>'+map["matchtype"]+'</div></td>'
						+'<td><div>'+map["value"]+'</div></td>'
						+'<td><div>'+map["name"]+'</div></td>'
						+'<td><div style="width:20px;"></div></td>'
						
					+'</tr>'
		return trhtml
	}
</script>