<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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" />
<title>知识图谱平台</title>
<style>
	*{
		box-sizing: border-box;
	}
</style>
</head>
<body class="bg1">
<div class="headCon">
	<div class="logo">
		<img src="${ctx}/images/indexNew/logo3.png">
	</div>
	<ul class="nav">
		<li class="navActive">项目</li>
		<li>数据源</li>
		<li>模型</li>
	</ul>
</div>
<div class="searchCon">
	<div class="subNavUp">
		<div class="upPart">
			<div class="btns">
				<i class="prev"></i>
				<i class="next"></i>
				<i class="save"></i>
			</div>
			<div class="connect">
				连接<span><i></i>+  添加</span>
			</div>
			<ul id="connList" class="connList">
				<li>
					<p>海南易建科技</p>
				</li>
			</ul>
		</div>
	</div>
	<div class="sunNavDown">
		<div class="downPart">
			<p>文件</p>
			<div>
				<ul id="filesList">
				</ul>
			</div>
		</div>
	</div>
	<div class="DShistoryCon">
		<p>已保存数据</p>
		<div class="DShistory">
			<ul>
				<li>海南人口统计</li>
				<li>海南人口统计</li>
			</ul>
		</div>
	</div>
</div>
<div class="main" id="main" style="position:relative;padding:0;">
	<div class="connectArea" id="connectArea">
		<div class="connectCon">
			<div class="connectDetail" hidden id="connectDetail">
				<div class="detailHead">
					联接<i class="close1"></i>
				</div>
				<div class="connType">
					<ul>
						<li class="connTypeActive"><img src="${ctx}/images/indexNew/inside.png"><span>内部</span></li>
						<li><img src="${ctx}/images/indexNew/leftJoin.png"><span>左侧</span></li>
						<li><img src="${ctx}/images/indexNew/rightJoin.png"><span>右侧</span></li>
						<li><img src="${ctx}/images/indexNew/outside.png"><span>外部</span></li>
					</ul>
				</div>
				<div class="detailList">
					<table>
						<thead>
							<tr>
								<th style="width:40%;">数据源</th>
								<th style="width:12%;"></th>
								<th style="width:40%;">people.txt</th>
								<th style="width:8%;"></th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td style="position:relative">
									<input type="text" id="source" placeholder="添加关联" />
									<ul id="chooseSourceItem" hidden>

									</ul>
								</td>
								<td>=</td>
								<td style="position:relative">
									<input type="text" id="thisSource" placeholder="添加关联" />
									<ul id="chooseThisItem" hidden>

									</ul>
								</td>
								<td class="connectClear">X</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<ul class="connectAreaRow" id="connectAreaRow">
			<!-- 
				<li>
					<ul class="connectAreaCol">
						<li>
							<div class="DSTableItem">yijiankeji</div>
						</li>
					</ul>
				</li>
				<li>
					<ul class="connectAreaCol">
						<li>
							<div class="link1"><i></i></div>
							<div class="DSTableItem">yijiankeji</div>
						</li>
						<li>
							<div class="link2"><i></i></div>
							<div class="DSTableItem">yijiankeji</div>
						</li>
					</ul>
				</li>
				<li>
					<ul class="connectAreaCol">
						<li>
							<div class="link1"><i></i></div>
							<div class="DSTableItem">yijiankeji</div>
						</li>
					</ul>
				</li>
				 -->
			</ul>
		</div>
	</div>
	<div class="tableArea">
		<div class="tableAreaHead"></div>
		<div class="table" id="table">
			<table id="connTable">
				
			</table>
		</div>
	</div>
</div>

<script type="text/html" id="filesList_template"> 
<!for(var i=0;i<data.length;i++){!>
			<li data-file="<!=data[i].name!>" data-index="<!=i!>" draggable="true">
						<div>
							<i></i>
							<!=data[i].name!>
						</div>
					</li>
<!}!>
</script>
<script type="text/html" id="firstNode_template"> 
<li data-file="<!=name!>">
	<div class="DSTableItem"><!=name!></div>
</li>
</script>
<script type="text/html" id="link1_template"> 
<li data-file="<!=name!>">
	<div class="link1" data-link=""><i></i></div>
	<div class="DSTableItem"><!=name!></div>
</li>
</script>
<script type="text/html" id="link2_template"> 
<li data-file="<!=name!>">
	<div class="link2" data-link=""><i></i></div>
	<div class="DSTableItem"><!=name!></div>
</li>
</script>
<script type="text/html" id="source_template"> 
<!for(var i=0;i<data.length;i++){!>
	<li class="sourceName" data-name="<!=data[i].name!>"><!=data[i].name!></li>
	<!for(var j=0;j<data[i].cols.length;j++){!>
		<li class="sourceItem" data-file="<!=data[i].name!>" data-item="<!=data[i].cols[j]!>"><!=data[i].cols[j]!></li>
	<!}!>
<!}!>
</script>
<script type="text/html" id="tableData_template"> 
	<thead>
					<tr>
						<!for(var props in data[0]){!>
							<th style="width:200px;"><!=props!></th>
						<!}!>
 					</tr>		
				</thead>
				<tbody>
					<!for(var i=0;i<data.length;i++){!>
						<tr>
							<!for(var props in data[i]){!>
								<td><!=data[i][props]!></td>
							<!}!>					
						</tr>
					<!}!>
				</tbody>
</script>

<script src="${ctx}/js/lib/jquery-1.11.1.min.js"></script>
<script src="${ctx}/js/lib/core.js"></script>
<script src="${ctx}/js/lib/baiduTemplate.js"></script>
<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
<script>
	var json = {
			data:[
			      {
			    	  name:"enterprise.txt",
			    	  key:["enterpriseID","name","date","address","investment","presidentID","presidentName"],
			    	  value:[
			    	         {"enterpriseID":"001","name":"易建科技股份有限公司","date":"2006-9-10","address":"国贸嘉陵大厦17层","investment":"3500万","presidentID":"46010019760905","presidentName":"喻龑冰"},
			    	         {"enterpriseID":"002","name":"海航集团有限公司","date":"1996-4-1","address":"国兴大道海航大厦","investment":"900亿","presidentID":"46010119650708","presidentName":"陈峰"}
			    	         ]
			      },
			      {
			    	  name:"enterpriseManagers.txt",
			    	  key:["enterpriseID","peopleID","position"],
			    	  value:[
			    	         {"enterpriseID":"001","peopleID":"46010019760905","position":"董事长"},
			    	         {"enterpriseID":"002","peopleID":"46010119650708","position":"董事长"}
			    	         ]
			      },
			      {
			    	  name:"people.txt",
			    	  key:["ID","name","gender"],
			    	  value:[
			    	         {"ID":"46010019760905","peoName":"喻龑冰","gender":"male"},
			    	         {"ID":"46010119650708","peoName":"陈峰","gender":"male"}
			    	         ]
			      }
			      ]
	};
	var connPool = []; //链接数目
	var connData = [];
	var connLink = [];
	var connName = [];
	console.log(json);
	resize();
	$(window).resize(function(){
		resize();
	});
	function resize(){
		//获取窗口高度
		var windowheight=$(window).height();
		var searchCon = windowheight-40-146;
		$(".searchCon").css("height",windowheight-40);
		$(".main").css("height",windowheight-40-3);
		$(".table").css("height",windowheight-40-333-42);
	}
	//perfect-scrollbar滚动条插件
	$('.table').perfectScrollbar();
	$('#chooseSourceItem').perfectScrollbar();
	$('#chooseThisItem').perfectScrollbar();
	$("#table").perfectScrollbar();
	//打开弹窗
	$("#connectAreaRow").delegate("i","click",function(e){
		var thisFileName = $(this).parent().parent().data("file");
		$("#connectDetail #source").val("");
		$("#connectDetail #thisSource").val("");
		$("#connectDetail").css("left",e.clientX-465).css("top",e.clientY-40);
		$("#connectDetail .detailList th").eq(2).html(thisFileName);
		$("#connectDetail").show();
		$('#chooseSourceItem').hide();
		$('#chooseThisItem').hide();
	});
	//关闭弹窗
	$("#connectDetail .close1").click(function(){
		$("#connectDetail").hide();
	});
	//选择匹配字段列表
	$("#connectDetail #source").focus(function(){
		var thisFileName = $("#connectDetail .detailList th").eq(2).html();
		var colsMap = getCols(thisFileName,false);
		var ht = baidu.template("source_template",{data:colsMap});
		$(this).parent().find("#chooseSourceItem").html(ht);
		$('#chooseSourceItem').perfectScrollbar('update');
		$('#chooseSourceItem').show();
	}).blur(function(){
		$('#chooseSourceItem').hide();
	});
	$("#connectDetail #thisSource").focus(function(){
		var thisFileName = $("#connectDetail .detailList th").eq(2).html();
		var colsMap = getCols(thisFileName,true);
		var ht = baidu.template("source_template",{data:colsMap});
		$(this).parent().find("#chooseThisItem").html(ht);
		$('#chooseThisItem').perfectScrollbar('update');
		$('#chooseThisItem').show();
	}).blur(function(){
		$('#chooseThisItem').hide();
	});
	//选择字段
	$("#chooseSourceItem").delegate(".sourceItem","mousedown",function(){
		$('#chooseSourceItem').hide();
		$("#source").val($(this).html()).data("file",$(this).data("file"));
		doConnect();
	});
	$("#chooseThisItem").delegate(".sourceItem","mousedown",function(){
		$('#chooseThisItem').hide();
		$("#thisSource").val($(this).html()).data("file",$(this).data("file"));
		doConnect();
	});
	//清空联接
	$(".detailList .connectClear").click(function(){
		$("#connectDetail #source").val("");
		$("#connectDetail #thisSource").val("");
	});
	//获取文件名和字段map
	function getCols(thisFileName,flag){
		var colsMap = [];
		for(var i=0;i<json.data.length;i++){
			if(flag){
				if(thisFileName==json.data[i].name){
					colsMap.push({
						name:json.data[i].name,
						cols:json.data[i].key
					});
				}
			}else{
				if(thisFileName!=json.data[i].name){
					colsMap.push({
						name:json.data[i].name,
						cols:json.data[i].key
					});
				}	
			}
		}
		return colsMap;
	}
	//数据源列表,为每一个list绑定文件数据
	function getDSList(){
		var ht = baidu.template("filesList_template",json);
		$("#filesList").html(ht);
		$("#filesList li").each(function(){
			$(this).data("content",json.data[$(this).data("index")]);
		});
	}
	/*数据源拖拽*/
	$("#filesList").delegate("li","dragstart",function(e){
		e.originalEvent.dataTransfer.setData("file",$(this).data("file"));
	});
	$("#main").delegate("#connectArea","dragover",function(e){
		e.preventDefault();
	});
	$("#main").delegate("#connectArea","drop",function(e){
		e.preventDefault();
		e.stopPropagation(); 
		//接收files数据
		var content = e.originalEvent.dataTransfer.getData("file");
		addFiles(content);
	});
	function addFiles(name){
		if(connName.indexOf(name)>=0){
			return;
		}
		var files = null;
		for(var i=0;i<json.data.length;i++){
			if(json.data[i].name==name){
				files = json.data[i];
				break;
			}
		}
		console.log(files);
		connData.push(files);
		connName.push(name);
		//显示数据源实体
		if(connName.length==1){
			var ht = baidu.template("firstNode_template",files);
			$(".connectAreaRow").append("<li><ul class='connectAreaCol'>"+ht+"</ul></li>");
		}else if(connName.length==2){
			var ht = baidu.template("link1_template",files);
			$(".connectAreaRow").append("<li><ul class='connectAreaCol'>"+ht+"</ul></li>");
		}else if(connName.length>2){
			var ht = baidu.template("link2_template",files);
			$(".connectAreaRow>li:nth-child(2) .connectAreaCol").append(ht);
		}
		//显示表格
		if(connName.length==1){
			showTable(files.value);
		}else if(connName.length==2){
			twoEntity();
		}
	}
	//两个实体时
	function twoEntity(){
		var sourceName = connName[0];
		var targetName = connName[1];
		for(var i=0;i<connData[0].key.length;i++){
			for(var j=0;j<connData[1].key.length;j++){
				if(connData[0].key[i]==connData[1].key[j]){
					connPool.push({
						sourceName:sourceName,
						targetName:targetName,
						sourceFactor:connData[0].key[i],
						targetFactor:connData[0].key[j]
					});
					var tableData = buildConnection();
					console.log(tableData);
					showTable(tableData);
					return true;
				}
			}
		}
	}
	//建立链接
	function doConnect(){
		var sourceName = $("#source").data("file");
		var targetName = $("#thisSource").data("file");
		var sourceFactor = $("#source").val();
		var targetFactor = $("#thisSource").val();
		
		if(sourceName!="" && sourceFactor!="" && targetName!="" && targetFactor!=""){
			connPool.push({
				sourceName:sourceName,
				sourceFactor:sourceFactor,
				targetName:targetName,
				targetFactor:targetFactor
			});
			var tableData = buildConnection();
			console.log(tableData);
			showTable(tableData);
		}
	}
	function showTable(tableData){
		var ht = baidu.template("tableData_template",{data:tableData});
		$("#connTable").html(ht);
		$("#connTable").css("width",200*$("#connTable tbody tr").eq(0).find("td").length);
		$('#table').perfectScrollbar('update');
	}
	function buildConnection2(){
		console.log("链接条数:"+connPool.length);
		if(connPool.length<=0){
			return null;
		}
		var result = new Object();
		for(var i=0;i<connPool.length;i++){
			var oneConn = connPool[i];
			
			
		}
		return entries;
	}
	function buildConnection(){
		console.log("链接条数:"+connPool.length);
		if(connPool.length<=0){
			return null;
		}
		var entries = (getFileData(connPool[0].sourceName)).concat();
		var fileNames = [];
		for(var i=0;i<connPool.length;i++){
			var tmp = [];
			var oneConn = connPool[i];
			var oneSourceValue,
				oneTargetValue,
				sourceFactor,
				targetFactor;
			if(i==0){
				fileNames.push(oneConn.sourceName);
				fileNames.push(oneConn.targetName);
				oneSourceValue = entries;
				oneTargetValue = getFileData(oneConn.targetName);
				sourceFactor = oneConn.sourceFactor;
				targetFactor = oneConn.targetFactor;
			}else{
				if(fileNames.indexOf(oneConn.sourceName)>=0){
					oneSourceValue = entries;
					oneTargetValue = getFileData(oneConn.targetName);
					fileNames.push(oneConn.targetName);
					sourceFactor = oneConn.sourceFactor;
					targetFactor = oneConn.targetFactor;
				}else if(fileNames.indexOf(oneConn.targetName)>=0){
					oneSourceValue = getFileData(oneConn.sourceName);
					oneTargetValue = entries;			
					fileNames.push(oneConn.sourceName);
					sourceFactor = oneConn.targetFactor;
					targetFactor = oneConn.sourceFactor;
				}else{
					return null;
				}
			}
			
			if(oneSourceValue!=null && oneTargetValue!=null){
				for(var j=0;j<oneSourceValue.length;j++){
					var sourceItem = oneSourceValue[j][sourceFactor];
					for(var k=0;k<oneTargetValue.length;k++){
						var targetItem = oneTargetValue[k][targetFactor];
						if(sourceItem == targetItem){
							//var res = mergeEntry(oneSourceValue[j],oneTargetValue[k]);
							tmp.push(Object.assign(oneSourceValue[j],oneTargetValue[k]));
							//tmp.push(res);
							break;
						}
					}
				}
				entries = tmp.concat();
			}
		}
		return entries;
	}
	function mergeEntry(sourceEntry,targetEntry){
		
	}
	function getFileData(name){
		for(var i=0;i<json.data.length;i++){
			if(json.data[i].name==name){
				return json.data[i].value;
			}
		}
		return null;
	}
	//初始化
	function init(){
		getDSList();
	}
	init();
</script>	
</body>
</html>