<template>
	<div style="padding: 0 5%">
		<el-row :gutter="20">
			<el-col :span="13">
				<custom-container title="实体清单发布机构">
					<!-- 顶部右侧自定义内容 -->
					<template #header-right>
						<div style="display: flex; gap: 8px">
							<!-- <el-input placeholder="搜索项目..." clearable style="width: 200px">
								<template #prefix>
									<el-icon><Search /></el-icon>
								</template>
							</el-input> -->
							<el-button type="primary">涉华背景</el-button>
							<el-button>全部背景</el-button>
						</div>
					</template>

					<!-- 中间内容自定义 -->
					<template #default>
						<div class="content-card">
							<el-image class="content-img" :src="BISlogo" fit="fill" />
							<div class="content-desc">
								<div class="content-desc-item">
									<div class="content-desc-title">机构名称：</div>
									<div class="content-desc-content">美国商务部工业与安全局</div>
								</div>
								<div class="content-desc-item">
									<div class="content-desc-title">相关措施：</div>
									<div class="content-desc-content">出口管制条例（EAR）、实体清单、商业管制清单（CCL）、232调查等</div>
								</div>
								<div class="content-desc-item">
									<div class="content-desc-title">法案类别：</div>
									<div class="content-desc-content">公法（编号：Pub. L. No. 119-21）</div>
								</div>
								<div class="content-desc-item">
									<div class="content-desc-title">机构职责：</div>
									<div class="content-desc-content content-desc-content-long">
										美国商务部工业与安全局是美国商务部的一个部门，主要负责管理和监督美国的出口管制和安全问题。通过确保有效的出口管制和条约合规体系，促进美国保持战略技术领导地位，从而推动美国国家安全、外教政策及经济目标的实现。
									</div>
								</div>
							</div>
						</div>
					</template>
				</custom-container>

				<custom-container title="重点人物">
					<!-- 中间内容自定义 -->
					<template #default>
						<div style="display: flex; gap: 20px">
							<div class="renwu-card">
								<el-image class="content-img-2" :src="Renwu1" fit="fill" />
								<div class="content-desc">
									<div class="content-desc-title">吉娜·雷蒙多</div>
									<div class="content-desc-content content-desc-content-long">英文名：Gina Raimondo</div>
									<div class="content-desc-content content-desc-content-long">党派：美国民主党</div>
								</div>
							</div>
							<div class="renwu-card">
								<el-image class="content-img-2" :src="Renwu2" fit="fill" />
								<div class="content-desc">
									<div class="content-desc-title">艾伦·埃斯特韦斯</div>
									<div class="content-desc-content content-desc-content-long">英文名：Alan Estevez</div>
									<div class="content-desc-content content-desc-content-long">党派：美国民主党</div>
								</div>
							</div>
						</div>
					</template>
				</custom-container>

				<custom-container title="制裁原因">
					<!-- 中间内容自定义 -->
					<template #default>
						<div style="line-height: 25px; color: rgba(95, 101, 108, 1)">
							<div>1.获取美国产物项，以支持中国量子技术；</div>
							<div>2.支持2023年2月飞越美国上空的高空气球；</div>
							<div>3.获取获取美国原产的无人机物项供中国军方使用。</div>
						</div>
					</template>
				</custom-container>
			</el-col>
			<el-col :span="11">
				<custom-container title="本次制裁共新增83个实体，其中53个中国大陆实体、1个中国台湾实体。">
					<!-- 顶部右侧自定义内容 -->
					<!-- <template #header-right>
						<div style="display: flex; gap: 12px">
							<el-input placeholder="搜索项目..." clearable style="width: 200px">
								<template #prefix>
									<el-icon><Search /></el-icon>
								</template>
							</el-input>
							<el-button type="primary" icon="Plus">新建项目</el-button>
						</div>
					</template> -->

					<!-- 中间内容自定义 -->
					<template #default>
						<div class="content-vertical-card">
							<el-button-group>
								<el-button :icon="Document"> 整体情况</el-button>
								<el-button type="primary" :icon="Postcard">
									国内分布
									<!-- <el-icon class="el-icon--right"><ArrowRight /></el-icon> -->
								</el-button>
							</el-button-group>
							<el-image class="content-distribution-img" :src="Distribution" fit="fill" />
							<div style="flex: 1; justify-content: flex-start; width: 100%">
								<el-button-group>
									<el-button>按类别</el-button>
									<el-button type="primary">
										按领域
										<!-- <el-icon class="el-icon--right"><ArrowRight /></el-icon> -->
									</el-button>
								</el-button-group>
							</div>
						</div>
					</template>

					<!-- 底部自定义内容 -->
					<!-- <template #footer>
						<el-button>取消</el-button>
						<el-button type="primary">保存更改</el-button>
					</template> -->
				</custom-container>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<custom-container title="美国前序相关制裁、前序相关事件列表">
					<template #default>
						<!-- <div class="example-card">
							<h3>项目介绍</h3>
							<p>这是一个示例项目，展示了如何使用自定义容器组件。该组件具有高度可定制性，可以适应各种业务场景的需求。</p>
						</div>
	
						<div class="example-card">
							<h3>项目进度</h3>
							<p>当前项目已完成75%，预计在下个月初完成所有开发任务并进入测试阶段。</p>
							<el-progress :percentage="75" :stroke-width="16" />
						</div> -->
						<div class="time-line">
							<div class="time-line-title">
								<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
								<span class="time-line-title-text">2025-9-25</span>
							</div>
							<div class="time-line-desc">
								<div class="time-line-desc-title">传感器和仪器仪表技术咨询委员会将于2024年5月9日召开部分闭门会议</div>
								<div class="time-line-desc-text">
									传感器与仪器仪表技术咨询委员会(以下简称“委员会”)将于美国东部夏令时间2024年5月9日星期四下午1:00至2:30召开会议。本次会议将通过微软团队(MS
									Teams)以线上形式举行。根据美国商务部第10-16号《部门组织》文件。
								</div>
							</div>
						</div>

						<div class="time-line">
							<div class="time-line-title">
								<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
								<span class="time-line-title-text">2025-4-25</span>
							</div>
							<div class="time-line-desc">
								<div class="time-line-desc-title">中美关税战升级至125%与反制措施</div>
								<div class="time-line-desc-text">
									美国将对华关税从34%提升至84%（总税率104%），中方同步对美商品加征同等税率，并暂停进口美国影片、限制留学合作。特朗普政府通过"基准关税+对等关税+额外加征"策略施压，引发全球供应链震荡。
								</div>
							</div>
						</div>

						<div class="time-line">
							<div class="time-line-title">
								<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
								<span class="time-line-title-text">2025-4-17</span>
							</div>
							<div class="time-line-desc">
								<div class="time-line-desc-title">美国对华加征关税至20%并扩大科技制裁议</div>
								<div class="time-line-desc-text">
									美国以"芬太尼问题"为由提高对华关税至20%，恢复钢铁铝关税；同时推动《恢复贸易公平法案》，计划对中国商品征收100%关税。系统性打压中国高科技产业，关税措施实质为经济勒索。
								</div>
							</div>
						</div>
					</template>
				</custom-container>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import CustomContainer from "@/components/Container/index.vue";
import BISlogo from "@/assets/images/BISlogo.png";
import Distribution from "@/assets/images/distribution.png";
import Renwu1 from "@/assets/images/renwu-1.png";
import Renwu2 from "@/assets/images/renwu-2.png";
import { Document } from "@element-plus/icons-vue";
import { Postcard } from "@element-plus/icons-vue";
</script>

<style scoped>
.content-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.content-vertical-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.renwu-card {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 379px;
	height: 148px;
	background-color: rgba(234, 236, 238, 1);
	padding-left: 10px;
}
.content-img {
	width: 154px;
	height: 154px;
	flex-shrink: 0;
}
.content-img-2 {
	width: 128px;
	height: 128px;
	flex-shrink: 0;
}
.content-distribution-img {
	width: 627px;
	height: 536px;
}
.content-desc {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.content-desc-item {
	display: flex;
	gap: 4px;
}
.content-desc-title {
	width: 100px;
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 700;
	color: rgba(59, 65, 75, 1);
}
.content-desc-content {
	color: var(--color-main-active);
	font-size: 16px;
	font-weight: 700;
}
.content-desc-content-long {
	color: rgba(95, 101, 108, 1);
	font-weight: 400;
}
.time-line {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding-left: 10px;
	margin-bottom: 20px;
}
.time-line-title {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.time-line-dot {
	width: 10px;
	height: 10px;
}
.time-line-title-text {
	font-size: 14px;
	font-weight: 700;
	color: rgba(95, 101, 108, 1);
	color: var(--base-color);
}
.time-line-desc-title {
	font-size: 16px;
	font-weight: 400;
	color: var(--base-color);
	margin-bottom: 5px;
}
.time-line-desc-text {
	font-size: 14px;
	font-weight: 400;
	color: rgba(95, 101, 108, 1);
}
.time-line-dot {
	width: 8px;
	height: 8px;
	background-color: var(--color-main-active);
	border-radius: 50%;
}
.example-card {
	border: 1px solid #ebeef5;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 16px;
	background-color: #fafafa;
}

.example-card h3 {
	color: #409eff;
	margin-bottom: 8px;
}

.example-card p {
	color: #606266;
	line-height: 1.6;
}
</style>
