<template>
	<el-row :gutter="20">
		<el-col :span="16">
			<custom-container title="实体清单发布机构" height="414px">
				<!-- 顶部右侧自定义内容 -->
				<!-- <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="DecreeInfoImg" fit="fill" />
						<div class="content-desc" style="gap: 20px">
							<div class="content-desc-item">
								<div class="content-desc-title">政令全称：</div>
								<div class="content-desc-content">
									Further Modifying Reciprocal Tariff Rates to Reflect Ongoing Discussions with the People’s Republic of China
								</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> -->
								<el-tag type="primary">人工智能</el-tag>
								<el-tag type="primary">出口管制</el-tag>
								<el-tag type="primary">半导体</el-tag>
								<el-tag type="primary">关税</el-tag>
								<el-tag type="primary">光伏产业</el-tag>
							</div>
							<div class="content-desc-item">
								<div class="content-desc-title">签署时间：</div>
								<div class="content-desc-content">2025年7月23日</div>
							</div>
							<div class="content-desc-item">
								<div class="content-desc-title">签署总统：</div>
								<div class="content-desc-content">唐纳德·约翰·特朗普(Donald John Trump)</div>
							</div>
							<div class="content-desc-item">
								<div class="content-desc-title">证明编号：</div>
								<div class="content-desc-content content-desc-content-long">第14320号行政命令 (EO 14320)</div>
							</div>
							<div class="content-desc-item">
								<div class="content-desc-title">执行期限：</div>
								<div class="content-desc-content content-desc-content-long">签署后90天内建立机制并开始实施</div>
							</div>
						</div>
					</div>
				</template>
			</custom-container>

			<custom-container title="主要指令" height="415px">
				<!-- 中间内容自定义 -->
				<template #default>
					<div class="content-vertical-card content-vertical-card-flex-start">
						<div class="content-box">
							<div class="content-box-content" v-for="(item, index) in mainInstructions" :key="index">
								<span class="content-num">{{ index + 1 }}</span>
								<span class="content-desc">{{ item }}</span>
							</div>
						</div>
						<div class="content-box-footer">
							<div>共5条指令</div>
							<el-pagination size="small" background layout="prev, pager, next" :total="10" page-size="5" />
						</div>
					</div>
				</template>
			</custom-container>
		</el-col>
		<el-col :span="8">
			<custom-container title="执行机构" height="845px">
				<!-- 中间内容自定义 -->
				<template #default>
					<div class="content-vertical-card content-vertical-card-flex-start">
						<el-space>
							<el-button plain type="primary">商务部</el-button>
							<el-button>国务院</el-button>
							<el-button>科技政策办公室</el-button>
							<el-button>国防部</el-button>
						</el-space>
						<div
							style="
								display: flex;
								justify-content: space-between;
								margin-top: 10px;
								padding-bottom: 10px;
								gap: 5px;
								border-bottom: 1px solid rgba(234, 236, 238, 1);
							"
						>
							<el-image class="content-img-small" :src="DecreeOrg" fit="fill" />
							<div class="content-desc">
								<div class="content-desc-item">
									<div class="content-desc-content">美国商务部</div>
									<!-- <div class="content-desc-content">
										Further Modifying Reciprocal Tariff Rates to Reflect Ongoing Discussions with the People’s Republic of China
									</div> -->
								</div>
								<div class="content-desc-item">
									<div class="content-desc-content-long">英文名：</div>
									<div class="content-desc-content-long">United States Department of Commerce</div>
								</div>
								<div class="content-desc-item">
									<div class="content-desc-content-long">成立时间：</div>
									<div class="content-desc-content-long">1903年2月14日</div>
								</div>
								<div class="content-desc-item">
									<div class="content-desc-content-long">主要职责：</div>
									<div class="content-desc-content-long">国际贸易、进出口管制（R-TX-19）</div>
								</div>
								<div class="content-desc-item">
									<div class="content-desc-content-long">总部地址：</div>
									<div class="content-desc-content-long">华盛顿宪法大道1401号胡佛大楼</div>
								</div>
								<div class="content-desc-item">
									<div class="content-desc-content-long">部长：</div>
									<div class="content-desc-content content-desc-content-long">霍华德·卢特尼克</div>
								</div>
								<div class="content-desc-item">
									<div class="content-desc-content-long">执行期限：</div>
									<div class="content-desc-content content-desc-content-long">签署后90天内建立机制并开始实施</div>
								</div>
							</div>
						</div>

						<div class="content-time-line-box">
							<div class="content-time-line-title">
								<img class="time-line-img" src="@/assets/images/decree-date.png" alt="" />
								<span class="time-line-title-text">机构动态</span>
							</div>

							<el-timeline style="max-width: 600px">
								<el-timeline-item
									placement="top"
									v-for="(activity, index) in activities"
									:key="index"
									:icon="activity.icon"
									:type="activity.type"
									:color="activity.color"
									:size="activity.size"
									:hollow="activity.hollow"
									:timestamp="activity.timestamp"
								>
									{{ activity.content }}
								</el-timeline-item>
							</el-timeline>
						</div>
						<div class="content-card-footer">
							<el-button type="primary" link>
								查看更多 <img class="icon-mark" src="@/assets/images/icon-double-down.png" alt="" />
							</el-button>
						</div>
					</div>
				</template>

				<!-- 底部自定义内容 -->
				<!-- <template #footer>
					<el-button>取消</el-button>
					<el-button type="primary">保存更改</el-button>
				</template> -->
			</custom-container>
		</el-col>
	</el-row>
</template>

<script setup>
import CustomContainer from "@/components/Container/index.vue";
import DecreeInfoImg from "@/assets/images/decree-info.png";
import DecreeOrg from "@/assets/images/decree-org.png";

// 主要指令数据
const mainInstructions = [
	"获取美国产物项，以支持中国量子技术；",
	"支持2023年2月飞越美国上空的高空气球；",
	"获取美国原产的无人机物项供中国军方使用。",
	"限制中国对美国商品的进口。",
	"限制中国对美国商品的出口。"
];

// 机构动态
const activities = [
	{
		content: `推动《州责任联邦部署成本法案》,要求拒执行联邦移民法的州政府
支付相关军事部署费用,强化财政约束。`,
		timestamp: "20258-07-31",
		size: "large",
		type: "primary",
		hollow: true
	},
	{
		content: `借OBBBA通过势头,在得州巩固军工、能源集团支持,为2026年连任
铺路,同时协调党内资源争夺关键摇摆选区。`,
		timestamp: "2025-07-30",
		type: "primary",
		hollow: true
	},
	{
		content: `众议院预算委员会主席乔迪·阿灵顿(得克萨斯州共和党人)周四上午在辩论时将此法案形容为“美国历史上最大的减税措施”。`,
		timestamp: "2025-07-30",
		type: "primary",
		hollow: true
	},
	{
		content: "特朗普力挺阿灵顿,白宫声明强调法案“美丽且必要”,双方矛盾凸显共和党内 商业资本与传统能源势力裂痕。",
		timestamp: "2025-07-27",
		type: "primary",
		hollow: true
	}
];
</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;
}
.content-vertical-card-flex-start {
	align-items: flex-start;
}
.content-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}
.content-box-content {
	width: 95%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(234, 236, 238, 1);
	padding: 5px 10px;
	height: 48px;
	box-sizing: border-box;
}
.content-box-footer {
	width: 95%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content-num {
	width: 24px;
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	font-weight: 400;
	border-radius: 50%;
	background-color: rgba(231, 243, 255, 1);
	color: rgba(10, 87, 166, 1);
}
.content-box-footer {
	display: flex;
	justify-content: space-between;
}
.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: 235px;
	height: 332px;
	flex-shrink: 0;
}
.content-img-small {
	width: 140px;
	height: 140px;
	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: rgba(10, 87, 166, 1);
	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: rgba(10, 87, 166, 1);
	border-radius: 50%;
}
.content-time-line-box {
	margin-bottom: 10px;
}
.content-time-line-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 20px;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
.time-line-img {
	width: 16px;
	height: 16px;
}
.time-line-title-text {
	font-size: 14px;
	font-weight: 700;
	color: rgba(95, 101, 108, 1);
}
.icon-mark {
	height: 12px;
	width: 12px;
	margin-right: 5px;
	margin-left: 8px;
}
.content-card-footer {
	display: flex;
	width: 100%;
	justify-content: center;
	/* margin-top: 30px; */
}
</style>
