<template>
	<div class="reslib-page">
		<div class="nav">
			<div
				v-for="item in navList"
				:key="item"
				class="nav-item"
				:class="{ active: item === activeItem }"
				@click="activeItem = item"
			>
				{{ item }}
			</div>
		</div>
		<el-select v-model="value" placeholder="Select" class="select">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
		</el-select>
		<div class="main">
			<div class="left">
				<div class="left-section">
					<div class="left-title-wrapper">
						<div class="left-indicator"></div>
						<div class="left-title">科技领域</div>
					</div>
					<div class="left-content">
						<div v-for="(item, i) in techFields" :key="item.id" class="left-item">
							<input type="checkbox" :checked="i === 0" />{{ item.name }}
						</div>
					</div>
				</div>
				<div class="left-section">
					<div class="left-title-wrapper">
						<div class="left-indicator"></div>
						<div class="left-title">发布时间</div>
					</div>
					<div class="left-content">
						<div v-for="(item, i) in releaseTimes" :key="item.id" class="left-item">
							<input type="checkbox" :checked="i === 0" />{{ item.name }}
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="right-title">
					<img src="./assets/icon01.png" alt="" />
					<div>资助项目</div>
				</div>
				<div class="right-main">
					<div v-for="(item, i) in mainList" :key="item.id" class="right-item">
						<img :src="item.img" alt="" />
						<div class="right-item-title">{{ item.title }}</div>
						<div class="right-item-content">{{ item.content }}</div>
						<div class="right-item-pie">
							<div
								v-for="(pie, i) in item.pie"
								:key="i"
								class="right-item-pie-item"
								:class="{
									cl1: pie === '新材料',
									cl2: pie === '人工智能',
									cl3: pie === '量子科技',
									cl4: pie === '能源',
									cl5: pie === '生物科技',
									cl6: pie === '航空航天'
								}"
							>
								{{ pie }}
							</div>
						</div>
						<div class="right-item-time">{{ item.time }}</div>
						<div class="right-item-money" :style="{ color: item.color }">{{ item.money }}</div>
					</div>

					<div class="page">
						<div class="count">共1205项调查</div>
						<el-pagination
							v-model:current-page="currentPage"
							:page-size="pageSize"
							:total="total"
							layout="prev, pager, next"
							background
							@current-change="handlePageChange"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import NSF from "./assets/NSF.png";
import DARPA from "./assets/DARPA.png";
import NASA from "./assets/NASA.png";
import NIH from "./assets/NIH.png";
import DOE from "./assets/DOE.png";

const navList = ref(["全部资助项目", "NSF", "DARPA", "NASA", "NIH", "DOE", "NIST"]);
const activeItem = ref("全部资助项目");

const value = ref("发布时间");
const options = [
	{
		value: "发布时间",
		label: "发布时间"
	},
	{
		value: "发布日期",
		label: "发布日期"
	}
];
const techFields = ref([
	{ id: 1, name: "全部领域" },
	{ id: 2, name: "人工智能" },
	{ id: 3, name: "集成电路" },
	{ id: 4, name: "量子科技" },
	{ id: 5, name: "新一代信息技术" },
	{ id: 6, name: "生物技术" },
	{ id: 7, name: "新能源" },
	{ id: 8, name: "航空航天" },
	{ id: 9, name: "先进制造" },
	{ id: 10, name: "海洋" },
	{ id: 11, name: "新材料" },
	{ id: 12, name: "深海" },
	{ id: 13, name: "极地" },
	{ id: 14, name: "核" },
	{ id: 15, name: "其他" }
]);
const releaseTimes = ref([
	{ id: 1, name: "全部时间" },
	{ id: 2, name: "2025年" },
	{ id: 3, name: "2024年" },
	{ id: 4, name: "2023年" },
	{ id: 5, name: "2022年" },
	{ id: 6, name: "2021年" },
	{ id: 7, name: "更早" }
]);
const mainList = ref([
	{
		id: 1,
		title: "NSF：量子化学合作研究项目",
		content: "美国国家科学基金会和英国研究与创新（UKRI）正在投资八个联合研究项目，这些项目有望为量子计算带来突破......",
		pie: ["新材料", "量子科技"],
		time: "2025年11月26日",
		money: "$1,000万",
		color:"rgb(255, 149, 77)",
		img: NSF
	},
	{
		id: 2,
		title: "NIH：All of Us研究计划数据集应用",
		content:
			"美国国立卫生研究院（NIH）宣布拨款970万美元，支持利用“All of Us”研究计划的数据集开展生物医学研究，并开发数据分析的新模型...",
		pie: ["生物科技"],
		time: "2025年11月26日",
		money: "$970万",
		color:"rgb(232, 189, 11)",
		img: NIH
	},
	{
		id: 3,
		title: "NSF：EPSCoR管辖区投资 计划",
		content:
			"美国国家科学基金会正在蒙大拿州、爱达荷州和路易斯安那州的机构投资约 3000 万美元，以建立 NSF EPSCoR 科学卓越研究中心......",
		pie: ["人工智能", "新材料", "量子科技"],
		time: "2025年11月26日",
		money: "$3,000万",
		color:"rgb(255, 149, 77)",
		img: NSF
	},
	{
		id: 4,
		title: "NASA：创新型早期空间技术研究资助项目",
		content:
			"NASA宣布对11所大学的研究提案进行资助（表1），这些项目旨在通过对创新型早期技术的研究，解决美国空间计划中具有较高优先度的...",
		pie: ["航空航天"],
		time: "2025年11月26日",
		money: "$2.8亿",
		color:"rgb(206, 79, 81)",
		img: NASA
	},
	{
		id: 5,
		title: "DARPA：可调控生物功能微系统技术开发",
		content:
			"美国国防高级研究计划局（DARPA）宣布通过“微系统诱导催化”（MICA）项目资助巴特尔纪念研究所1030万美元[1]，探索使用微系统...",
		pie: ["生物科技"],
		time: "2025年11月26日",
		money: "$1,030万",
		color:"rgb(255, 149, 77)",
		img: DARPA
	},
	{
		id: 6,
		title: "NSF：国家人工智能研究资源运营中心",
		content: "美国国家科学基金会今日宣布一项新招标，旨在建立国家人工智能研究资源运营中心（NAIRR-OC）。这标志着一个关键......",
		pie: ["人工智能"],
		time: "2025年11月26日",
		money: "$1.05亿",
		color:"rgb(206, 79, 81)",
		img: NSF
	},
	{
		id: 7,
		title: "NASA：“人体研究计划”和“空间生物学计划”的16个研究提案",
		content:
			"NASA将与俄罗斯联邦航天局（Roscosmos）合作开展国际空间站一年期驻留任务，以评估长期空间飞行对人的影响[3]。 入选“人体研究...",
		pie: ["生物科技", "航空航天"],
		time: "2025年11月26日",
		money: "$1.9亿",
		color:"rgb(206, 79, 81)",
		img: NASA
	},
	{
		id: 8,
		title: "NSF：NVIDIA 合作 Ai2 模型创新",
		content: "美国国家科学基金会宣布与英伟达合作，开发一套人工智能模型，这将彻底改变美国科学家利用人工智能的能力......",
		pie: ["人工智能"],
		time: "2025年11月26日",
		money: "$240万",
		color:"rgb(232, 189, 11)",
		img: NSF
	},
	{
		id: 9,
		title: "NASA：新一轮机器人研发",
		content:
			"美国国家科学基金会（NSF）宣布将联合国家航空航天局（NASA）、国立卫生研究院（NIH）、农业部（USDA）、国防部（DoD）支持...",
		pie: ["人工智能"],
		time: "2025年11月26日",
		money: "$850万",
		color:"rgb(232, 189, 11)",
		img: NASA
	},
	{
		id: 10,
		title: "DOE：微电网及储能技术研发",
		content: "美国能源部电力办公室宣布两项资助信息，共计投入2210万美元，推进微电网和电网级储能技术创新发展。",
		pie: ["能源"],
		time: "2025年11月26日",
		money: "$2,210万",
		color:"rgb(255, 149, 77)",
		img: DOE
	}
]);

const total = ref(1205);
const pageSize = ref(121);
const currentPage = ref(5);
const handlePageChange = p => {
	currentPage.value = p;
};
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.reslib-page {
	width: 1600px;
	height: 1565px;
	position: relative;
	.nav {
		width: 721px;
		height: 42px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 34px;
		.nav-item {
			cursor: pointer;
			padding: 8px 20px;
			font-size: 20px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 26px;
			color: rgb(59, 65, 75);
		}
		.active {
			background-color: rgb(5, 95, 194);
			border-radius: 21px;
			color: #fff;
			font-weight: 700;
		}
	}
	.select {
		width: 128px;
		position: absolute;
		top: 7px;
		right: 0px;
	}
	.main {
		width: 1600px;
		height: 1489px;
		display: flex;
		.left {
			width: 300px;
			min-height: 565px;
			margin-right: 16px;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			padding: 20px 0;
			.left-section {
				margin-bottom: 30px;
				.left-title-wrapper {
					display: flex;
					align-items: center;
					margin-bottom: 20px;
					.left-indicator {
						width: 8px;
						height: 16px;
						background-color: rgb(5, 95, 194);
						border-top-right-radius: 3px;
						border-bottom-right-radius: 3px;
						margin-right: 17px;
					}
					.left-title {
						color: rgb(5, 95, 194);
						font-size: 18px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 24px;
					}
				}
				.left-content {
					display: flex;
					flex-wrap: wrap;
					padding-left: 25px;
					.left-item {
						width: 50%;
						height: 30px;
						margin-bottom: 12px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(95, 101, 108);
						display: flex;
						align-items: center;
						input[type="checkbox"] {
							-webkit-appearance: none;
							appearance: none;
							width: 16px;
							height: 16px;
							margin-right: 12px;
							border: 1px solid rgb(200, 204, 210);
							border-radius: 4px;
							background-color: #fff;
							cursor: pointer;
							position: relative;
						}
						input[type="checkbox"]:checked {
							background-color: rgb(5, 95, 194);
							border-color: rgb(5, 95, 194);
						}
						input[type="checkbox"]:checked::after {
							content: "";
							display: block;
							width: 4px;
							height: 8px;
							position: absolute;
							left: 50%;
							top: 45%;
							border: 2px solid #fff;
							border-top: none;
							border-left: none;
							transform: translate(-50%, -50%) rotate(45deg);
						}
					}
				}
			}
		}
		.right {
			width: 1284px;
			height: 1489px;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			.right-title {
				width: 1284px;
				height: 48px;
				border-bottom: 1px solid rgb(235, 238, 242);
				position: relative;
				img {
					width: 22px;
					height: 19px;
					position: absolute;
					top: 15px;
					left: 20px;
				}
				div {
					width: 120px;
					height: 48px;
					margin-left: 60px;
					font-size: 20px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 26px;
					color: rgb(5, 95, 194);
					padding: 11px 0;
				}
			}
			.right-main {
				width: 1284px;
				height: 1441px;
				padding: 19px 34px 20px 29px;
				position: relative;
				.right-item {
					width: 1221px;
					height: 124px;
					border-bottom: 1px solid rgb(234, 236, 238);
					margin-bottom: 8px;
					position: relative;
					img {
						width: 32px;
						height: 32px;
						position: absolute;
						top: 9px;
						left: 7px;
					}
					.right-item-title {
						position: absolute;
						top: 10px;
						left: 56px;
						font-size: 20px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 26px;
						color: rgb(59, 65, 75);
					}
					.right-item-content {
						position: absolute;
						top: 44px;
						left: 56px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(95, 101, 108);
					}
					.right-item-pie {
						position: absolute;
						top: 76px;
						left: 56px;
						display: flex;
						.right-item-pie-item {
							padding: 2px 8px;
							border-radius: 4px;
							margin-right: 8px;
							border: 1px solid;
							font-size: 14px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 20px;
						}
						.cl1 {
							background-color: rgba(230, 255, 251, 1);
							border-color: rgba(135, 232, 222, 1);
							color: rgba(19, 168, 168, 1);
						}
						.cl2 {
							background-color: rgba(255, 241, 240, 1);
							border-color: rgba(255, 163, 158, 1);
							color: rgba(245, 34, 45, 1);
						}
						.cl3 {
							background-color: rgba(249, 240, 255, 1);
							border-color: rgba(211, 173, 247, 1);
							color: rgba(114, 46, 209, 1);
						}
						.cl4 {
							background-color: rgba(230, 255, 251, 1);
							border-color: rgba(135, 232, 222, 1);
							color: rgba(19, 168, 168, 1);
						}
						.cl5 {
							background-color: rgba(230, 244, 255, 1);
							border-color: rgba(145, 202, 255, 1);
							color: rgba(22, 119, 255, 1);
						}
						.cl6 {
							background-color: rgba(240, 245, 255, 1);
							border-color: rgba(173, 198, 255, 1);
							color: rgba(47, 84, 235, 1);
						}
					}
					.right-item-time {
						position: absolute;
						top: 13px;
						right: 0;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(95, 101, 108);
					}
					.right-item-money {
						position: absolute;
						top: 76px;
						right: 0;
						font-size: 18px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 24px;
					}
				}
				.page {
					width: 1221px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: absolute;
					bottom: 20px;
					left: 20px;
					padding-left: 11px;
					.count {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
					}
					:deep(.el-pagination) {
						display: flex;
						align-items: center;
					}
					:deep(.el-pagination.is-background .el-pager li) {
						min-width: 32px;
						height: 32px;
						line-height: 32px;
						border-radius: 6px;
						margin: 0 6px;
						border: 1px solid rgba(0, 0, 0, 0.15);
						background-color: #fff;
						color: rgb(95, 101, 108);
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
					}
					:deep(.el-pagination.is-background .el-pager li.is-active) {
						background-color: #fff;
						color: rgba(22, 119, 255, 1);
						border-color: rgba(22, 119, 255, 1);
						// box-shadow: 0 0 0 2px rgba(47, 122, 229, 0.15) inset;
					}
					:deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
						border: none;
						background-color: transparent;
						color: rgb(95, 101, 108);
						min-width: 16px;
						margin: 0 6px;
					}
					:deep(.el-pagination.is-background .btn-prev),
					:deep(.el-pagination.is-background .btn-next) {
						min-width: 32px;
						height: 32px;
						border-radius: 6px;
						border: 1px solid rgba(0, 0, 0, 0.15);
						background-color: #fff;
						color: rgb(95, 101, 108);
						font-size: 16px;
						font-family: "Microsoft YaHei";
						margin: 0 6px;
					}
					:deep(.el-pagination.is-background .btn-prev.is-disabled),
					:deep(.el-pagination.is-background .btn-next.is-disabled) {
						color: rgba(95, 101, 108, 0.45);
						border-color: rgb(235, 238, 242);
						background-color: #fff;
					}
				}
			}
		}
	}
}
</style>
