<template>
	<div class="container">
		<div class="svg-timeline">
			<svg :viewBox="`0 0 ${svgWidth} ${svgHeight}`" width="100%" height="100%">
				<line
					v-if="nodes.length > 0"
					:x1="nodes[0].x - 100"
					:y1="nodes[0].y"
					:x2="nodes[0].x"
					:y2="nodes[0].y"
					stroke="#e8f2ff"
					stroke-width="2"
					marker-end="url(#arrow)"
				/>
				<path :d="arcPaths" fill="none" stroke="#e8f2ff" stroke-width="2" marker-end="url(#arrow)" />
				<circle
					v-for="(node, idx) in nodes"
					: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"
					:key="'line' + idx"
					:x1="node.x"
					:y1="node.y + 4"
					:x2="node.x"
					:y2="node.y + verticalLineLength"
					stroke="#1677ff"
					:stroke-width="verticalLineWidth"
				/>

				<foreignObject
					v-for="(node, idx) in nodes"
					:key="'fo-' + idx"
					:x="node.x + 15"
					:y="node.y + 5"
					:width="nodeGapX - 30"
					height="100"
					style="overflow: visible;"
				>
					<div class="node-content" xmlns="http://www.w3.org/1999/xhtml">
						<div class="date">{{ node.formattedDate }}</div>
						<el-tooltip
							effect="dark"
							:content="node.actionTitle"
							popper-class="common-prompt-popper"
							placement="top"
							:show-after="500"
						>
							<div class="title">{{ node.actionTitle }}</div>
						</el-tooltip>
						<div class="votes" v-if="node.voteString">{{ node.voteString }}</div>
					</div>
				</foreignObject>
				<text
					v-if="startMonth && nodes.length > 0"
					:x="nodes[0].x - 110"
					:y="nodes[0].y + 5"
					text-anchor="end"
					fill="rgb(5, 95, 194)"
					font-size="16"
					font-weight="700"
				>
					{{ startMonth }}
				</text>

				<line
					v-if="nodes.length > 0"
					:x1="nodes[nodes.length - 1].x"
					:y1="nodes[nodes.length - 1].y"
					:x2="nodes[nodes.length - 1].row % 2 === 0 ? nodes[nodes.length - 1].x + 100 : nodes[nodes.length - 1].x - 100"
					:y2="nodes[nodes.length - 1].y"
					stroke="#e8f2ff"
					stroke-width="2"
					marker-end="url(#arrow)"
				/>
				<text
					v-if="endMonth && nodes.length > 0"
					:x="nodes[nodes.length - 1].row % 2 === 0 ? nodes[nodes.length - 1].x + 110 : nodes[nodes.length - 1].x - 110"
					:y="nodes[nodes.length - 1].y + 5"
					:text-anchor="nodes[nodes.length - 1].row % 2 === 0 ? 'start' : 'end'"
					fill="rgb(5, 95, 194)"
					font-size="16"
					font-weight="700"
				>
					{{ endMonth }}
				</text>
			</svg>
		</div>
	</div>
</template>

<script>
export default {
	name: "SBillProgressTimeline",
	props: ["dataList"],
	data() {
		return {
			maxPerRow: 5,
			nodeGapX: 200,
			nodeGapY: 180,
			leftMargin: 150,
			verticalLineLength: 80,
			verticalLineWidth: 1
		};
	},
	computed: {
		startMonth() {
			if (this.sortedDataList.length === 0) return '';
			const date = new Date(this.sortedDataList[0].actionDate);
			return `${date.getFullYear()}年${date.getMonth() + 1}月`;
		},
		endMonth() {
			if (this.sortedDataList.length === 0) return '';
			const date = new Date(this.sortedDataList[this.sortedDataList.length - 1].actionDate);
			return `${date.getFullYear()}年${date.getMonth() + 1}月`;
		},
		sortedDataList() {
			if (!this.dataList || !Array.isArray(this.dataList)) return [];
			return [...this.dataList]
				.filter(item => item && item.actionDate)
				.sort((a, b) => new Date(a.actionDate) - new Date(b.actionDate));
		},
		nodes() {
			return this.sortedDataList.map((item, idx) => {
				const row = Math.floor(idx / this.maxPerRow);
				const col = idx % this.maxPerRow;
				let x, y;

				if (row % 2 === 0) {
					x = this.leftMargin + col * this.nodeGapX + 50;
				} else {
					x = this.leftMargin + (this.maxPerRow - 1 - col) * this.nodeGapX + 50;
				}
				y = 60 + row * this.nodeGapY;

				let formattedDate = "";
				if (item.actionDate) {
					const dateObj = new Date(item.actionDate);
					if (!isNaN(dateObj.getTime())) {
						formattedDate = `${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
					}
				}

				let voteString = "";
				if (item.agreeVote !== null && item.agreeVote !== undefined && item.disagreeVote !== null && item.disagreeVote !== undefined) {
					voteString = `${item.agreeVote}票赞成 : ${item.disagreeVote}票反对`;
				}

				return { ...item, x, y, row, formattedDate, voteString };
			});
		},
		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];
				const isTurnPoint = i % this.maxPerRow === 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.leftMargin + this.maxPerRow * this.nodeGapX + 50;
		},
		svgHeight() {
			const listLength = (this.dataList && Array.isArray(this.dataList)) ? this.dataList.length : 0;
			return Math.ceil(listLength / 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: 100%;
	
	.node-content {
		font-family: Microsoft YaHei, sans-serif;
		text-align: left;
		padding-left: 4px; 

		.date {
			color: rgb(5, 95, 194);
			font-weight: 700;
			font-size: 16px;
			line-height: 22px;
			margin-bottom: 0px; 
			margin-top: 6px;
		}

		.title {
			color: rgb(59, 65, 75);
			font-weight: 700;
			font-size: 16px;
			line-height: 22px;
			margin-bottom: 0px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            display: block;
		}

		.votes {
			color: rgb(95, 101, 108);
			font-size: 16px;
            font-weight: 400;
            line-height: 22px;
		}
	}
}
</style>

<style>
.common-prompt-popper.el-popper {
	padding: 8px 16px !important;
	border-radius: 10px !important;
	background-color: rgb(59, 65, 75) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-family: "Microsoft YaHei" !important;
	line-height: 30px !important;
	color: #fff !important;
	border: none !important;
	max-width: 600px;
}

.common-prompt-popper.el-popper .el-popper__arrow::before {
	background-color: rgb(59, 65, 75) !important;
	border-color: rgb(59, 65, 75) !important;
}
</style>
