<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 list" :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>
			</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
	}
]);
</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 19px 17px 16px;
			.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);
                    }
                }
			}
		}
	}
	.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>
