<template>
	<div class="historical-proposal">
		<div class="nav">
			<el-input placeholder="搜索关键词" v-model="searchText" :suffix-icon="Search" class="search-input"></el-input>
			<div class="select-box">
				<el-select v-model="value1" placeholder="请选择" class="select">
					<el-option label="全部法案" value="全部法案"></el-option>
				</el-select>
				<el-select v-model="value2" placeholder="请选择" class="select">
					<el-option label="全部领域" value="全部领域"></el-option>
				</el-select>
			</div>
		</div>
		<div class="main">
			<div v-for="item in bestList" :key="item.id" class="item">
				<!-- <div class="img-box">
					<img :src="item.img" alt="" class="img" />
					<div class="info">
						<div class="title">{{ item.title }}</div>
						<div>
							<span
								v-for="(tag, index) in item.tie"
								:key="tag"
								class="tag"
								:class="{ 'tag-1': index == 0, 'tag-2': index == 1 }"
								>{{ tag }}</span
							>
						</div>
					</div>
				</div>
				<div class="info-box">
					<div class="box">
						<div class="label">法案描述：</div>
						<div class="content">{{ item.disc }}</div>
					</div>

					<div class="box">
						<div class="label">法案状态：</div>
						<div class="content">{{ item.state }}</div>
					</div>

					<div class="box">
						<div class="label">提案日期：</div>
						<div class="content">{{ item.time }}</div>
					</div>
				</div> -->
				<img :src="item.img" alt="" class="img" />
				<div class="title">{{ item.title }}</div>
				<div class="content">{{ item.content }}</div>
				<div class="tag-box">
					<span
						v-for="(tag, index) in item.tie"
						:key="tag"
						class="tag"
						:class="{'tag-1': tag == '国际关系', 'tag-2': tag == '地缘政治', 'tag-3': tag == '中美关系', 'tag-4': tag == '国家安全'}"
						>{{ tag }}</span
					>
				</div>
				<div class="time">{{ item.time }}</div>
			</div>
		</div>
        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="100"
                v-model:current-page="currentPage"
                class="custom-pagination"
            />
        </div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import img from "./assets/img.png";

const searchText = ref("");
const value1 = ref("全部法案");
const value2 = ref("全部领域");
const currentPage = ref(2);

const list = ref([
	{
		id: 1,
		title: "FY2025 National Defense Authorization Act (NDAA, S.4638)",
		tie: ["法案", "国防与军事"],
		disc: "提供2.82亿美元用于Ellsworth空军基地B-21轰炸机任务和军事建设，包括现代化指令。图恩强调这是其领导的条款，确保南达科他州国防投资。",
		state: "2024年12月参议院通过，待总统签署。",
		time: "2024年6月",
		img: img
	},
	{
		id: 2,
		title: "Bipartisan Appropriations Bills",
		tie: ["法案", "政府预算"],
		disc: "推动农业、商务、司法和军事等四项两党拨款法案，恢复“常规程序”以允许修正案辩论，避免年底“全包”法案或继续决议（CR）。图恩公开敦促民主党合作。",
		state: "委员会报告，部分进入辩论阶段。",
		time: "2025年7月",
		img: img
	},
	{
		id: 3,
		title: "Tax Relief, Unemployment Insurance Reauthorization, and Job Creation Act",
		tie: ["法案", "税收与经济"],
		disc: "续推失业保险和就业创造措施，图恩在2024报告中排名共和党第8位影响力，推动小企业税收减免。",
		state: "纳入2024报告卡，影响2025税收辩论",
		time: "2024年续推",
		img: img
	},
	{
		id: 4,
		title: "Farm Bill Renewal Provisions",
		tie: ["修正案", "农业与农村"],
		disc: "加强农村基础设施和作物保险，支持南达科他州农民。图恩强调两党合作，避免拖延。",
		state: "纳入2024 Farm Bill讨论，部分通过",
		time: "2024年",
		img: img
	},
	{
		id: 5,
		title: "Regular Order Restoration",
		tie: ["修正案", "能源"],
		disc: "承诺恢复委员会起草、修正案辩论和投票规范，避免领导层封闭谈判。图恩表示将允许100多项修正案投票。",
		state: "实施中，2025年夏季拨款辩论",
		time: "2025年1月",
		img: img
	},
	{
		id: 6,
		title: "S.Amdt.3946 和 S.Amdt.3947",
		tie: ["法案", "政府预算"],
		disc: "改进政府资金法案，允许参议员就电话记录扣押提起诉讼，保护国会隐私（源于2020选举调查争议）。图恩提议将法院赔偿退回财政部以调整条款。",
		state: "2025年11月10日失败",
		time: "2025年11月10日",
		img: img
	}
]);

const bestList = ref([
	{
		id: 1,
		title: "通用人工智能如何影响国家兴衰：潜在AGI未来的愿景",
		content: "提供2.82亿美元用于Ellsworth空军基地B-21轰炸机任务和军事建设，包括现代化指令。图恩强调这是其领导的条款，确保南达科他州国防投资。",
		tie: ["国际关系"],
		time: "2025年6月",
		img: img
	},
	{
		id: 2,
		title: "AI安全：保护大型语言模型及其对地缘政治未来的影响",
		content: "召集AI和全球安全专家讨论AI安全的日益重要性及其对国家和本土安全的含义，分析保护大型语言模型以应对地缘政治风险的必要性。",
		tie: ["地缘政治"],
		time: "2025年月",
		img: img
	},
	{
		id: 3,
		title: "中美关系美国视角",
		content: "分析中美关系未来可能涉及加剧的经济和技术竞争、持续的区域紧张，以及华盛顿和北京对相互威慑能力的日益悲观。",
		tie: ["中美关系"],
		time: "2025年4月",
		img: img
	},
	{
		id: 4,
		title: "欧洲长期战争：2024年及以后美国、波兰及盟友选项",
		content: "与波兰国际事务研究所合作讨论2024年作为确保乌克兰胜利和遏制俄罗斯的关键转折年，提供长期战略分析和可操作政策建议，以捍卫基于规则的国际秩序。",
		tie: ["地缘政治"],
		time: "2025年3月",
		img: img
	},
	{
		id: 5,
		title: "华盛顿北约峰会：兰德专家观点",
		content: "30位兰德研究人员讨论北约未来75年的定义性挑战，包括对乌克兰的支持、联盟防御强化、东部侧翼加固，以及应对中国挑战和新兴技术。",
		tie: ["国际关系"],
		time: "2025年3月",
		img: img
	},
	{
		id: 6,
		title: "女性视角如何塑造国家安全",
		content: "探讨性别视角在帮助美国及盟国政府决策者应对最紧迫国家安全挑战中的关键作用，推动多样化视角在政策制定中的价值。",
		tie: ["国家安全"],
		time: "2025年1月",
		img: img
	}
])
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.historical-proposal {
	width: 1600px;
	height: 644px;
	.nav {
		width: 100%;
		height: 32px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
		.search-input {
			width: 300px;
			height: 32px;
			color: rgb(132, 136, 142);
			font-size: 14px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 22px;
		}
		.select-box {
			width: 332px;
			height: 32px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.select {
				width: 160px;
				height: 32px;
				color: rgb(132, 136, 142);
				font-size: 14px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 22px;
			}
		}
	}
	.main {
		width: 1600px;
		height: 540px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
		.item {
			width: 523px;
			height: 262px;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			padding: 16px 16px 15px 16px;
			position: relative;
			// .img-box {
			// 	width: 488px;
			// 	height: 77px;
			// 	display: flex;
			// 	margin-bottom: 12px;
			// 	img {
			// 		width: 57px;
			// 		height: 77px;
			// 		margin-right: 15px;
			// 	}
			// 	.info {
			// 		width: 420px;
			// 		height: 77px;
			// 		display: flex;
			// 		flex-direction: column;
			// 		justify-content: space-between;
			// 		align-items: flex-start;
			// 		.title {
			// 			font-size: 16px;
			// 			font-weight: 700;
			// 			font-family: "Microsoft YaHei";
			// 			line-height: 24px;
			// 			color: rgb(5, 95, 194);
			// 		}
			// 		.tag {
			// 			display: inline-block;
			// 			padding: 1px 8px;
			// 			font-size: 14px;
			// 			font-weight: 400;
			// 			font-family: "Microsoft YaHei";
			// 			line-height: 20px;
			// 			border-radius: 4px;
			// 			border: 1px solid;
			// 			margin-right: 8px;
			// 		}
			// 		.tag-1 {
			// 			background-color: rgba(246, 255, 237, 1);
			// 			color: rgba(82, 196, 26, 1);
			// 			border-color: rgba(217, 247, 190, 1);
			// 		}
			// 		.tag-2 {
			// 			background-color: rgba(255, 251, 230, 1);
			// 			color: rgba(250, 173, 20, 1);
			// 			border-color: rgba(255, 241, 184, 1);
			// 		}
			// 	}
			// }
			// .info-box {
			// 	width: 488px;
			// 	height: 140px;
            //     .box {
            //         width: 100%;
            //         margin-bottom: 10px;
            //         display: flex;
            //         .label {
            //             width: 84px;
            //             font-size: 16px;
            //             font-weight: 700;
            //             font-family: "Microsoft YaHei";
            //             line-height: 24px;
            //             color: rgb(59, 65, 75);
            //         }
            //         .content {
            //             width:400px;
            //             font-size: 16px;
            //             font-weight: 400;
            //             font-family: "Microsoft YaHei";
            //             line-height: 24px;
            //             color: rgb(59, 65, 75);
            //         }
            //     }
			// }
			.img {
				width: 57px;
				height: 77px;
			}
			.title {
				margin-top: 16px;
				font-size: 16px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(5, 95, 194);
			}
			.content {
				margin-top: 8px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(59, 65, 75);
			}
			.tag-box {
				position: absolute;
				bottom: 15px;
				left: 16px;
				.tag {
					display: inline-block;
					padding: 1px 8px;
					font-size: 14px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 20px;
					border-radius: 4px;
					border: 1px solid;
					margin-right: 8px;
				}
				.tag-1 {
					background-color: rgba(255, 251, 230, 1);
					color: rgba(250, 173, 20, 1);
					border-color: rgba(255, 241, 184, 1);
				}
				.tag-2 {
					background-color: rgba(230, 244, 255, 1);
					color: rgba(22, 119, 255, 1);
					border-color: rgba(186, 224, 255, 1);
				}
				.tag-3 {
					background-color: rgba(255, 241, 240, 1);
					color: rgba(255, 77, 79, 1);
					border-color: rgba(255, 204, 199, 1);
				}
				.tag-4 {
					background-color: rgba(246, 255, 237, 1);
					color: rgba(82, 196, 26, 1);
					border-color: rgba(217, 247, 190, 1);
				}
			}
			.time {
				position: absolute;
				top: 16px;
				right: 16px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(132, 136, 142);
			}
		}
	}
	.pagination-container {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
		:deep(.el-pagination.is-background .el-pager li) {
			background-color: #fff;
			border: 1px solid rgba(229, 230, 235, 1);
			border-radius: 4px;
			color: rgba(29, 33, 41, 1);
			font-weight: 400;
            margin: 0 4px;
		}
		:deep(.el-pagination.is-background .el-pager li.is-active) {
			background-color: #fff;
			border-color: #165DFF;
			color: #165DFF;
		}
		:deep(.el-pagination.is-background .btn-prev),
		:deep(.el-pagination.is-background .btn-next) {
			background-color: #fff;
			border: 1px solid rgba(229, 230, 235, 1);
			border-radius: 4px;
            margin: 0 4px;
		}
	}
}
</style>
