<template>
	<div class="wrapper">
		<div class="left">
			<div class="box1">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">基本信息</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-main">
					<div class="box1-item">
						<div class="box1-item-left">{{ "启动时间：" }}</div>
						<div class="box1-item-right">{{ "2025年4月17日" }}</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查对象：" }}</div>
						<div class="box1-item-right">
							{{ "中国" }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查机构：" }}</div>
						<div class="box1-item-right1">
							<div class="icon">
								<img src="./assets/images/icon1.png" alt="" />
							</div>
							<div class="text">{{ "美国贸易代表办公室 >" }}</div>
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查领域：" }}</div>
						<div class="box1-item-right2">
							<div
								class="tag"
								:class="{ tag1: tag.type === 1, tag2: tag.type === 2 }"
								v-for="(tag, index) in surveyAreaList"
								:key="index"
							>
								{{ tag.name }}
							</div>
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查状态：" }}</div>
						<div class="box1-item-right">
							{{ "启动调查、举行听证会及征询意见的通知 " }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "请愿方：" }}</div>
						<div class="box1-item-right">
							{{
								"联合钢铁、造纸与林业、橡胶、制造业、能源、相关工业与服务工人国际工会、AFL-CIO 联盟（“USW”）/ 国际机械师与航空航天工人协会（“IAM”）/ 国际锅炉工、铁船建造者、铁匠、锻造工及助手兄弟会，AFL-CIO/CLC（“IBB”）/ 国际电气工人兄弟会（“IBEW”）/ 海事贸易部，AFL-CIO（“MTD”）"
							}}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "依托政令：" }}</div>
						<div class="box1-item-right3">
							{{ "2025年2月4日总统政令《确保美国海事及造船业在世界保持主导地位》 >" }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查进展：" }}</div>
						<div class="box1-item-right4">
							<el-timeline style="max-width: 346px">
								<el-timeline-item
									v-for="(activity, index) in activities"
									:key="index"
									:type="activity.type"
									:color="activity.color"
									:size="activity.size"
									:hollow="activity.hollow"
									:timestamp="activity.timestamp"
								>
									<template #dot>
										<div class="custom-dot">
											<img src="./assets/images/dot-icon.png" width="10" height="10" />
										</div>
									</template>
									{{ activity.content }}
								</el-timeline-item>
							</el-timeline>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="box2">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">调查脉络</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box2-main">
					<div class="box2-main-item" v-for="(item, index) in box2List" :key="index">
						<div class="box2-main-item-header">
							<div class="icon">
								<img src="./assets/images/dot-icon.png" alt="" />
							</div>
							<div class="time">{{ item.time }}</div>
							<div class="title">{{ item.title }}</div>
							<div class="warning" v-if="item.warning">
								{{ item.warning }}
							</div>
							<div class="open">
								<img src="./assets/images/open.png" alt="" />
							</div>
						</div>
						<div class="box2-main-item-content">
							<div class="box2-main-item-content-item" v-for="(val, idx) in item.data" :key="idx">
								<div class="inner-header">{{ val.title + ":" }}</div>
								<div class="inner-content" v-if="val.content">{{ val.content }}</div>
								<div class="inner-list" v-if="val.dataList">
									<div class="inner-list-item" v-for="(vall, idxx) in val.dataList" :key="idxx">
										{{ idxx + 1 + "." }} <span style="font-weight: 700">{{ vall.content1 }}</span
										>{{ vall.content2 }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box3">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">相关事件</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box3-main">
					<div class="box3-main-item" v-for="(item, index) in relatedEvents" :key="index">
						<div class="item-left">
							<img :src="item.img" alt="" />
						</div>
						<div class="item-right">
							<div class="item-right-header">
								<div class="item-right-title">{{ item.title }}</div>
								<div class="item-right-tag" :class="{ tag1: item.tag.type === 1, tag2: item.tag.type === 2 }">
									{{ item.tag.name }}
								</div>
							</div>
							<div class="item-right-time">{{ item.time }}</div>
							<div class="item-right-content">{{ item.content }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted } from "vue";

import Img1 from "./assets/images/img1.png";
import Img2 from "./assets/images/img2.png";
import Img3 from "./assets/images/img3.png";
import Img4 from "./assets/images/img4.png";

const surveyAreaList = ref([
	{
		name: "先进制造",
		type: 1
	},
	{
		name: "海洋",
		type: 2
	}
]);

const activities = ref([
	{
		content: "递交请愿书",
		timestamp: "2025-02-18",
		size: "large",
		type: "primary"
	},
	{
		content: "启动调查",
		timestamp: "2025-03-21",
		size: "large",
		type: "primary"
	},
	{
		content: "调查报告递交",
		timestamp: "2025-08-14",
		size: "large",
		type: "primary"
	},
	{
		content: "根据第301条作出的决定通知：中国针对海事、物流和造船业谋求主导地位",
		timestamp: "2025-08-15",
		size: "large",
		type: "primary"
	},
	{
		content: "关于中国针对海事、物流和造船业谋求主导地位的第301条调查的拟议行动",
		timestamp: "2025-09-08",
		size: "large",
		type: "primary"
	}
]);

const box2List = ref([
	{
		title: "递交请愿书",
		time: "2025-02-18",
		data: [
			{
				title: "节点概况",
				content:
					"2024年3月12日，请愿方提交了一份关于中国为主导海事、物流和造船领域而采取的行动、政策和实践的301条款请愿书。该请愿书是根据经修订的《1974年贸易法》（《贸易法》）（19 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
			}
		]
	},
	{
		title: "启动调查",
		time: "2025-03-21",
		data: [
			{
				title: "节点概况",
				content:
					"根据《贸易法》第302(a)(2)条，美国贸易代表审查了请愿书中的指控，并在收到301委员会的建议后，决定就请愿书中提出的问题启动调查。根据《贸易法》第303(a)条，USTR请求与中国政府进行磋商。请愿者要求举行公开听证会。根据第302(a)(4)条，并经请愿者同意，301委员会将于2024年5月29日就此事举行公开听证会。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
			}
		]
	},
	{
		title: "调查报告递交",
		time: "2025-08-14"
	},
	{
		title: "根据第301条作出的决定通知：中国针对海事、物流和造船业谋求主导地位",
		time: "2025-08-15",
		warning: "决定通知",
		data: [
			{
				title: "节点概况",
				content:
					"美国贸易代表已裁定，中国针对海事、物流和造船业谋求主导地位的行为根据第301条是可诉的。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
			},
			{
				title: "行动裁定",
				content:
					"中国针对海事、物流和造船业谋求主导地位是不合理的，并且加重或限制了美国商业，因此根据《贸易法》第301(b)条是可采取行动的。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
			}
		]
	},
	{
		title: "关于中国针对海事、物流和造船业谋求主导地位的第301条调查的拟议行动",
		time: "2025-09-08",
		warning: "征求评论意见和公共听证会通知",
		data: [
			{
				title: "节点概况",
				content:
					"USTR就针对中国主导海事、物流和造船业的第301条调查可能采取的贸易行动征求书面评论。USTR还将就此拟议行动召开公共听证会并接受反驳评论。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
			},
			{
				title: "拟议行动",
				dataList: [
					{
						content1: "对中国海运运营商的服务费。",
						content2:
							"向中国船舶运营商收取其提供的国际海运服务费，费率可达 (a) 该运营商任何船舶每次进入美国港口最高1,000,000美元；或 (b) 按该船舶净吨位容量，每次进入美国港口最高每净吨1,000美元。(b)条是可采取行动的。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
					},
					{
						content1: "对中国建造的船舶分阶段收费。",
						content2:
							"此费用取以下两者中的较高者：(i) 基于船舶净吨位的费用，或 (ii) 基于每个集装箱的费用。如果一艘船在前往外国目的地之前进行多次美国入境，此费用将按每个轮班或美国港口航线的串次收取。费用在前180天设定为0美元，并在接下来的三年内逐步增加，如附录二所述。某些中国建造的船舶免于缴纳此费用，包括：注册在某些美国海事管理局计划（例如海事安全计划和油轮安全计划）中的特定船舶；空船或压载船舶；低于特定尺寸或载重阈值的船舶；从事近海航运的船舶（即从某些美国港口出发航程少于2000海里的航次）；某些美国公司拥有的船舶；以及某些专用出口船舶。如果船舶运营商订购并接收同等尺寸的美国建造船舶，其有资格获得最长三年的费用减免。"
					},
					{
						content1: "对外国车辆运输船船舶运营商分阶段收费。",
						content2:
							"此费用根据附录 III 规定的车辆同等单位（CEU）容量，对任何外国建造的车辆运输船征收。费用在前 180 天设定为 0 美元，此后将按进入的非美国建造船舶的每 CEU 容量设定为 150 美元。如果运营商在此期间订购并交付同等或更大容量的美国建造船舶，可获得最长三年的费用减免。如果船舶运营商订购并交付至少同等规模的美国建造船舶，将有资格获得三年的费用减免。"
					},
					{
						content1: "对某些海上运输的限制。",
						content2:
							"三年后，根据附件 IV 的规定，美国贸易代表署将实施一项限制，要求在海运运输一定比例的液化天然气出口时使用美国船只。"
					}
				]
			}
		]
	}
]);

const relatedEvents = ref([
	{
		img: Img1,
		title: "美国商务部工业与安全局发布实体清单，涉及多家中国半导体企业",
		time: "2025年9月12日",
		content:
			"23家中国实体，包括复旦微电旗下多家公司、华岭股份等，指控这些实体“违背美国国家安全或外交政策利益”，包括为中国的...",
		tag: {
			name: "行政令",
			type: 2
		}
	},
	{
		img: Img2,
		title: "美国白宫发布总统政令，提出将发展美国人工智能产业硬件支持放在新任期的科技首要地位",
		time: "2025年9月11日",
		content:
			"9个中国实体​（8家企业和1名个人），例如湖北奇卡工业有限公司、广州雅凯国际货运代理有限公司等，指控这些实体为也门胡塞...",
		tag: {
			name: "行政令",
			type: 2
		}
	},
	{
		img: Img3,
		title: "美国财政部外国资产控制办公室指控中国企业及船只",
		time: "2025年3月13日",
		content:
			"​4家中国企业和3艘关联船只​（如香港和顺运贸有限公司、华夏贸易有限公司等）,指控这些公司拥有或运营向中国运送伊朗石油或...",
		tag: {
			name: "行政令",
			type: 2
		}
	},
	{
		img: Img4,
		title: "美国国会通过《芯片科学》法案",
		time: "2025年1月3日",
		content:
			"​多家中国实体，包括成都雷电微力科技股份有限公司、中国科学院长春光学精密机械与物理研究所等，指控这些实体与中国高超音...",
		tag: {
			name: "法案",
			type: 1
		}
	}
]);
</script>

<style lang="scss" scoped>
.wrapper {
	width: 100%;
	// height: 1191px;
	padding: 0 160px;
	display: flex;
	.box-header {
		height: 56px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 20px;
			width: 8px;
			height: 16px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}
		.title {
			margin-left: 14px;
			margin-top: 16px;
			height: 24px;
			line-height: 24px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 18px;
			font-weight: 700;
		}
		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 52px;
			display: flex;
			.btn {
				margin-left: 8px;
				height: 28px;
				padding: 0 8px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 28px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				cursor: pointer;
			}
			.btnActive {
				border: 1px solid var(--color-main-active);
				background: rgba(246, 250, 255, 1);
				color: var(--color-main-active);
			}
		}
		.header-info {
			height: 22px;
			position: absolute;
			right: 84px;
			top: 17px;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 3px;
				width: 14px;
				height: 14px;
				margin-right: 8px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				height: 22px;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
			}
		}
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.left {
		width: 520px;
		.box1 {
			margin-top: 16px;
			width: 520px;
			// height: 837px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box1-main {
				margin-top: 6px;
				margin-left: 22px;
				.box1-item {
					display: flex;
					margin-bottom: 16px;
					.box1-item-left {
						width: 100px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						margin-top: 3px;
						margin-bottom: 3px;
					}
					.box1-item-right {
						width: 346px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
					}
					.box1-item-right1 {
						display: flex;
						gap: 6px;
						align-items: center;
						.icon {
							width: 20px;
							height: 20px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							height: 24px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}
					.box1-item-right2 {
						margin-top: 2px;
						height: 24px;
						display: flex;
						gap: 8px;
						.tag {
							height: 24px;
							padding: 0 8px;
							box-sizing: border-box;
							border-radius: 4px;
							text-align: center;
							line-height: 24px;
						}
						.tag1 {
							color: rgba(19, 168, 168, 1);
							border: 1px solid rgba(135, 232, 222, 1);
							background: rgba(230, 255, 251, 1);
						}
						.tag2 {
							color: rgba(22, 119, 255, 1);
							border: 1px solid rgba(145, 202, 255, 1);
							background: rgba(230, 244, 255, 1);
						}
					}
					.box1-item-right3 {
						width: 346px;
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
					}
					.box1-item-right4 {
						width: 346px;
					}
				}
			}
		}
	}
	.right {
		width: 1064px;
		margin-left: 16px;
		.box2 {
			margin-top: 16px;
			width: 1064px;
			// height: 410px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box2-main {
				width: 1024px;
				margin: 10px 20px;
				.box2-main-item {
					.box2-main-item-header {
						// height: 51px;
						padding: 10px 24px;
						box-sizing: border-box;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						background: rgba(247, 248, 249, 1);
						display: flex;
						gap: 16px;
						position: relative;
						.icon {
							margin-top: 8px;
							width: 10px;
							height: 10px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.time {
							margin-top: 4px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: justify;
						}
						.title {
							width: 535px;
							margin-top: 4px;
							// height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: justify;
						}
						.warning {
							position: absolute;
							height: 28px;
							border-radius: 20px;
							background: rgba(206, 79, 81, 0.1);
							line-height: 28px;
							top: 12px;
							right: 56px;
							color: rgba(206, 79, 81, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							letter-spacing: 0px;
							text-align: justify;
							padding: 0 8px;
						}
						.open {
							position: absolute;
							right: 24px;
							top: 10px;
							width: 16px;
							height: 31px;
							img {
								width: 100%;
								height: 100%;
							}
						}
					}
					.box2-main-item-content {
						.box2-main-item-content-item {
							.inner-header {
								height: 54px;
								box-sizing: border-box;
								border-bottom: 1px solid rgba(234, 236, 238, 1);
								padding: 12px 24px 12px 51px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
							}
							.inner-content {
								padding: 12px 24px 12px 51px;
								box-sizing: border-box;
								border-bottom: 1px solid rgba(234, 236, 238, 1);
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
							}
							.inner-list {
								.inner-list-item {
									padding: 12px 24px 12px 50px;
									box-sizing: border-box;
									border-bottom: 1px solid rgba(234, 236, 238, 1);
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 30px;
									letter-spacing: 0px;
									text-align: justify;
								}
							}
						}
					}
				}
			}
		}
		.box3 {
			margin-top: 16px;
			margin-bottom: 35px;
			width: 1064px;
			// height: 714px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			padding-bottom: 18px;
			.box3-main {
				width: 1014px;
				margin: 10px auto;
				.box3-main-item {
					width: 1014px;
					padding: 11px 0;
					display: flex;
          border-bottom: 1px solid rgba(234, 236, 238, 1);
					.item-left {
						width: 24px;
						height: 24px;
						margin-left: 26px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.item-right {
						margin-left: 15px;
						.item-right-header {
							width: 928px;
							display: flex;
							justify-content: space-between;
							.item-right-title {
								height: 24px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
							.item-right-tag {
								height: 28px;
								padding: 0px 8px;
								border-radius: 20px;
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
							.tag1 {
								color: var(--color-main-active);
								background: rgba(231, 243, 255, 1);
							}
							.tag2 {
								background: rgba(232, 189, 11, 0.1);
								color: rgba(232, 189, 11, 1);
							}
						}
						.item-right-time {
							margin-top: 4px;
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
						.item-right-content {
							width: 928px;
							height: 30px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
							letter-spacing: 0px;
							text-align: justify;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
						}
					}
				}
			}
		}
	}
}

:deep(.el-timeline-item) {
	padding-bottom: 8px;
}

:deep(.el-timeline) {
	padding-left: 2px;
}
</style>