<template>
	<div class="character-relationships">
		<div class="headerBox">
			<span
				v-for="(item, index) in list"
				:key="index"
				class="headerItem"
				:class="{ active: item === activeIndex }"
				@click="activeIndex = item"
				>{{ item }}</span
			>
		</div>
		<div class="headerBtnBox"><img src="./assets/下载按钮.png" alt="" /><img src="./assets/收藏按钮.png" alt="" /></div>
		<!-- 主要内容，人物关系图 -->
		<div class="mainBox">
			<div class="graph" id="relGraph"></div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import * as echarts from "echarts";
import Center from "./assets/约翰·伦道夫·图恩.png";
import P1 from "./assets/唐纳德·特朗普.png";
import P2 from "./assets/约翰·巴拉索.png";
import P3 from "./assets/布里顿·图恩.png";
import P4 from "./assets/金伯利·韦姆斯·图恩.png";
import P5 from "./assets/乔治·S·米克尔森.png";
import P6 from "./assets/哈罗德·理查德·图恩.png";
import P7 from "./assets/伊冯娜·帕特里夏·图恩.png";
import P8 from "./assets/蒂姆·约翰逊.png";
import P9 from "./assets/吉姆·阿布德诺.png";
import P10 from "./assets/汤姆·达施勒.png";
import P11 from "./assets/拉里莎·图恩.png";
import PS from "./assets/拉里·普雷斯勒.png";

const list = ref(["圆形布局", "力导向布局", "树形布局"]);
const activeIndex = ref("圆形布局");

const nodes = [
	{
		id: "c",
		name: "约翰·伦道夫·图恩",
		category: 0,
		symbolSize: 80,
		symbol: `image://${Center}`,
		label: {
			show: true,
			position: "bottom",
			formatter: "{n|约翰·伦道夫·图恩}",
			rich: {
				n: {
					color: "rgba(5,95,194,1)",
					fontSize: 24,
					fontWeight: 700,
					fontFamily: "Microsoft YaHei",
					lineHeight: 36
				}
			}
		}
	},
	// 从三点钟方向顺时针排序
	{ id: "n11", name: "拉里莎·图恩", category: 1, symbolSize: 80, symbol: `image://${P11}` },
	{ id: "n7", name: "伊冯娜·帕特里夏·图恩", category: 1, symbolSize: 80, symbol: `image://${P7}`, r: 80 },
	{ id: "n6", name: "哈罗德·理查德·图恩", category: 1, symbolSize: 80, symbol: `image://${P6}` },
	{ id: "n9", name: "吉姆·阿布德诺", category: 1, symbolSize: 80, symbol: `image://${P9}` },
	{ id: "n12", name: "拉里·普雷斯勒", category: 1, symbolSize: 80, symbol: `image://${PS}` },
	{ id: "n5", name: "乔治·S·米克尔森", category: 1, symbolSize: 80, symbol: `image://${P5}`, r: 80 },
	{ id: "n8", name: "蒂姆·约翰逊", category: 1, symbolSize: 80, symbol: `image://${P8}` },
	{ id: "n10", name: "汤姆·达施勒", category: 1, symbolSize: 80, symbol: `image://${P10}`, r: 80 },
	{ id: "n2", name: "约翰·巴拉索", category: 1, symbolSize: 80, symbol: `image://${P2}` },
	{ id: "n1", name: "唐纳德・特朗普", category: 1, symbolSize: 80, symbol: `image://${P1}` },
	{ id: "n4", name: "金伯利·韦姆斯·图恩", category: 1, symbolSize: 80, symbol: `image://${P4}` },
	{ id: "n3", name: "布里顿·图恩", category: 1, symbolSize: 80, symbol: `image://${P3}`, r: 80 }
];

const links = [
	{ source: "n11", target: "c", label: { show: true, formatter: "次女" } },
	{ source: "n7", target: "c", label: { show: true, formatter: "母亲" } },
	{ source: "n6", target: "c", label: { show: true, formatter: "父亲" } },
	{ source: "n9", target: "c", label: { show: true, formatter: "" } },
	{ source: "n12", target: "c", label: { show: true, formatter: "盟友" } },
	{ source: "n5", target: "c", label: { show: true, formatter: "前南达科他州州长" } },
	{ source: "n8", target: "c", label: { show: true, formatter: "政治对手" } },
	{ source: "n10", target: "c", label: { show: true, formatter: "政治对手" } },
	{ source: "n2", target: "c", label: { show: true, formatter: "亲密盟友" } },
	{ source: "n1", target: "c", label: { show: true, formatter: "政治盟友" } },
	{ source: "n4", target: "c", label: { show: true, formatter: "妻子" } },
	{ source: "n3", target: "c", label: { show: true, formatter: "长女" } }
];

let chart;

onMounted(() => {
	const el = document.getElementById("relGraph");
	if (!el) return;
	chart = echarts.init(el);
	const setOption = () => {
		const rect = el.getBoundingClientRect();
		const cx = rect.width / 2;
		const cy = rect.height / 2;
		const radius = Math.min(cx, cy) - 140;

		const dataNodes = nodes.map((n, i) => {
			if (n.id === "c") {
				return { ...n, x: cx, y: cy, fixed: true };
			}
			// 均匀环形分布
			const idx = i - 1;
			const angle = (idx / (nodes.length - 1)) * Math.PI * 2;
			const rLocal = radius + (n.r || 0);
			const x = cx + rLocal * Math.cos(angle);
			const y = cy + rLocal * Math.sin(angle);
			return { ...n, x, y };
		});

		chart.setOption({
			tooltip: {},
			series: [
				{
					type: "graph",
					layout: activeIndex.value === "圆形布局" ? "none" : "force",
					circular: { rotateLabel: true },
					force: { repulsion: 800, edgeLength: [80, 160] },
					roam: true,
					data: activeIndex.value === "圆形布局" ? dataNodes : nodes,
					links: links,
					edgeSymbol: ["none", "arrow"],
					edgeSymbolSize: [4, 10],
					lineStyle: { color: "rgba(174,214,255,1)", width: 2, opacity: 0.8 },
					edgeLabel: {
						show: true,
						position: "middle",
						distance: -18,
						formatter: ({ data }) => data?.label?.formatter || "",
						color: "rgb(5, 95, 194)",
						fontSize: 12,
						fontWeight: 400,
						fontFamily: "Microsoft YaHei",
						lineHeight: 24,
						backgroundColor: "rgba(231, 243, 255, 1)",
						borderRadius: 24,
						padding: [0, 12]
					},
					label: { show: true, position: "bottom", color: "rgb(59,65,75)", fontSize: 16 },
					itemStyle: { color: "rgba(5,95,194,1)" },
					emphasis: { focus: "adjacency" }
				}
			]
		});
	};
	setOption();
	const onResize = () => chart && chart.resize();
	window.addEventListener("resize", onResize);
	watch(activeIndex, () => setOption());
	onBeforeUnmount(() => {
		window.removeEventListener("resize", onResize);
		chart && chart.dispose();
	});
});
</script>

<style lang="scss" scoped>
* {
	padding: 0;
	margin: 0;
}
.character-relationships {
	width: 1600px;
	height: 688px;
	background-color: #fff;
	margin: 0 auto;
	position: relative;
	border-radius: 4px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	.headerBox {
		position: absolute;
		top: 14px;
		right: 96px;
		.headerItem {
			padding: 1px 8px;
			border-radius: 4px;
			font-size: 16px;
			font-weight: 400;
			line-height: 30px;
			cursor: pointer;
			color: rgb(59, 65, 75);
			font-family: "Microsoft YaHei";
			margin-right: 8px;
			border: 1px solid rgb(230, 231, 232);
		}
		.active {
			background-color: rgba(246, 250, 255, 1);
			border-color: rgb(5, 95, 194);
			color: rgb(5, 95, 194);
		}
	}
	.headerBtnBox {
		position: absolute;
		top: 14px;
		right: 12px;
		img {
			width: 28px;
			height: 28px;
			margin-right: 4px;
			cursor: pointer;
		}
	}
	.mainBox {
		width: 100%;
		height: 100%;
		padding-top: 42px;
		.graph {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
