<template>
	<div class="wrap">
		<div class="box1">
			<AnalysisBox title="相关政令" :showAllBtn="false">
				<div class="box1-main">
					<el-scrollbar height="100%" always>
						<el-empty v-if="siderList.length===0" style="padding-top: 240px" description="暂无数据" :image-size="100" />
						<div class="left-item" :class="{ 'item-active': siderActive===index }" v-for="(item, index) in siderList" :key="index" @click="handleClickSider(index)">
							<div class="item-head">
								<div class="itme-name one-line-ellipsis">{{ item.name }}</div>
								<div class="item-tag">政令</div>
							</div>
							<div class="itme-time one-line-ellipsis">{{ item.year }} · {{ "美国白宫" }} </div>
						</div>
					</el-scrollbar>
				</div>
			</AnalysisBox>
		</div>
		<div class="box2">
			<AnalysisBox title="政令关系挖掘" :showAllBtn="false">
				<div class="box2-main">
					<div ref="containerRef" class="graph-container"></div>
				</div>
			</AnalysisBox>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";
import * as G6 from '@antv/g6';
import { getDecreeRelateOrder } from "@/api/decree/deepdig";

import icon1628 from "./assets/icons/icon1628.png";
import icon1629 from "./assets/icons/icon1629.png";

const route = useRoute();

// 相关政令
const siderList = ref([]);
const siderActive = ref(0);
const handleClickSider = async index => {
	siderActive.value = index;
};
const handleGetRelateOrder = async () => {
	try {
		const res = await getDecreeRelateOrder({id: route.query.id});
		console.log("相关政令", res);
		if (res.code===200 && res.data?.length) {
			siderList.value = res.data
			initChart(true)
		} else {
			siderList.value = []
		}
	} catch (error) {
		siderList.value = [];
	}
};

// 政令关系挖掘
const containerRef = ref();
let graphInstance = null;
const onFormatNode = node => {
	// 判断文字数量大于8的在第八位后插入换行符
	if (node.label.length > 8) {
		let str = node.label
		node.label = str.substring(0, 8) + "\n" + str.substring(8);
	}
}
const onFormatEdge = edge => {
	edge.type = "line";
	edge.label = ["", "相似", "继承", "冲突"][edge.status];
	edge.style = {
		stroke: ["", "#B9DCFF", "#87E8DE", "#FFCCC7"][edge.status],
		lineWidth: 1,
		endArrow: true,
	};
	edge.labelCfg = {
		autoRotate: true,
		style: {
			fill: ["", "#055FC2", "#13A8A8", "#CE4F51"][edge.status],
			fontSize: 10,
			fontFamily: 'Microsoft YaHei',
			background: {
				fill: ["", "#E7F3FF", "#E6FFFB", "#FFE0E0"][edge.status],
				padding: [2, 4, 2, 4],
				radius: 2
			}
		}
	};
}
let data = {
	nodes: [
		{
			"id": "0", "label": "济南鑫银博电子设备有限公司", "img": icon1628, "size": 60, "isCenter": true,
			"clipCfg": { "show": true, "type": "circle", "r": 30 },
			"style": { "cursor": "pointer" },
			"labelCfg": {
				"position": "bottom", "offset": 12,
				"style": { "fill": "#1459BB", "fontSize": 13, "fontWeight": "bold", "fontFamily": "Microsoft YaHei", "textAlign": "center" }
			},
			"name": "济南鑫银博电子设备有限公司", "image": "/src/views/decree/decreeLayout/influence/assets/images/company-active.png", "symbolSize": 60, "isSanctioned": true
		},
		{ 
			"id": "p-91320508MA1T9M2D39", "label": "苏州市创新产业发展引导基金（有限合伙）", "img": icon1629, "size": 40, "isCenter": false,
			"clipCfg": { "show": true, "type": "circle", "r": 20 },
			"style": { "cursor": "pointer" }, 
			"labelCfg": {
				"position": "bottom", "offset": 12,
				"style": { "fill": "#333", "fontSize": 11, "fontWeight": "normal", "fontFamily": "Microsoft YaHei", "textAlign": "center" }
			},
			"name": "苏州市创新产业发展引导基金（有限合伙）", "image": icon1629, "symbolSize": 40, "isSanctioned": false },
		{ "id": "p-913706826806548758", "label": "烟台广源食品检测服务有限公司", "img": icon1629, "size": 40, "isCenter": false, "clipCfg": { "show": true, "type": "circle", "r": 20 }, "style": { "cursor": "pointer" }, "labelCfg": { "position": "bottom", "offset": 12, "style": { "fill": "#333", "fontSize": 11, "fontWeight": "normal", "fontFamily": "Microsoft YaHei", "textAlign": "center" } }, "name": "烟台广源食品检测服务有限公司", "image": icon1629, "symbolSize": 40, "isSanctioned": false },
		{ "id": "p-12450000498506980D", "label": "南宁师范大学", "img": icon1629, "size": 40, "isCenter": false, "clipCfg": { "show": true, "type": "circle", "r": 20 }, "style": { "cursor": "pointer" }, "labelCfg": { "position": "bottom", "offset": 12, "style": { "fill": "#333", "fontSize": 11, "fontWeight": "normal", "fontFamily": "Microsoft YaHei", "textAlign": "center" } }, "name": "南宁师范大学", "image": icon1629, "symbolSize": 40, "isSanctioned": false },
		{ "id": "p-914403007755864498", "label": "深圳市华为培训学院有限公司", "img": icon1629, "size": 40, "isCenter": false, "clipCfg": { "show": true, "type": "circle", "r": 20 }, "style": { "cursor": "pointer" }, "labelCfg": { "position": "bottom", "offset": 12, "style": { "fill": "#333", "fontSize": 11, "fontWeight": "normal", "fontFamily": "Microsoft YaHei", "textAlign": "center" } }, "name": "深圳市华为培训学院有限公司", "image": icon1629, "symbolSize": 40, "isSanctioned": false },
		{ "id": "p-91230183MAD46C3N7A", "label": "尚志市聚源新能源有限公司", "img": icon1629, "size": 40, "isCenter": false, "clipCfg": { "show": true, "type": "circle", "r": 20 }, "style": { "cursor": "pointer" }, "labelCfg": { "position": "bottom", "offset": 12, "style": { "fill": "#333", "fontSize": 11, "fontWeight": "normal", "fontFamily": "Microsoft YaHei", "textAlign": "center" } }, "name": "尚志市聚源新能源有限公司", "image": icon1629, "symbolSize": 40, "isSanctioned": false },
		{ "id": "p-12100000400012211J", "label": "中国科学院高能物理研究所", "img": icon1629, "size": 40, "isCenter": false, "clipCfg": { "show": true, "type": "circle", "r": 20 }, "style": { "cursor": "pointer" }, "labelCfg": { "position": "bottom", "offset": 12, "style": { "fill": "#333", "fontSize": 11, "fontWeight": "normal", "fontFamily": "Microsoft YaHei", "textAlign": "center" } }, "name": "中国科学院高能物理研究所", "image": icon1629, "symbolSize": 40, "isSanctioned": false }
	],
	edges: [
		{ "id": "edge-0", "target": "p-91320508MA1T9M2D39", "source": "0", "status": 1 },
		{ "id": "edge-1", "target": "p-913706826806548758", "source": "0", "status": 1 },
		{ "id": "edge-2", "target": "p-12450000498506980D", "source": "0", "status": 2 },
		{ "id": "edge-3", "target": "p-914403007755864498", "source": "0", "status": 3 },
		{ "id": "edge-4", "target": "p-91230183MAD46C3N7A", "source": "0", "status": 2 },
		{ "id": "edge-5", "target": "p-12100000400012211J", "source": "0", "status": 3 }
	]
}
const initChart = (first=false) => {
	const width = containerRef.value.offsetWidth || 800
	const height = containerRef.value.offsetHeight || 600
  const centerX = width / 2
  const centerY = height / 2
  const radius = Math.min(width, height) / 2 - 120

	data.edges.forEach(onFormatEdge)
	data.nodes.forEach(onFormatNode)
	const otherNodes = data.nodes.filter(n => !n.isCenter)
  const nodeCount = otherNodes.length
  otherNodes.forEach((node, index) => {
    const angle = (2 * Math.PI * index) / nodeCount - Math.PI / 2
    node.x = centerX + radius * Math.cos(angle)
    node.y = centerY + radius * Math.sin(angle)
  })
  const centerNode = data.nodes.find(n => n.isCenter)
  if (centerNode) {
    centerNode.x = centerX
    centerNode.y = centerY
    centerNode.fx = centerX
    centerNode.fy = centerY
  }

	if (first) {
		graphInstance = new G6.Graph({
			container: containerRef.value,
			width,
			height,
			fitView: false,
			fitCenter: false,
			animate: true,
			animateCfg: {
				duration: 300,
				easing: 'easeLinear'
			},
			minZoom: 0.1,
			maxZoom: 10,
			modes: {
				default: [
					'drag-canvas',
					'zoom-canvas',
					'drag-node',
				]
			},
			defaultNode: {
				type: 'image',
				size: 40,
				clipCfg: {
					show: true,
					type: 'circle',
					r: 20
				},
				labelCfg: {
					position: 'bottom',
					offset: 10,
					style: {
						fill: '#333',
						fontSize: 11,
						fontFamily: 'Microsoft YaHei',
						textAlign: 'center',
						background: {
							fill: 'rgba(255, 255, 255, 0.95)',
							padding: [4, 6, 4, 6],
							radius: 4
						},
					}
				}
			},
		})

		// 节点点击处理
		graphInstance.on('node:click', (evt) => {
			console.log('节点详情:', evt.item);
		});
	}

	graphInstance.data(data)
  graphInstance.render()
}

onMounted(() => {
	handleGetRelateOrder();
});

onBeforeUnmount(() => {
	graphInstance?.destroy()
})
</script>

<style lang="scss" scoped>
.wrap {
	min-height: 845px;
	width: 1600px;
	margin: 16px auto;
	display: flex;
	gap: 16px;

	.box1 {
		width: 480px;

		.box1-main {
			padding: 10px 16px;
				
			.left-item {
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				border-bottom: 1px solid rgba(240, 242, 244, 1);
				padding: 10px;
				cursor: pointer;
				&:first-child {
					border-top: 1px solid rgba(240, 242, 244, 1);
				}
				&:hover {
					background: rgba(246, 250, 255, 1);
				}
				.item-head {
					display: flex;
					align-items: center;
					margin-bottom: 6px;
				}
				.itme-name {
					width: 20px;
					flex: auto;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 600;
					letter-spacing: 0px;
				}
				.item-tag{
					height: 24px;
					line-height: 24px;
					text-align: center;
					padding: 0 8px;
					border-radius: 12px;
					background: rgba(231, 243, 255, 1);
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					letter-spacing: 0px;
					margin-left: 6px;
				}
				.itme-time {
					color: rgb(95, 101, 108);
					font-family: "Source Han Sans CN";
					font-size: 16px;
					font-weight: 400;
					letter-spacing: 0px;
				}
			}

			.item-active {
				background: rgba(246, 250, 255, 1);
				position: relative;

				&::after {
					position: absolute;
					content: "";
					width: 5px;
					height: 100%;
					background: var(--color-main-active);
					right: 0px;
					top: 0px;
				}
			}
		}
	}

	.box2 {
		width: 20px;
		flex: auto;
		.box2-main {
			height: 100%;
			padding: 10px;
			.graph-container {
				width: 100%;
				height: 600px;
			}
		}
	}
}

// 修改element-plus滚动条样式
:deep(.el-scrollbar__bar.is-vertical) {
	right: 0px;
	width: 4px;
	background: transparent;
	border-radius: 2px;
	&>div {
		background: #c5c7c9;
		opacity: 1;
	}
	&>div:hover {
		background: #505357;
	}
}
</style>
