<template>
	<div class="view-box">
		<div class="container-box">
			<div class="hard-box">
				<div class="hard-name text-title-0-show">美国国会委员会</div>
				<div class="hard-num text-title-2-show">{{ committeeInfo.total }}个</div>
				<div style="width: 0; flex: auto"></div>
				<div class="hard-input">
					<el-input
						v-model="committeeInfo.keyWord"
						@keyup.enter="onAllCommittee()"
						style="width: 100%; height: 100%"
						:suffix-icon="Search"
						placeholder="搜索委员会"
					/>
				</div>
			</div>

			<div class="date-box">
				<div class="date-text">近期美国国会各委员会涉华提案数量汇总</div>
				<TimeTabPane @time-click="handleDateChange" activeTime="近一年" />
			</div>

			<div class="committee-list" ref="refCommittee" v-loading="committeeInfo.loading">
				<div class="committee-item" v-for="item in committeeInfo.list" :key="item.id" @click="handleToDataLibrary(item)">
					<div class="item-left">
						<img :src="iconCommit" alt="" />
					</div>
					<div class="item-right">
						<div class="item-name one-line-ellipsis">{{ item.name }}</div>
						<div class="item-chamber one-line-ellipsis">{{ item.chamber }}</div>
					</div>
					<div class="item-total">{{ item.count }}项</div>
					<el-icon color="var(--color-primary-100)">
						<ArrowRightBold />
					</el-icon>
				</div>
			</div>

			<div class="pagination-box">
				<el-pagination
					@current-change="onAllCommittee"
					:pageSize="committeeInfo.pageSize"
					:current-page="committeeInfo.pageNum"
					background
					layout="prev, pager, next"
					:total="committeeInfo.total"
				/>
			</div>
		</div>
	</div>
</template>

<script setup name="BillAllCommittee">
import { onMounted, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ArrowRightBold } from "@element-plus/icons-vue";
import router from "@/router";
import TimeTabPane from "@/components/base/TimeTabPane/index.vue";
import { getStatisticsBillCountByCommittee } from "@/api/bill/billHome";
import iconCommit from "../billHome/assets/icons/icon-commit.png";

const committeeInfo = reactive({
	loading: false,
	pageNum: 1,
	pageSize: 8,
	total: 0,
	keyWord: "",
	dateDesc: "近一年",
	list: []
});

const getChamberLabel = orgType => {
	if (orgType === "Senate") return "参议院";
	if (orgType === "House") return "众议院";
	return orgType || "";
};

const onAllCommittee = async num => {
	committeeInfo.pageNum = num || 1;
	committeeInfo.loading = true;
	try {
		const res = await getStatisticsBillCountByCommittee({
			dateDesc: committeeInfo.dateDesc
		});
		if (res.code === 200 && Array.isArray(res.data)) {
			const source = res.data
				.map(item => ({
					id: `${item.orgType || ""}-${item.orgName || ""}`,
					name: item.orgName,
					chamber: getChamberLabel(item.orgType),
					count: Number(item.count || 0)
				}))
				.filter(item => !committeeInfo.keyWord || item.name?.includes(committeeInfo.keyWord))
				.sort((a, b) => (b.count || 0) - (a.count || 0));

			committeeInfo.total = source.length;
			const start = (committeeInfo.pageNum - 1) * committeeInfo.pageSize;
			committeeInfo.list = source.slice(start, start + committeeInfo.pageSize);
		} else {
			committeeInfo.total = 0;
			committeeInfo.list = [];
		}
	} catch (error) {
		committeeInfo.total = 0;
		committeeInfo.list = [];
	}
	committeeInfo.loading = false;
};

const handleDateChange = event => {
	committeeInfo.dateDesc = event?.time || "近一年";
	onAllCommittee();
};

const handleToDataLibrary = item => {
	const route = router.resolve({
		path: "/dataLibrary/countryBill",
		query: {
			selectedOrg: item.name,
			selectedCongress: item.chamber
		}
	});
	window.open(route.href, "_blank");
};

const refCommittee = ref();
onMounted(() => {
	let height = 2;
	if (refCommittee.value) {
		height = Math.floor(refCommittee.value?.clientHeight / 120);
	}
	committeeInfo.pageSize = height * 4;
	onAllCommittee();
});
</script>

<style scoped lang="scss">
.view-box {
	width: 100%;
	height: 100%;
	background: url("../billHome/assets/images/background.png"), linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
	background-size: 100% 100%;
	display: flex;
	justify-content: center;

	.container-box {
		width: 1600px;
		padding: 50px 0 20px;
		display: flex;
		flex-direction: column;

		.hard-box {
			display: flex;
			align-items: center;
			width: 100%;

			.hard-name {
				color: var(--text-primary-90-color);
				height: 62px;
				line-height: 62px !important;
			}

			.hard-num {
				height: 36px;
				background-color: var(--color-primary-100);
				color: var(--bg-white-100);
				border-radius: 18px;
				line-height: 36px !important;
				padding: 0 16px;
				margin-left: 16px;
			}

			.hard-input {
				background-color: var(--el-fill-color-blank);
				border-radius: var(--el-border-radius-base);
				box-shadow: 0 0 0 1px var(--el-border-color) inset;
				box-sizing: border-box;
				margin-left: 20px;
				width: 180px;
				height: 32px;
			}
		}

		.date-box {
			margin-top: 6px;
			display: flex;
			align-items: center;
			width: 100%;

			.date-text {
				width: 20px;
				flex: auto;
				font-size: 18px;
				line-height: 18px;
				font-family: Source Han Sans CN;
				color: var(--text-primary-80-color);
			}
		}

		.committee-list {
			width: 100%;
			height: 20px;
			padding: 16px 0;
			margin-top: 10px;
			flex: auto;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-auto-rows: 104px;
			gap: 16px;

			.committee-item {
				padding: 0 16px;
				display: flex;
				background: rgba(255, 255, 255, 0.65);
				border: 1px solid rgba(255, 255, 255, 1);
				border-radius: 10px;
				box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
				align-items: center;
				cursor: pointer;
				transition: transform 0.3s ease, box-shadow 0.3s ease;

				&:hover {
					transform: translateY(-3px);
					box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
				}

				.item-left {
					width: 48px;
					height: 48px;
					margin-right: 12px;
					img {
						width: 100%;
						height: 100%;
					}
				}

				.item-right {
					flex: auto;
					min-width: 0;
					.item-name {
						font-size: 20px;
						font-weight: 700;
						line-height: 22px;
						color: var(--text-primary-80-color);
					}
					.item-chamber {
						margin-top: 6px;
						font-size: 14px;
						color: var(--text-primary-50-color);
					}
				}

				.item-total {
					font-size: 20px;
					font-weight: 700;
					line-height: 20px;
					color: var(--color-primary-100);
					margin-right: 6px;
				}
			}
		}

		.pagination-box {
			display: flex;
			justify-content: center;
		}
	}
}
</style>
