// 绘制 节点鼠标悬浮时的提示信息
function nodefunction(itemData, item) {
  let html = "<div class='net-hover'>" +
		"<p class='netTitle'>" + itemData.properties.name + "</p>"
		+ "<div class='netContent'>";
	if (itemData.properties.sign) {
		html += "<p class='sign'>"+ itemData.properties.sign +"</p></br>";
	}
	if (itemData.properties.desc) {
		html += itemData.properties.desc + "</br>";
	}
	html += "</div>" +"</div>";
  return html;
}
// 绘制 关联线条上内容鼠标悬浮时的提示信息
function linkfunction(itemData, item) {
  var html = "", empty = "--";

  html += "<div class='netHoverinvest'>";
  html += "<p>" + item.from.label + "</br>";
  html += "<p class='typeColor'>"
  if (itemData.properties.sign) {
    html += itemData.properties.sign + "</br>";
  }
  html += "</p>"
  if (item.to.label) {
    html += item.to.label + "</br>";
  }
  if (itemData.properties != null) {
    if (itemData.properties.desc) {
      html += itemData.properties.desc +"</br>";
    }
  }
  html += "</p></div>";
  return html;
}
function nodeStyle(node) {
  node.label = node.data.name;
  node.relevance = 0;
  node.fillColor = "#75cede";
  node.lineWidth = 1;
  if (node.dataLinks.length > node.links.length) {
    node.items = [{ px: 0.4, py: -0.8, text: "", padding: 0, scaleWithZoom: true, aspectRatio: 1, backgroundStyle: { fillColor: "red" } }];
  } else {
    node.items = [];
  }
  initNode(node)
}
// 绘制 节点 大小及背景
function initNode (node) {
	node.radius = 25;//节点圈的大小30
	if (node.data.size) {
		node.radius = node.data.size;
	}
  if (node.data.img) {
		node.image = node.data.img;
	}
	if (node.data.bgColor) {
		node.fillColor = node.data.bgColor;
	}
}
// 绘制 关联线条 上的显示文字
function linkStyle(link) {
  link.length = .5;
  link.radius = 1;
  link.label = "";
  // link.fromDecoration = "circle";
  link.toDecoration = "arrow";

  link.fillColor = '#bbb';//必须写在这 才能保证新增加的线条颜色保持一致
  if (link.data.properties.relation) {
    link.label = link.data.properties.relation;
  }
}
// 过滤节点间关联关系数据
function lineMerging(links) {
	var data = [].concat(JSON.parse(JSON.stringify(links)));
	var i, arr = [];
	data = data.map((item, index) => {
		i = data.find(elt => (item.from === elt.from && item.to === elt.to));
		if (i === item) {
			return item
		} else {
			arr.push(item);
			return undefined
		}
	}).filter(item => item !== undefined).map(elt => {
		if (arr.length) {
			arr.map((items) => {
				if (items.from === elt.from && items.to === elt.to) {
					if (items.type != elt.type) {
						elt.type = `${items.type},${elt.type}`
					}
					if (items.properties.relation && elt.properties.relation) {
						elt.properties = {
							...elt.properties,
							relation: `${items.properties.relation},${elt.properties.relation}`
						}
					} else {
						elt.properties = {
							...elt.properties,
							...items.properties
						}
					}
				}
			})
		}
		return elt
	});
	return data;
}

const RelationZoomChart = ({ data, element }) => {
	let { links, nodes } = data;
	// 根节点的id
	let toID = nodes.filter(elt => elt.isRootNode === true)[0].id.toString();
	const options = {
		container: element,
		interaction: {
			resizing: {
				enabled: true //false 1
			},
			selection: {
				lockNodesOnMove: true,
			},
			zooming: {
				initialAutoZoom: true,
				doubleClickZoom: 3,
				zoomExtent: [0.1, 3],
				//autoZoomSize: 0.8,
				//zoomExtent: [0.01, 1],
				// autoZoomExtent: [null, 1],
				// autoZoomPositionElasticity: 0.0001
			},
		},
		navigation: {
			// 谁为目标节点,分多节和单节点
			initialNodes: [toID],
			mode: "focusnodes",
			focusNodeExpansionRadius: 60, //8
			focusNodeTailExpansionRadius: 0.3, //2
			numberOfFocusNodes: 600, //如果这个过少会影响initialNodes，在多节点中
			expandOnClick: true,
			//expandDelay:1500
		},
		data: {
			preloaded: {
				links: lineMerging(links),
				nodes
			}
		},
		layout: {
			mode: "dynamic",
			// nodeSpacing:60,
			// rowSpacing:20,
			layoutFreezeTimeout: 550 //2000
		},
		style: {
			nodeLabelScaleBase: 10,
			node: {
				display: "image",
				imageCropping: true
			},
			nodeDetailMinSize: 0,
			linkDecorationMinSize: 0.4, //箭头的大小
			linkDecorationScale: 5, //箭头比例
			nodeDetailMinZoom: 0,
			selection: {
				fillColor: "#9aabeb", //颜色//022ccc
				sizeConstant: 3,
				shadowColor: "transparent"
			},
			// nodeSelected: {
			//     shadowColor: "#f40",
			//     shadowBlur: 0
			// },
			nodeStyleFunction: nodeStyle, //节点样式
			linkStyleFunction: linkStyle, //节点之间连线的样式
			nodeLabel: {
				textStyle: {
					fillColor: '#444',
					font: "12px 微软雅黑"
				},
				backgroundStyle: {
					fillColor: "transparent"
				},
				borderRadius: 0,
				maxWidth: 200,
				align: "center",
				aspectRatio: 4,
				padding: 4,
				scaleWithSize: false,
				scaleWithZoom: true //字的大小
			},
			nodeRadiusExtent: [0, 20],
			linkLengthExtent: [0, 10],
			link: {
				toDecoration: "arrow", //箭头
				fromDecoration: "", //箭头
				strength: 100
			},
			linkLabel: {
				padding: 2,
				textStyle: {
					font: "12px 宋体",
					fillColor: "#666"
				},
				backgroundStyle: {
					fillColor: "#fff",
					lineColor: "#fff"
				}
			}
		},
		info: {
			enabled: true,
			nodeContentsFunction: nodefunction, //移入节点 显示样式
			linkContentsFunction: linkfunction //移入节点之间连线 显示样式
		},
		nodeMenu: {
			buttons: ["hide", "expand"] //dynaminc
		},
		localization: {
			menu: {
				hide: "隐藏",
				collapse: "合并",
				expand: "展开隐藏节点"
			},
			toolbar: {
				fitTitle: "适合屏幕",
				rearrangeTitle: "重新排列元素",
				unfreezeTitle: "解锁全部",
				freezeTitle: "全部锁定",
				backTitle: "撤销上一步操作",
				fullscreenTitle: "切换全屏模式",
			}
		},
		linkMenu: {
			enabled: false
		},
		advanced: {
			pointer: {
				scrollIntoView: false
			}
		},
		events: {},
	}
	if (nodes.length < 60) {
		options.layout.nodeSpacing = 160
	} else if (nodes.length > 1000) {
		options.navigation.focusNodeExpansionRadius = 1
	}
	const chart = new NetChart(options);
	return chart
};

export default RelationZoomChart;
