<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-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>
			</div>
			<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-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box2-main">
					<div class="box2-item" v-for="(item, index) in box2Data" :key="index">
						<div class="box2-item-left">
							<img src="./assets/images/box2-icon.png" alt="" />
						</div>
						<div class="box2-item-right">
							<div class="time">{{ item.time }}</div>
							<div class="content">{{ item.content }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="box3">
				<div class="box-header">
					<div class="btn-box">
						<div
							class="btn"
							:class="{ btnActive: box3BtnActive === item }"
							v-for="(item, index) in box3BtnList"
							:key="index"
							@click="handleClickBox3Btn(item)"
						>
							{{ item }}
						</div>
					</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box3-main">
					<div class="box3-main1" v-if="box3BtnActive === '事件脉络'">
						<div class="box3-main1-item" v-for="(item, index) in box3Data1" :key="index">
							<div class="left">
								<div class="point">
									<img src="./assets/images/dot-active-icon.png" alt="" />
								</div>
								<div class="line" v-if="index !== box3Data1.length - 1"></div>
							</div>
							<div class="right">
								<div class="header">
									<div class="time">{{ item.time }}</div>
									<div class="title">{{ item.title }}</div>
								</div>
								<div class="content">{{ item.content }}</div>
							</div>
						</div>
					</div>
					<div class="box3-main2" v-else>
						<div class="box3-main2-item" v-for="(item, index) in box3Data2" :key="index">
							<div class="box3-main2-item-header">
								<div class="title">{{ item.title }}</div>
								<div class="more">
									<div class="icon">
										<img src="./assets/images/open-active.png" alt="" />
									</div>
									<div class="text">
										{{ "跳转原文" }}
									</div>
								</div>
							</div>
							<div class="box3-main2-item-content">
								<div class="item" v-for="(val, idx) in item.data" :key="idx">
									{{ idx+1 + "." + val.content }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box4">
				<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-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box4-main">
					<div class="box4-main-item" v-for="(item, index) in box4Data" :key="index">
						<div class="item-left">
							<div class="item-left-tag" :class="{ tag1: item.tag.type === 1, tag2: item.tag.type === 2 }">
								{{ item.tag.name }}
							</div>
						</div>
						<div class="item-right">
							<div class="item-right-header">
								<div class="item-right-title">{{ item.title }}</div>
								<div class="item-right-time">
									{{ item.time }}
								</div>
							</div>
							<div class="item-right-content">{{ item.content }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted } from "vue";

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

const box2Data = ref([
	{
		time: "2025-02-20",
		content: "美国贸易代表征求公众意见，针对中国针对海事、物流和造船业主导地位的调查第301条拟议行动"
	},
	{
		time: "2025-02-20",
		content: "美国贸易代表征求公众意见，针对中国针对海事、物流和造船业主导地位的调查第301条拟议行动"
	},
	{
		time: "2025-02-20",
		content: "美国贸易代表征求公众意见，针对中国针对海事、物流和造船业主导地位的调查第301条拟议行动"
	}
]);

const box3BtnList = ref(["事件脉络", "报复性措施"]);
const box3BtnActive = ref("事件脉络");

const handleClickBox3Btn = btn => {
	box3BtnActive.value = btn;
};

const box3Data1 = ref([
	{
		time: "2024-03-12",
		title: "递交请愿书",
		content: "2024年3月12日，请愿人提交了一份关于中国在海事、物流和造船领域主导行为、政策和做法的301条请愿书。"
	},
	{
		time: "2024-03-12",
		title: "递交请愿书",
		content: ""
	},
	{
		time: "2024-03-12",
		title: "递交请愿书",
		content:
			"2024年4月17日，在与相关咨询委员会和第301条委员会协商后，美国贸易代表启动了对中国在海事、物流和造船行业中追求主导地位的行为、政策和做法的调查。"
	},
	{
		time: "2024-03-12",
		title: "递交请愿书",
		content: "2024年3月12日，请愿人提交了一份关于中国在海事、物流和造船领域主导行为、政策和做法的301条请愿书。"
	},
	{
		time: "2024-03-12",
		title: "递交请愿书",
		content: "2024年3月12日，请愿人提交了一份关于中国在海事、物流和造船领域主导行为、政策和做法的301条请愿书。"
	},
	{
		time: "2024-03-12",
		title: "递交请愿书",
		content: "2024年3月12日，请愿人提交了一份关于中国在海事、物流和造船领域主导行为、政策和做法的301条请愿书。"
	},
	{
		time: "2024-03-12",
		title: "递交请愿书",
		content: "2024年3月12日，请愿人提交了一份关于中国在海事、物流和造船领域主导行为、政策和做法的301条请愿书。"
	}
]);

const box3Data2 = ref([
	{
		title: "（一）海运服务费用",
		data: [
			{
				content: `对中国船舶运营商和船舶所有者分阶段征收费用。该费用根据船舶的净吨位计算，适用于任何由中国运营商运营或由中国实体拥有的船舶，如附录 I 所示。如果一艘船舶在前往外国目的地之前多次进入美国港口，则该费用按每次轮次或美国港口航行序列征收。费用在前180天为零，随后设定为每净吨50美元，并在接下来的三年内逐步增加。`
			},
			{
				content: `分阶段对中国建造船舶收取费用。此费用以以下两者中的较高者为基准：(i) 基于船舶净吨位的费用，或 (ii) 基于每个集装箱的费用。如果一艘船在前往外国目的地之前多次进入美国港口，该费用按每次航行轮次或美国港口访问串次收取。费用在前180天设定为0美元，随后在接下来的三年内按附录二所述逐步增加。某些中国建造的船舶不适用此费用，包括：注册于某些美国海事管理局计划（例如海上安全计划和油轮安全计划）的船舶；空载或吃水浅位到港的船舶；低于某些规模或载重阈值的船舶；从事近海运输（即从某些美国港口出发航程少于2,000海里的航程）的船舶；某些美国所有公司拥有的船舶；以及某些专用出口船舶。如果船舶运营商订购并接收等同规模的美国建造船舶，其有资格获得最长三年的费用减免。`
			},
			{
				content: `对外国车辆运输船船舶运营商分阶段收取费用。根据附件三规定，该费用根据任何外国建造的车辆运输船的车等效单位（CEU）容量进行评估。费用在前180天设定为0美元，随后按进入的非美国建造船舶的CEU容量每单位收取150美元。如果运营商在此期间订购并接收等同或更大容量的美国建造船舶，其费用可以获得最多三年的减免。如果船舶运营商订购并接收至少同等尺寸的美国建造船舶，则有资格获得三年的费用减免。`
			}
		]
	},
	{
		title: "（二）关于促进美国货物在美国船舶上运输的服务限制",
		data: [
			{
				content: `对某些海上运输的限制。三年后，USTR 将实施限制，要求在海上运输一定比例的 LNG 出口时使用美国船舶，如附录 IV 所述。运营商或其不符合要求的 LNG 船舶可以在三年内获准运营，仿佛已满足该要求，前提是该运营商在此期间订购并接收一艘同等或更大容量的美国建造 LNG 船舶。USTR 将根据需要与美国能源部及其他机构协商，以提供有关该限制的通知和进一步的技术信息。`
			}
		]
	},
	{
		title: "（三）总统在第14269号行政命令《恢复美国海上主导地位》中指示的行动",
		data: [
			{
				content: `根据总统在第14269号行政命令《恢复美国海上主导地位》中提出的指示，美国贸易代表正在提议对STS起重机征收额外关税，这一做法与行政命令中的描述一致，同时还对来自中国的集装箱和某些底盘征收关税，这符合第14269号行政命令关于其他中国货物处理设备的指示，涵盖税则编号和子目8609.00.00、8716.39.0090、8716.90.30和8716.90.50。`
			}
		]
	}
]);

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

<style lang="scss" scoped>
.wrapper {
	width: 100%;
	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;
		}
		.btn-box {
			position: absolute;
			top: 17px;
			left: 36px;
			display: flex;
			gap: 20px;
			height: 26px;
			.btn {
				height: 26px;
				padding: 0 8px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-style: Regular;
				font-size: 18px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: left;
				cursor: pointer;
			}
			.btnActive {
				color: var(--color-main-active);
				border: 1px solid var(--color-main-active);
				font-weight: bold;
				background: rgba(231, 243, 255, 1);
			}
		}
		.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;
		margin-bottom: 20px;
		.box1 {
			margin-top: 16px;
			width: 520px;
			height: 561px;
			border-radius: 10px;
			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;
					}
				}
			}
		}
		.box2 {
			width: 520px;
			height: 815px;
			margin-top: 16px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box2-main {
				height: 749px;
				border-top: 1px solid rgba(234, 236, 238, 1);
				.box2-item {
					width: 483px;
					height: 108px;
					margin: 0 auto;
					display: flex;
					gap: 16px;
					padding: 12px 8px 8px 8px;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					.box2-item-left {
						margin-top: 4px;
						width: 15px;
						height: 15px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.box2-item-right {
						.time {
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-style: Bold;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}
						.content {
							width: 435px;
							height: 60px;
							margin-top: 4px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-style: Regular;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}
				}
			}
		}
	}
	.right {
		width: 1064px;
		margin-left: 16px;
		.box3 {
			margin-top: 16px;
			width: 1064px;
			// height: 410px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box3-main {
				margin-top: 8px;
				margin: 10px 0;
				border-top: 1px solid rgba(234, 236, 238, 1);
				padding: 15px 20px;
				.box3-main1 {
					.box3-main1-item {
						// height: 140px;
						display: flex;

						.left {
							width: 10px;
							.point {
								width: 10px;
								height: 10px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.line {
								width: 2px;
								height: 100%;
								margin-left: 4px;
								background: #e6e7e8;
							}
						}
						.right {
							margin-left: 17px;
							.header {
								height: 24px;
								display: flex;
								gap: 16px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-style: Bold;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: justify;
							}
							.content {
								border-top: 1px solid #eaecee;
								margin-top: 10px;
								margin-bottom: 36px;
								padding: 10px 0;
								width: 971px;
								max-height: 60px;
								min-height: 0;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
							}
						}
					}
				}
				.box3-main2 {
					.box3-main2-item {
						margin-top: 16px;
						.box3-main2-item-header {
							width: 1020px;
							height: 48px;
							box-sizing: border-box;
							border-bottom: 1px solid rgba(234, 236, 238, 1);
							border-top: 1dpx solid rgba(234, 236, 238, 1);
							background: rgba(247, 248, 249, 1);
							display: flex;
							justify-content: space-between;
							align-items: center;
							.title {
								margin-left: 12px;
								height: 24px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Bold;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: justify;
							}
							.more {
								margin-right: 22px;
								height: 14px;
								display: flex;
								justify-content: flex-end;
								align-items: center;
								gap: 7px;
								.icon {
									width: 12px;
									height: 12px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.text {
									color: rgba(5, 95, 194, 1);
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 12px;
									font-weight: 400;
									line-height: 14px;
									letter-spacing: 0px;
									text-align: justify;
								}
							}
						}
						.box3-main2-item-content {
							.item {
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
								padding: 12px 23px 12px 44px;
								border-bottom: 1px solid rgba(234, 236, 238, 1);
							}
						}
					}
				}
			}
		}
		.box4 {
			margin-top: 16px;
			margin-bottom: 35px;
			width: 1064px;
			// height: 714px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			padding-bottom: 18px;
			.box4-main {
				width: 1014px;
				margin: 10px auto;
				.box4-main-item {
					width: 1014px;
					padding: 11px 0;
					display: flex;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					.item-left {
						width: 90px;
						display: flex;
						.item-left-tag {
							width: 80px;
							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: center;
							padding: 0 8px;
						}
						.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 {
						width: 924px;
						.item-right-header {
							width: 924px;
							display: flex;
							justify-content: space-between;
							.item-right-title {
								width: 800px;
								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-time {
								width: 124px;
								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 {
							margin-top: 4px;
							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>