<template>
	<div class="container">
		<div class="svg-timeline">
			<svg :width="svgWidth" :height="svgHeight">
				<!-- <line
          :x1="lines[0].x1 - 100"
          :y1="lines[0].y1"
          :x2="lines[0].x1"
          :y2="lines[0].y1"
          stroke="#e8f2ff"
          stroke-width="2"
          marker-end="url(#arrow)"
        /> -->
				<!-- <line
          v-for="(line, idx) in lines"
          :key="'line' + idx"
          :x1="line.x1"
          :y1="line.y1"
          :x2="line.x2"
          :y2="line.y2"
          stroke="#e8f2ff"
          stroke-width="2"
          marker-end="url(#arrow)"
        /> -->
				<!-- <path
          v-for="(arc, idx) in arcPaths"
          :key="'arc' + idx"
          :d="arc.d"
          fill="none"
          stroke="red"
          stroke-width="2"
        /> -->
				<line
					:x1="lines[0].x1 - 100"
					:y1="lines[0].y1"
					:x2="lines[0].x1"
					:y2="lines[0].y1"
					stroke="#e8f2ff"
					stroke-width="2"
					marker-end="url(#arrow)"
				/>
				<path :d="arcPaths" fill="none" stroke="#e8f2ff" stroke-width="2" marker-end="url(#arrow)" />
				<!-- <defs>
          <marker
            id="arrow"
            markerWidth="6"
            markerHeight="6"
            refX="6"
            refY="3"
            orient="auto"
            markerUnits="strokeWidth"
          >
            <path d="M0,0 L6,3 L0,6" fill="#333" />
          </marker>
        </defs> -->
				<!-- 节点 -->
				<circle
					v-for="(node, idx) in nodes.slice(0, nodes.length)"
					:key="'circle' + idx"
					:cx="node.x"
					:cy="node.y"
					r="4"
					fill="#fff"
					stroke="#1677ff"
					stroke-width="3"
				/>
				<line
					v-for="(node, idx) in nodes.slice(0, nodes.length)"
					:key="'line' + idx"
					:x1="node.x"
					:y1="node.y + 2"
					:x2="node.x"
					:y2="node.dyms ? node.y + 80 : node.y + 50"
					stroke="#1677ff"
					stroke-width="2"
				/>

				<text
					v-for="(node, idx) in nodes"
					:key="'actionDate' + idx"
					:x="node.x + 10"
					:y="node.y + 30"
					text-anchor="start"
					fill="#1677ff"
					font-size="14"
					font-weight="600"
				>
					{{ node.actionDate }}
				</text>
				<text
					v-for="(node, idx) in nodes"
					:key="'actionTitle' + idx"
					:x="node.x + 10"
					:y="node.y + 50"
					text-anchor="start"
					fill="#3b414b"
					font-size="14"
					textLength="170"
					lengthAdjust="spacing"
					font-weight="bold"
				>
					{{ node.actionTitle.slice(0,24) }}
				</text>

				<text
					v-for="(node, idx) in nodes"
					:key="'actionTitle' + idx"
					:x="node.x + 10"
					:y="node.y + 70"
					text-anchor="start"
					fill="#84888e"
					font-size="14"
					
				>
					{{ node.dyms ? node.dyms : "" }}
				</text>
			</svg>
		</div>
	</div>
</template>

<script>
export default {
	props: ["dataList"],
	data() {
		return {
			// dataList: [
			//   { actionDate: "2025-07-08 14:20", actionTitle: "起飞", dyms: '16票赞成 : 21票反对​ ' },
			//   { actionDate: "2025-07-08 14:22", actionTitle: "转弯" },
			//   { actionDate: "2025-07-08 14:25", actionTitle: "发现问题",dyms: '16票赞成 : 21票反对​ ' },
			//   { actionDate: "2025-07-08 14:27", actionTitle: "飞行",dyms: '16票赞成 : 21票反对​ ' },
			//   { actionDate: "2025-07-08 14:33", actionTitle: "转弯" },
			//   { actionDate: "2025-07-08 14:35", actionTitle: "飞行" },
			// ],
			maxPerRow: 5,
			nodeGapX: 200,
			nodeGapY: 100
		};
	},
	computed: {
		nodes() {
			// 计算每个节点的坐标（蛇形）
			return this.dataList.map((item, idx) => {
				const row = Math.floor(idx / this.maxPerRow);
				const col = idx % this.maxPerRow;
				let x, y;
				const leftMargin = 10; // 你可以自定义这个值

				if (row % 2 === 0) {
					x = leftMargin + col * this.nodeGapX + 50;
				} else {
					x = leftMargin + (this.maxPerRow - 1 - col) * this.nodeGapX + 50;
				}
				// 节点纵坐标起始值
				y = 60 + row * this.nodeGapY;
				return { ...item, x, y, row };
			});
		},
		lines() {
			const arr = [];
			const gap = 0; // 间隔长度
			for (let i = 0; i < this.nodes.length - 1; i++) {
				const x1 = this.nodes[i].x;
				const y1 = this.nodes[i].y;
				const x2 = this.nodes[i + 1].x;
				const y2 = this.nodes[i + 1].y;
				const dx = x2 - x1;
				const dy = y2 - y1;
				const len = Math.sqrt(dx * dx + dy * dy);
				// 计算起点和终点都缩进 gap
				const ratioStart = gap / len;
				const ratioEnd = (len - gap) / len;
				const sx = x1 + dx * ratioStart;
				const sy = y1 + dy * ratioStart;
				const tx = x1 + dx * ratioEnd;
				const ty = y1 + dy * ratioEnd;
				arr.push({
					x1: sx,
					y1: sy,
					x2: tx,
					y2: ty
				});
			}
			return arr;
		},
		arcPaths() {
			if (this.nodes.length < 2) return "";

			let path = `M ${this.nodes[0].x} ${this.nodes[0].y}`;

			for (let i = 1; i < this.nodes.length; i++) {
				const prev = this.nodes[i - 1];
				const curr = this.nodes[i];
				console.log("prev", prev);

				// 判断是否是行尾转折点
				const isTurnPoint = i % 5 === 0;

				if (isTurnPoint) {
					// 计算半圆路径
					const radius = 10 / 2;
					if (prev.row % 2 === 0) {
						// 偶数行向右凸半圆
						path += ` 
              L ${prev.x + radius} ${prev.y}
              A ${radius} ${radius} 0 0 1 ${curr.x - radius} ${curr.y}
              L ${curr.x} ${curr.y}`;
					} else {
						// 奇数行向左凸半圆
						path += ` 
              L ${prev.x - radius} ${prev.y}
              A ${radius} ${radius} 0 0 0 ${curr.x + radius} ${curr.y}
              L ${curr.x} ${curr.y}`;
					}
				} else {
					// 同行节点间用直线连接
					path += ` L ${curr.x} ${curr.y}`;
				}
			}

			return path;
		},
		svgWidth() {
			return this.maxPerRow * this.nodeGapX + 100;
		},
		svgHeight() {
			// SVG高度
			return Math.ceil(this.dataList.length / this.maxPerRow) * this.nodeGapY + 40;
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.svg-timeline {
	width: 1000px;
	// background-size: 100% 100%;
	// position: relative;
	// .title {
	//   position: absolute;
	//   top: 0;
	//   left: 32px;
	//   width: 100%;
	//   height: 100%;
	//   font-family: YouSheBiaoTiHei;
	//   font-size: 16px;
	//   color: #ffffff;
	//   line-height: 24px;
	//   background: linear-gradient(90deg, #ffffff 0%, #79c2ff 100%);
	//   -webkit-background-clip: text;
	//   -webkit-text-fill-color: transparent;
	//   display: flex;
	//   align-items: center;
	//   height: 40px;
	//   img {
	//     width: 12px;
	//     height: 24px;
	//   }
	// }
}
</style>
