<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 CharacterProposal" :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 in item.tie"
								:key="tag"
								class="tag"
								:class="{ 'tag-1': tag.status == 1, 'tag-2': tag.status == 8, 'tag-3': tag.status == 4 }"
								>{{ tag.industryName }}</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
				@current-change="handleCurrentChange"
				:page-size="pageSize"
				:current-page="currentPage"
				background
				layout="prev, pager, next"
				:total="total"
				class="custom-pagination"
			/>
        </div>
	</div>
</template>

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

import { getCharacterProposal } from "@/api/characterPage/characterPage.js";


import { useRoute } from 'vue-router';
const route = useRoute();
const personId = ref(route.query.personId || "Y000064");

const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
	getCharacterProposalFn();
};

// 获取历史提案
const CharacterProposal = ref({});
const total = ref(0);
const pageSize = ref(7);
const loading = ref(false);
const abortController = ref(null);
const getCharacterProposalFn = async () => {
	// 取消上一次未完成的请求
	if (abortController.value) {
		abortController.value.abort();
	}
	// 创建新的 AbortController
	abortController.value = new AbortController();

	loading.value = true;

	const params = {
		personId: personId.value,
		industryId:  1,
		currentPage: currentPage.value - 1,
		pageSize: pageSize.value
	};

	try{
		const res = await getCharacterProposal(params, abortController.value.signal);
		console.log("历史提案", res);
		if (res.code === 200) {
			if (res.data&& res.data.content) {
				CharacterProposal.value = res.data.content.map(item => ({
					id: item.billId,
					title: item.name,
					tie: item.industryList,
					disc: item.description,
					state: item.status,
					time: item.time,
					img: item.imageUrl || img
				}));
				total.value = res.data.totalElements;
			}else {
				CharacterProposal.value = [];
				total.value = 0;
			}
		}else {
			CharacterProposal.value = [];
			total.value = 0;
		}
		loading.value = false;
	}catch (error) {
		if (error.name !== "AbortError") {
			console.error(error);
			loading.value = false;
		}
	}
	
};

onMounted(() => {
	getCharacterProposalFn();
});

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

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);
					}
					.tag-3 {
						background-color: rgba(255, 241, 240, 1);
						color: rgba(245, 34, 45, 1);
						border-color: rgba(255, 163, 158, 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);
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
						text-overflow: ellipsis;
                    }
                }
			}
		}
	}
	.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>
