<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">{{ "250414-0065" }}</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查时间：" }}</div>
						<div class="box1-item-right">
							{{ "2021年9月21日" }}
						</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">
							{{ "注册专利号7745847、9093473、9147747、9184292" }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查背景：" }}</div>
						<div class="box1-item-right">
							{{
								"2025年3月1日，总统发布第14号行政命令，《应对木材、木料进口对国家安全的威胁》（90FR11359），指示商务部长根据《贸易发展法》第232条启动调查，已确定木材、木料及其衍生产品进口对国家安全的影响。2025年3月10日，部长启动了第232条调查。 "
							}}
						</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="box1-item-right1-item" v-for="(item, index) in reasonList" :key="index">
								{{ item }}
							</div>
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查结论：" }}</div>
						<div class="box1-item-right">
							{{ "目前钒进口的数量和情况并未对第232节所定义的国家安全构成损害威胁。" }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "增加关税：" }}</div>
						<div class="box1-item-right">{{ "是，增加15%" }}</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-line-box"></div>
					<div
						class="box2-item"
						:class="{ box2ItemFooter: index % 2 }"
						v-for="(item, index) in timeLineList"
						:key="index"
					>
						<div class="point" :class="{ pointFooter: index % 2 }">
							<img src="@/assets/images/dot.png" alt="" />
						</div>
						<div class="box2-item-header">
							<div class="title">{{ item.time }}</div>
						</div>
						<div class="box2-item-content">
							{{ item.content }}
						</div>
					</div>
					<div class="arrow-left">
						<img src="@/assets/icons/card-btn-left.png" alt="" />
					</div>
					<div class="arrow-right">
						<img src="@/assets/icons/card-btn-right.png" alt="" />
					</div>
				</div>
				<div class="box2-footer">
					<div class="box2-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box2-footer-center">
						{{
							`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
						}}
					</div>
					<div class="box2-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</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 surveyResult" :key="index">
						<div class="box3-main-item-header">
							<div class="header-left">{{ item.title }}</div>
							<div class="header-right">
								<div class="icon">
									<img src="./assets/images/open.png" alt="" />
								</div>
								<div class="text">{{ "跳转原文" }}</div>
							</div>
						</div>
						<div class="box3-main-item-content" v-for="(val, idx) in item.data" :key="idx">
							<div class="content-item">{{ idx + 1 + "." + val }}</div>
						</div>
					</div>
				</div>
				<div class="box3-footer">
					<div class="box3-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box3-footer-center">
						{{
							`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
						}}
					</div>
					<div class="box3-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted } from "vue";

const reasonList = ref([
	"1.EO 14017-应对木材、木料进口对国家安全的威胁；",
	"2.EO 12443-应对木材、木料进口对国家安全的威胁；",
	"3.EO 12443-应对木材、木料进口对国家安全的威胁；"
]);

const surveyResult = ref([
	{
		title: "（一）. 钒对美国国家安全至关重要",
		data: [
			"钒是关键矿产。美国内政部将钒列入2017年12月20日发布的第13817号行政命令要求制定的《2018年关键矿产清单》。根据该行政命令，该清单明确钒对美国国家安全至关重要，若钒供应中断，将对美国经济和国家安全造成重大影响。",
			"钒因其在钢铁和钛合金中的应用，是国防系统的必需物资。在航空航天用钛关键应用中，钒具有不可替代性，许多军用机身含有大量钒。",
			"钒是关键基础设施的必需物资。钒钢合金是建筑业用高强度低合金（HSLA）钢产品的关键成分，也用于工具钢和高速钢，广泛应用于美国关键基础设施。此外，几乎所有含钒钛产品均用于关键交通或国防领域。",
			"钒产业对美国国家安全相关的其他关键产业具有重大影响。如前所述，钒在钢铁和钛产品中具有不可或缺的用途，且美国的钒资源往往与铀资源共生。商务部近期发现，这三个产业的进口产品均对美国国家安全构成潜在损害威胁。"
		]
	},
	{
		title: "（二）. 钒进口对美国钒产业经济福利的影响具有两面性",
		data: [
			"美国目前依赖钒进口。美国唯一的原生钒生产商因钒价格低迷，过去五年中仅一年有生产活动；国内二次生产商需进口大量原料。",
			"国对钒进口的依赖并未加剧。尽管美国依赖进口满足民用需求，但美国主要钒铁和五氧化二钒生产商正在扩大或重启运营。随着这些举措的顺利完成，2021年美国利用含钒废料生产钒铁的产能预计将翻倍，格拉迪尼公司二次生产设施重启后，美国五氧化二钒产能也将显著提升。此外，多家国内采矿企业拥有闲置产能或正在勘探钒矿开发项目，若国内钒价格上涨或出现国家安全紧急情况，这些企业可能通过新建矿山等方式增加产能。",
			"受国内价格持续低迷影响，美国钒产业可能面临重大财务挑战。但由于近期设施所有权变动、大量持续投资以及运营活动的阶段性缺失，难以准确评估该产业的财务健康状况。",
			"美国拥有丰富的原生生产资源。至少有三家企业曾有钒矿生产历史，另有两个项目正在开发中。",
			"钒的二次生产具有环境效益。二次生产所用含钒废料被美国环境保护局（EPA）归类为危险废物，但二次生产能够回收关键矿产，大幅减少废料填埋量，将其用于国防关键产品生产。"
		]
	}
]);

const timeLineList = ref([
	{
		time: "2021年6月",
		content: "白宫报告《构建有韧性的供应链、重振美国制造业并促进广泛增长：依据第 14017 号行政令开展的百日审查》。"
	},
	{
		time: "2021年9月21日",
		content: "商务部长吉娜・雷蒙多启动了关于钕铁硼磁体进口对国家安全影响的 232 调查。"
	},
	{
		time: "2021 年 9 月 27 日",
		content: "商务部在《联邦公报》发布通知，宣布启动关于钕铁硼磁体进口对国家安全影响的调查。"
	},
	{
		time: "2022 年 1 月 31 日",
		content: "商务部向 60 家企业发放了调查。"
	}
]);
</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 {
						.box1-item-right1-item {
							width: 346px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
						}
					}
				}
			}
		}
	}
	.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 {
				margin: 0 auto;
				margin-top: 10px;
				height: 250px;
				// width: 1054px;
				// overflow-x: auto;
				// overflow-y: hidden;
				display: flex;
				justify-content: center;
				position: relative;
				padding-left: 120px;
				.box2-line-box {
					position: absolute;
					left: 0;
					top: 114px;
					height: 8px;
					width: 100%;
					background: url("@/assets/icons/line-bg.png") repeat;
				}
				.box2-item {
					width: 320px;
					height: 120px;
					// background: pink;
					position: relative;
					box-sizing: border-box;
					padding-left: 13px;
					border-left: 1px solid #0a57a6;
					margin-left: -100px;
					.box2-item-header {
						display: flex;
						width: 240px;
						.title {
							color: var(--color-main-active);
							height: 26px;
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
						}
					}
					.box2-item-content {
						width: 300px;
						min-height: 48px;
						max-height: 96px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						overflow: hidden;
					}
					.point {
						position: absolute;
						left: -8px;
						bottom: -7px;
						width: 15px;
						height: 15px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.pointFooter {
						position: absolute;
						left: -8px;
						top: -7px;
						width: 15px;
						height: 15px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.time {
						height: 24px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						position: absolute;
						bottom: -36px;
						left: 0;
					}
				}
				.box2ItemFooter {
					margin-top: 118px;
					margin-left: -120px;
					box-sizing: border-box;
					padding-top: 20px;
				}
				.arrow-left {
					width: 24px;
					height: 48px;
					position: absolute;
					left: 0;
					top: 95px;
					cursor: pointer;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.arrow-right {
					width: 24px;
					height: 48px;
					position: absolute;
					right: 0;
					top: 95px;
					cursor: pointer;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
			.box2-footer {
				margin: 24px auto 0;
				width: 1032px;
				height: 64px;
				box-sizing: border-box;
				border: 1px solid rgba(231, 243, 255, 1);
				border-radius: 4px;
				background: rgba(246, 250, 255, 1);
				display: flex;
				align-items: center;
				gap: 13px;
				padding: 0 12px;
				.box2-footer-left {
					width: 19px;
					height: 20px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.box2-footer-center {
					width: 939px;
					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;
				}
				.box2-footer-right {
					width: 24px;
					height: 24px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.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: 1016px;
				// height: 550px;
				margin: 0 auto;
				overflow: hidden;
				overflow-y: auto;
				.box3-main-item {
					.box3-main-item-header {
						width: 1016px;
						height: 48px;
						box-sizing: border-box;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						border-top: 1px solid rgba(234, 236, 238, 1);
						background: rgba(247, 248, 249, 1);
						display: flex;
						justify-content: space-between;
						align-items: center;
						.header-left {
							margin-left: 12px;
							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;
						}
						.header-right {
							display: flex;
							margin-right: 22px;
							gap: 5px;
							.icon {
								width: 16px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								height: 14px;
								color: rgba(5, 95, 194, 1);
								font-family: Microsoft YaHei;
								font-size: 12px;
								font-weight: 400;
								line-height: 14px;
								letter-spacing: 0px;
								text-align: justify;
							}
						}
					}
					.box3-main-item-content {
						.content-item {
							width: 1014px;
							padding: 12px 23px 12px 44px;
							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;
							border-bottom: 1px solid rgba(234, 236, 238, 1);
						}
					}
				}
			}
			.box3-footer {
				margin: 24px auto 0;
				width: 1032px;
				height: 64px;
				box-sizing: border-box;
				border: 1px solid rgba(231, 243, 255, 1);
				border-radius: 4px;
				background: rgba(246, 250, 255, 1);
				display: flex;
				align-items: center;
				gap: 13px;
				padding: 0 12px;
				.box3-footer-left {
					width: 19px;
					height: 20px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.box3-footer-center {
					width: 939px;
					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;
				}
				.box3-footer-right {
					width: 24px;
					height: 24px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>