<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-ti1"></div>
				<div class="left-ti2"></div>
				<div class="left-title">数据来源</div>
				<div class="left-content">
					<div v-for="item in dataList" :key="item.id" class="left-item">
						<input type="checkbox" checked />{{ item.name }}
					</div>
				</div>
				<div class="left-title cl1">涉及领域</div>
				<div class="left-content">
					<div v-for="(item, i) in dataList2" :key="item.id" class="left-item">
						<input type="checkbox" :checked="i === 0" />{{ item.name }}
					</div>
				</div>
			</div>
			<div class="right">
				<div class="right-title">
					<img src="./assets/icon01.png" alt="" />
					<div>合作限制历程</div>
				</div>
				<div class="right-main">
					<div class="main-content">
						<div v-for="item in mainDataList" :key="item.id" class="main-item">
							<div class="date">{{ item.date }}</div>
							<img :src="item.img" alt="" class="img" />
							<div class="box">
								<div class="title" @click="handleClick(item)">{{ item.title }}</div>
								<div class="content" @click="handleClick(item)">{{ item.content }}</div>
								<div class="domain">
									<div v-for="(domain, i) in item.domain" :key="i" class="domain-item">{{ domain }}</div>
								</div>
								<div class="type" :class="{ type1: item.type === '行政令', type2: item.type === '法案' }">
									{{ item.type }}
								</div>
							</div>
						</div>
					</div>
					<div class="line"></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 { useRouter } from "vue-router";

import whitehouse from "./assets/白宫.png";
import guohui from "./assets/国会.png";
import guotuanquanbu from "./assets/国土安全部.png";
import guowuyuan from "./assets/国务院.png";
import weishengyanjiuyuan from "./assets/卫生研究院.png";
import zhongyiyuan from "./assets/众议院.png";
import fda from "./assets/FDA.png";

const router = useRouter();
const handleClick = item => {
	router.push({
		path: "/cooperationRestrictions/detail",
		query: {
			id: item.id
		}
	});
};

const navList = ref(["全部限制", "学术交流限制", "科研合作限制", "人才流动限制", "数据共享限制"]);
const activeItem = ref("全部限制");

const value = ref("发布时间");

const options = [
	{
		value: "发布时间",
		label: "发布时间"
	},
	{
		value: "发布日期",
		label: "发布日期"
	}
];
const dataList = ref([
	{
		id: 1,
		name: "全部来源"
	},
	{
		id: 2,
		name: "法案"
	},
	{
		id: 3,
		name: "政令"
	},
	{
		id: 4,
		name: "政府公告"
	}
]);
const dataList2 = 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: "海洋"
	}
]);

const mainDataList = ref([
	{
		id: 1,
		title: "美国国土安全部：取消哈佛大学SEVP认证，禁止其招收国际新生",
		content:
			"国土安全部长诺姆以安全审查为由，正式终止哈佛大学“学生与交流访问学者项目”（SEVP）认证，导致该校丧失2025~2026学年招收国际新生的资格。",
		date: "2025年10月15日",
		domain: ["人才流动限制"],
		type: "行政令",
		img: guotuanquanbu
	},
	{
		id: 2,
		title: "美国白宫：通过应对哈佛大学的风险来增强国家安全",
		content:
			"学生交换签证计划（SEVP）根本依赖于学术机构的诚信、透明度以及对相关监管框架的完全遵守。 这是出于关键的国家安全原因。 联邦调查局（FBI）长期警告称，外国对手和竞争对手利用美国高等教育的便捷通道，窃取技术信息和产品，利用昂贵的研发项目来实现自身野心，并出于政治或其他原因传...",
		date: "2025年9月30日",
		domain: ["人才流动限制"],
		type: "行政令",
		img: whitehouse
	},
	{
		id: 3,
		title: "美国白宫：限制外国公民入境，以保护美国免受外国恐怖分子及其他国家安全和公共安全威胁",
		content: "美国商务部宣称将“至少每年”更新一次管制规则，以堵塞已发现的政策“漏洞”。",
		date: "2025年9月15日",
		domain: ["人才流动限制"],
		type: "行政令",
		img: whitehouse
	},
	{
		id: 4,
		title: "美国白宫：提升生物研究的安全性与保障",
		content: "停止联邦资助外国实体在关注国家（如中国）进行的危险功能增益研究。",
		date: "2025年9月15日",
		domain: ["人才流动限制", "生物科技"],
		type: "行政令",
		img: whitehouse
	},
	{
		id: 5,
		title: "美国国会：《2026财年拨款法案》审议通过重启“中国行动计划”",
		content: "美国众议院拨款委员会在审议《2026财年拨款法案》时，加入条款要求司法部重启已被拜登政府叫停的“中国行动计划”。",
		date: "2025年9月1日",
		domain: ["人才流动限制"],
		type: "法案",
		img: guohui
	},
	{
		id: 6,
		title: "美国FDA：紧急叫停涉及将美国公民活体细胞送往中国等“敌对国家”实验室的临床试验",
		content: "涉及将人类生物样本（如活体细胞）转移至中国进行基因工程等研究的临床试验项目，相关研究被叫停。",
		date: "2025年8月26日",
		domain: ["数据共享限制", "生物科技"],
		type: "行政令",
		img: fda
	},
	{
		id: 7,
		title: "美国众议院“美中战略竞争特设委员会”：要求杜克大学终止昆山杜克大学合作项目",
		content: "指控其“通过先进摄像系统研究协助中国导弹制导技术发展”，并质疑美国学生被用于中国宣传。",
		date: "2025年8月22日",
		domain: ["科研合作限制"],
		type: "行政令",
		img: zhongyiyuan
	},
	{
		id: 8,
		title: "美国国务院：大规模撤销部分中国学生签证，重点审查STEM领域",
		content:
			"美国国务卿鲁比奥宣布将开始大规模撤销部分中国学生的签证，重点针对STEM（科学、技术、工程和数学）领域的学习者以及所谓“与中国政府有联系”的人员，并全面提升对中国大陆和香港地区申请者的签证审查标准",
		date: "2025年8月15日",
		domain: ["人才流动限制"],
		type: "行政令",
		img: guowuyuan
	},
	{
		id: 9,
		title: "美国FDA：针对两家中国第三方检测机构的数据完整性问题采取行动",
		content:
			"FDA因发现数据伪造或无效问题，向两家中国第三方检测公司（天津中联科技检测有限公司和苏州大学卫生与环境技术研究所）正式发出“一般信函”。",
		date: "2025年10月15日",
		domain: ["数据共享限制", "生物科技"],
		type: "行政令",
		img: fda
	},
	{
		id: 10,
		title: "美国国家卫生研究院：限制中国等国的研究人员访问其受控访问数据存储库",
		content: "美国商务部宣称将“至少每年”更新一次管制规则，以堵塞已发现的政策“漏洞”。",
		date: "2025年9月15日",
		domain: ["数据共享限制", "生物科技"],
		type: "行政令",
		img: weishengyanjiuyuan
	}
]);

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: 808px;
		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;
			height: 584px;
			margin-right: 16px;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			position: relative;
			.left-ti1 {
				width: 8px;
				height: 16px;
				background-color: rgb(5, 95, 194);
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
				position: absolute;
				top: 17px;
				left: 0px;
			}
			.left-ti2 {
				width: 8px;
				height: 16px;
				background-color: rgb(5, 95, 194);
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
				position: absolute;
				top: 207px;
				left: 0px;
			}
			.left-title {
				margin-left: 25px;
				color: rgb(5, 95, 194);
				font-size: 16px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				margin-top: 13px;
			}
			.left-content {
				width: 109px;
				height: 132px;
				margin-left: 25px;
				margin-top: 13px;
				.left-item {
					width: 89px;
					height: 30px;
					margin-bottom: 4px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(95, 101, 108);
					input[type="checkbox"] {
						-webkit-appearance: none;
						appearance: none;
						width: 14px;
						height: 14px;
						margin-right: 8px;
						border: 1px solid rgb(200, 204, 210);
						border-radius: 4px;
						background-color: #fff;
						vertical-align: middle;
					}
					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;
						margin: 1px auto 0;
						border: 2px solid #fff;
						border-top: none;
						border-left: none;
						transform: rotate(45deg);
					}
				}
			}
			.cl1 {
				margin-top: 21px;
			}
		}
		.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: 22px 43px 15px 20px;
				position: relative;
				.main-content {
					width: 1221px;
					height: 1345px;
					.main-item {
						width: 1221px;
						min-height: 116px;
						max-height: 140px;
						margin-bottom: 16px;
						position: relative;
						.date {
							position: absolute;
							top: 4px;
							left: 10px;
							width: 62px;
							height: 68px;
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(5, 95, 194);
							text-align: right;
						}
						.img {
							width: 24px;
							height: 24px;
							position: absolute;
							top: 13px;
							left: 90px;
							z-index: 100;
						}
						.box {
							width: 1086px;
							min-height: 91px;
							max-height: 114px;
							position: absolute;
							top: 10px;
							left: 135px;
							.title {
								font-size: 20px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								line-height: 26px;
								color: rgb(59, 65, 75);
								margin-bottom: 8px;
								cursor: pointer;
							}
							.content {
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(95, 101, 108);
								margin-bottom: 9px;
								cursor: pointer;
							}
							.type {
								padding: 2px 8px;
								border-radius: 20px;
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								position: absolute;
								top: 0px;
								right: 0px;
							}
							.type1 {
								background-color: rgba(255, 149, 77, 0.1);
								color: rgb(255, 149, 77);
							}
							.type2 {
								background-color: rgba(206, 79, 81, 0.1);
								color: rgb(206, 79, 81);
							}
							.domain {
								margin-bottom: 15px;
								display: flex;
								.domain-item {
									padding: 2px 8px;
									border-radius: 4px;
									font-size: 14px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 20px;
									margin-right: 8px;
									color: rgb(5, 95, 194);
									background-color: rgba(231, 243, 255, 1);
								}
							}
						}
					}
				}
				.line {
					height: 1150px;
					border: 2px solid rgb(235, 238, 242);
					position: absolute;
					top: 75px;
					left: 120px;
					z-index: 1;
				}
				.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>
