<template>
	<div class="detail-wrap">
		<div class="left box">
			<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="left-main">
				<div class="left-main-item" v-for="(item, index) in curList" :key="index">
					<div class="line" v-if="index !== curList.length - 1"></div>
					<div class="time">{{ item.time }}</div>
					<div class="icon">
						<img src="@/assets/images/decree-org.png" alt="" />
					</div>
					<div class="info">
						<div class="header">
							<div class="title">{{ item.title }}</div>
							<div
								class="type"
								:class="{
									type1: item.type.status === 2,
									type2: item.type.status === 3,
									type3: item.type.status === 4
								}"
							>
								{{ item.type.name }}
							</div>
						</div>
						<div class="content">{{ item.content }}</div>
						<div class="tag-box">
							<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">{{ val }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="left-footer">
				<div class="info">
					{{ `共有153项动态` }}
				</div>
				<div class="page-box">
					<el-pagination background layout="prev, pager, next" :total="153" />
				</div>
			</div>
		</div>
		<div class="right box">
			<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="right-main">
				<div class="img-box">
					<img :src="basicInfo.image" alt="" />
				</div>
				<div class="info-box">
					<div class="info-item">
						<div class="info-item-left">{{ "成立时间：" }}</div>
						<div class="info-item-right">{{ basicInfo.shijian }}</div>
					</div>
					<div class="info-item">
						<div class="info-item-left">{{ "总部地址：" }}</div>
						<div class="info-item-right">{{ basicInfo.dizhi }}</div>
					</div>
					<div class="info-item">
						<div class="info-item-left">{{ "主要职责：" }}</div>
						<div class="info-item-right">{{ basicInfo.zhize }}</div>
					</div>
					<div class="info-item">
						<div class="info-item-left">{{ "下属机构：" }}</div>
						<div class="info-item-right">{{ basicInfo.xiashujigou }}</div>
					</div>
					<div class="info-item">
						<div class="info-item-left">{{ "制裁手段：" }}</div>
						<div class="info-item-right">{{ basicInfo.zhicaishouduan }}</div>
					</div>
				</div>
				<div class="user-box">
					<div class="user-header">
						{{ "关键人物：" }}
					</div>
					<div class="user-content">
						<div class="user-item" v-for="(item, index) in basicInfo.keyUser" :key="index">
							<div class="user-item-left">
								<img :src="item.img" alt="" />
							</div>
							<div class="user-item-right">
								<div class="name">{{ item.name }}</div>
								<div class="position">{{ item.position }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

import Img from "./assets/images/img.png";
import User1 from "./assets/images/user1.png";
import User2 from "./assets/images/user2.png";
import User3 from "./assets/images/user3.png";
import User4 from "./assets/images/user4.png";

const basicInfo = ref({
	image: Img,
	shijian: "1948年",
	dizhi: "华盛顿特区宪法大道1401号赫伯特·C·胡佛大楼 ",
	zhize: "国际贸易、进出口管制、经济数据统计及专利商标管理",
	xiashujigou: "工业与安全局、国际贸易管理局、专利商标局等",
	zhicaishouduan: "实体清单、军事最终用户清单、​​“301条款”关税、​​“232条款”关税、特别指定国民清单",
	keyUser: [
		{
			name: "霍华德·卢特尼克",
			img: User1,
			position: "部长"
		},
		{
			name: "保罗·达巴尔",
			img: User2,
			position: "副部长"
		},
		{
			name: "杰弗里·凯斯勒",
			img: User3,
			position: "工业与安全局局长"
		},
		{
			name: "约翰·斯奎尔斯",
			img: User4,
			position: "专利商标局局长"
		}
	]
});

const curList = ref([
	{
		title: "美国商务部：宣布对华全面加征100%关税",
		time: "2025 10月10日",
		content:
			"特朗普宣布自11月1日起对所有中国进口商品加征100%额外关税，叠加现有关税后总水平可达130%或更高。同时宣布将对“所有关键美国制造软件”实施严格的出口管制。",
		type: {
			name: "行政令",
			status: 2
		},
		tagList: ["人工智能"]
	},
	{
		title: "美国商务部：BIS更新“实体清单”",
		time: "2025 10月4日",
		content:
			"美国商务部工业与安全局公布对中国半导体出口管制措施新规则，将140家中国半导体公司列入“实体清单”，分别是136家中国实体和4家海外关联企业。",
		type: {
			name: "实体清单",
			status: 4
		},
		tagList: ["集成电路"]
	},
	{
		title: "美国商务部：​出台“50%穿透规则”（关联方规则）",
		time: "2025 9月29日",
		content:
			"规定凡被列入“实体清单”或“军事最终用户清单”的企业，其直接或间接持股超过50%的子公司将自动受到同等出口管制限制。此规则极大地扩大了制裁范围，且未设过渡期。",
		type: {
			name: "行政令",
			status: 2
		},
		tagList: ["生物科技"]
	},
	{
		title: "美国商务部：对华港口设备加征高额关税",
		time: "2025 9月21日",
		content:
			"美国贸易代表办公室（USTR）公告，作为“301条款”行动的一部分，对特定中国制造的港口设备加征额外关税，其中船到岸起重机（STS）和集装箱底盘车及零部件均加征100%关税，于11月9日生效。",
		type: {
			name: "301调查",
			status: 3
		},
		tagList: ["先进制造"]
	},
	{
		title: "美国商务部：BIS更新“实体清单”",
		time: "2025 9月15日",
		content:
			"美国商务部工业和安全局宣布更新《出口管理条例》（EAR），并发布两项最终规则，将25家中国企业及其相关实体列入实体清单。",
		type: {
			name: "实体清单",
			status: 4
		},
		tagList: ["集成电路"]
	},
	{
		title: "美国商务部：BIS更新“实体清单”",
		time: "2025 9月15日",
		content:
			"美国商务部工业和安全局宣布更新《出口管理条例》（EAR），并发布两项最终规则，将25家中国企业及其相关实体列入实体清单。",
		type: {
			name: "实体清单",
			status: 4
		},
		tagList: ["集成电路"]
	},
	{
		title: "美国商务部：加强对华AI芯片出口限制",
		time: "2025 9月10日",
		content:
			"美国政府要求英特尔、AMD、英伟达等公司对向中国出口的先进AI处理器实施严格的许可证制度。英特尔Gaudi系列芯片等因性能超标明确受限。同时，考虑对中国AI初创企业DeepSeek实施制裁。",
		type: {
			name: "行政令",
			status: 2
		},
		tagList: ["人工智能", "集成电路"]
	},
	{
		title: "美国商务部：BIS更新“实体清单”",
		time: "2025 9月15日",
		content:
			"美国商务部工业和安全局宣布更新《出口管理条例》（EAR），并发布两项最终规则，将25家中国企业及其相关实体列入实体清单。",
		type: {
			name: "实体清单",
			status: 4
		},
		tagList: ["集成电路"]
	},
	{
		title: "美国商务部：​发布针对中国网联汽车的禁令",
		time: "2025 8月25日",
		content: "美国商务部工业与安全局（BIS）发布一项最终规则，禁止涉及销售或进口其认定软件与中国有关联的联网汽车的交易。",
		type: {
			name: "行政令",
			status: 2
		},
		tagList: ["能源", "先进制造"]
	},
	{
		title: "美国商务部：考虑对中国无人机实施新限制",
		time: "2025 8月19日",
		content:
			"美国商务部表示正在考虑制定新规则，以限制或禁止中国无人机在美国境内使用，并就所谓“保护无人机供应链”的潜在规则征求公众意见。",
		type: {
			name: "行政令",
			status: 2
		},
		tagList: ["先进制造"]
	}
]);
</script>

<style lang="scss" scoped>
.detail-wrap {
	display: flex;
	gap: 16px;
	padding-bottom: 30px;
	.box {
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
	}
	.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: 1064px;
		height: 1683px;
		.left-main {
			border-top: 1px solid rgba(234, 236, 238, 1);
			height: 1551px;
			.left-main-item {
				display: flex;
				margin-top: 16px;
				gap: 18px;
				margin-left: 10px;
				height: 130px;
				position: relative;
				.line {
					background: #e6e7e8;
					width: 2px;
					height: 122px;
					position: absolute;
					top: 24px;
					left: 104px;
				}
				.time {
					width: 75px;
					color: rgba(5, 95, 194, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 1px;
					text-align: right;
				}
				.icon {
					width: 24px;
					height: 24px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.info {
					width: 900px;
					.header {
						height: 26px;
						display: flex;
						justify-content: space-between;
						.title {
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}
						.type {
							height: 28px;
							padding: 0 8px;
							border-radius: 20px;
							line-height: 28px;
						}
						.type1 {
							background: rgba(232, 189, 11, 0.1);
							color: rgba(232, 189, 11, 1);
						}
						.type2 {
							background: rgba(255, 149, 77, 0.1);
							color: rgba(255, 149, 77, 1);
						}
						.type3 {
							background: rgba(206, 79, 81, 0.1);
							color: rgba(206, 79, 81, 1);
						}
					}
					.content {
						margin-top: 8px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
					}
					.tag-box {
						margin-top: 9px;
						display: flex;
						gap: 8px;
						.tag {
							height: 28px;
							padding: 0 8px;
							line-height: 28px;
							border-radius: 4px;
							background: rgba(231, 243, 255, 1);
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
						}
					}
				}
			}
		}
		.left-footer {
			height: 75px;
			border-top: 1px solid rgba(234, 236, 238, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
		}
	}
	.right {
		width: 520px;
		height: 800px;
		.right-main {
			width: 469px;
			height: 728px;
			margin: 3px auto;
			.img-box {
				width: 469px;
				height: 240px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.info-box {
				margin-top: 14px;
				padding-bottom: 28px;
				border-bottom: 1px solid rgba(234, 236, 238, 1);
				.info-item {
					display: flex;
					margin-top: 12px;
					.info-item-left {
						width: 88px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 1px;
						text-align: left;
					}
					.info-item-right {
						width: 356px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
					}
				}
			}
			.user-box {
				padding-top: 19px;
				.user-header {
					height: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 1px;
					text-align: left;
				}
				.user-content {
          margin-top: 19px;
					display: flex;
					flex-wrap: wrap;
					gap: 16px 39px;
          justify-content: center;
					.user-item {
						width: 185px;
						height: 49px;
						display: flex;
						gap: 8px;
						.user-item-left {
							width: 48px;
							height: 48px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.user-item-right {
							.name {
								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;
							}
							.position {
								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;
							}
						}
					}
				}
			}
		}
	}
}
</style>