<template>
	<div>
		<el-dialog :visible="visible" :before-close="handleClose" :close-on-click-modal="false" fullscreen>
			<div class="header">
				{{$i18n.locale === 'zh-CN'?parmas.targetName:parmas.targetNameEn}}{{$i18n.locale === 'zh-CN'?'指标关系图':' Index diagram'}}
			</div>
			<div id="relationship" class="full"></div>
		</el-dialog>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	import {
		mapState
	} from 'vuex'
	import financialTheme from '@/api/bigScrenn/financialTheme.js'
	import moment from "moment"
	export default {
		name: 'relationshipDialog',
		components: {},
		data() {
			return {
				visible: false,
				parmas: {

				},
				dataList: [],
				hierarchy: null
			}
		},
		created() {},
		mounted() {},
		methods: {
			add(val, index) {
				console.log(val, index);
				this.hierarchy = null
				this.visible = true
				this.parmas = val
				this.hierarchy = index
				financialTheme.getTarget(this.parmas.targetId, res => {
					if (res) {
						let arr = this.$i18n.locale === 'zh-CN' ? JSON.stringify(res.value).replace(
							/targetName/g, 'name') : JSON.stringify(res.value).replace(/targetNameEn/g,
							'name')
						console.log(arr);
						this.dataList = JSON.parse(arr)
						this.$nextTick(() => {
							this.getRelationship()
						})
						let node = this.findNodeById(this.dataList, this.parmas.targetId)
						if (node) {
							node.itemStyle = {
								color: '#a53626',
								borderColor: '#a53626',
							}
						}
					}
				})
			},
			findNodeById(arr, id) {
				for (let i = 0; i < arr.length; i++) {
					let node = arr[i];
					if (node.targetId === id) {
						return node;
					}
					if (node.children) {
						let result = this.findNodeById(node.children, id);
						if (result) {
							return result;
						}
					}
				}
				return null;
			},
			handleClose() {
				this.visible = false
			},
			resize() {

				let elesArr = Array.from(new Set(this.myChart._chartsViews[0]._data._graphicEls));
				let dep = this.myChart._chartsViews[0]._data.tree.root.height; //获取树高
				let layer_height = 100; //层级之间的高度
				let currentHeight = layer_height * (dep + 1) || layer_height;
				let newHeight = Math.max(currentHeight, layer_height);
				this.chartHeight = newHeight + 'px';
				let layer_width = 100; // 兄弟节点之间的距离
				let currentWidth = layer_width * (elesArr.length - 1) || layer_width;
				let newWidth = Math.max(currentWidth, layer_width);
				this.chartWidth = newWidth + 'px';
				this.myChart.resize();

			},
			clickFun(param) {
				financialTheme.getParentLevel(param.data.targetId, res => {
					console.log(param.data.targetId);
					if (res.value) {
						if (param.data.level == 1) {
							window.localStorage.setItem("indexData", JSON.stringify(res.value[0]));
							window.localStorage.setItem("firstPageName", JSON.stringify(res.value[0]));
							window.localStorage.setItem("targetId", param.data.targetId);
							this.$router.push({
								name: 'firstLevelPage',
							})
						} else if (param.data.level == 2) {
							window.localStorage.setItem("indexData", JSON.stringify(res.value[1]));
							window.localStorage.setItem("firstPageName", JSON.stringify(res.value[0]));
							window.localStorage.setItem("secondPageName", JSON.stringify(res.value[1]));
							window.localStorage.setItem("targetId", param.data.targetId);
							this.$router.push({
								name: 'secondLevelPage',
							})
						} else if (param.data.level == 3) {
							window.localStorage.setItem("indexData", JSON.stringify(res.value[2]));
							window.localStorage.setItem("firstPageName", JSON.stringify(res.value[0]));
							window.localStorage.setItem("secondPageName", JSON.stringify(res.value[1]));
							window.localStorage.setItem("thirdPageName", JSON.stringify(res.value[2]));
							window.localStorage.setItem("targetId", param.data.targetId);
							this.$router.push({
								name: 'thirdLevelPage',
							})
						} else if (param.data.level == 4) {
							window.localStorage.setItem("indexData", JSON.stringify(res.value[3]));
							window.localStorage.setItem("firstPageName", JSON.stringify(res.value[0]));
							window.localStorage.setItem("secondPageName", JSON.stringify(res.value[1]));
							window.localStorage.setItem("thirdPageName", JSON.stringify(res.value[2]));
							window.localStorage.setItem("fourthPageName", JSON.stringify(res.value[3]));
							window.localStorage.setItem("targetId", param.data.targetId);
							this.$router.push({
								name: 'fourthLevelPage',
							})

						}
						console.log(res.value);
						this.$emit('callback')
						this.visible = false
					}
				})

			},
			getRelationship() {
				let chartDom = echarts.init(document.getElementById('relationship'))



				chartDom.on("click", this.clickFun);
				let option = {

					tooltip: {
						trigger: 'item',
						triggerOn: 'mousemove',
						backgroundColor: 'skyblue',
						borderColor: 'skyblue',
					},
					series: [{
						type: 'tree',
						orient: 'horizontal',
						symbol: 'rect',
						edgeShape: 'polyline',
						symbolSize: [this.$i18n.locale === 'zh-CN' ? 120 : 210, 30], //设置框的大小

						itemStyle: {
							normal: {
								color: '#000',
								borderColor: '#4980BD',
								borderWidth: 1,
								label: {
									show: true,
									position: 'inside',
									textStyle: {
										color: '#fff'
									}
								}
							},
							emphasis: {
								color: '#4980BD',
								label: {
									show: true,
									color: '#fff',
									fontWeight: 'bold',
								}
							}
						},
						// itemStyle: {
						// 	color: '#000',
						// 	emphasis: {
						// 		label: {
						// 			show: true,
						// 			position: 'inside',
						// 			color: '#fff',
						// 		}
						// 	}
						// },
						expandAndCollapse: false,
						//线条的颜色
						lineStyle: {
							normal: {
								opacity: 0.9,
								color: '#4980BD',
								type: 'solid',
								width: 2,
							},
						},

						data: this.dataList,
						nodeGap: 20 // 设置节点间的间距为 20
					}, ],

				};
				option && chartDom.setOption(option)
				// var defaultSelectedNode = this.parmas.targetId;
				// chartDom.on('dataZoom', function(params) {
				// 	// 获取树状图实例
				// 	var tree = chartDom.getModel().getComponent('series', 0);
				// 	// 获取节点对应的索引
				// 	var nodeIndex = tree.getNodeByDataIndex(defaultSelectedNode).getIndex();
				// 	// 设置节点为选中状态
				// 	tree.setSelected(nodeIndex);
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.full {
		height: calc(100% - 80px);
	}

	/deep/ .el-dialog {
		min-height: 312px;
		background: url('~@/assets/img/dialog-bg.png') center / 100% 100% no-repeat;
		background-color: rgba(0, 0, 0, 1);
	}

	/deep/ .el-dialog__header {
		padding: 0;
		margin: 0;
		height: 0;
	}

	/deep/ .el-dialog__body {
		padding: 0;
		height: 100%;

	}

	.header {
		width: 100%;
		height: 35px;
		background: url('~@/assets/img/dialog-header-bg.png') center / 100% 100% no-repeat;
		font-size: 22px;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		font-style: italic;
		color: #F6F9FE;
		padding-left: 30px;
		box-sizing: border-box;
		text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);

	}

	.search {
		text-align: right;
		padding-right: 100px;
		box-sizing: border-box;
	}

	/deep/ .el-dialog__wrapper {
		background-color: rgba(0, 0, 0, .8);
	}

	/deep/ .el-dialog__headerbtn {
		background: url("~@/assets/img/dialog-shut.png");
		background-size: cover;
		height: 20px;
		width: 20px;

		i {
			display: none; // 在这里隐藏弹窗默认的关闭图标
		}
	}
</style>