<template>
	<div class="data-new">
		<div class="left">
			<img src="./assets/leftbtn.png" alt="" class="left-btn" />
			<img src="./assets/rightbtn.png" alt="" class="right-btn" />
			<div class="left-top">
				<img src="./assets/icon01.png" alt="" />
				<div class="left-top-title">合作限制动态</div>
				<span>查看详情 ></span>
			</div>
			<div class="left-center">
				<img src="./assets/usImg.png" alt="" />
				<div class="left-center-main">
					<div class="left-center-main-title">保护美国资金与专业知识免受敌对研究利用法案</div>
					<div class="left-center-main-ul">
						<ul>
							<li>
								<span class="ul-title">数据来源：</span>
								<span class="ul-content">美国国会</span>
							</li>
							<li>
								<span class="ul-title">合作限制类型：</span>
								<span class="ul-content">科研合作限制</span>
							</li>
							<li>
								<span class="ul-title">发布日期：</span>
								<span class="ul-content">2025年10月7日</span>
							</li>
							<li>
								<span class="ul-title">涉及领域</span>
								<span class="ul-pie cl1">航空航天</span>
								<span class="ul-pie cl2">人工智能</span>
								<span class="ul-pie cl3">集成电路</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="left-center-title">国会法案</div>
			</div>
			<div class="left-bottom">
				<ul>
					<li class="left-bottom-li">内容摘要：</li>
				</ul>
				<div class="left-bottom-content">
					该法案已被纳入《国防授权法案》（NDAA）的讨论范畴，并已在参议院通过审议
					。该法案规定，将禁止任何与中国等被视为“敌对国”有合作关系的科学家获得联邦资助
					。其限制范围极其宽泛，从联合研究、合著论文到指导研究生或博士后几乎全覆盖
					。更严厉的是，该条款具有追溯效力，可追溯至过去5年的合作。
				</div>
			</div>
		</div>
		<div class="right">
			<div class="right-top">
				<img src="./assets/icon02.png" alt="" />
				<div class="right-top-title">
					风险信号
					<span>4</span>
				</div>
			</div>
			<div style="margin: 6px 34px 0 23px">
				<div v-for="item in list" :key="item.id" class="right-main"	@click="handleClickToDetail()">
					<div class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险' }">
						{{ item.title }}
					</div>
					<div class="main-center">{{ item.content }}</div>
					<div class="main-right">{{ item.time }}</div>
				</div>
			</div>
			<div class="right-mainbtn" @click="handleToMoreRiskSignal">
				<img src="./assets/btn.png" alt="" />
				查看更多
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import router from "@/router";

const list = ref([
	{
		id: 1,
		title: "特别重大",
		content: "保护美国资金与专业知识免受敌对研究利用法案",
		time: "一天前"
	},
	{
		id: 2,
		title: "特别重大",
		content: "美国国土安全部终止哈佛大学SEVP认证",
		time: "一天前"
	},
	{
		id: 3,
		title: "重大风险",
		content: "众议院“美中战略竞争特别委员会”向国会提...",
		time: "一天前"
	},
	{
		id: 4,
		title: "重大风险",
		content: '2026财年拨款法案要求重启"中国行动计划"',
		time: "一天前"
	}
]);

// 点击查看详情
const handleClickToDetail = () => {
	// router.push("/decreeLayout");
	const curRoute = router.resolve("/cooperationRestrictions/detail");
	window.open(curRoute.href, "_blank");
};

// 查看更多风险信号
const handleToMoreRiskSignal = () => {
	const route = router.resolve("/riskSignal");
	window.open(route.href, "_blank");
};

</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.data-new {
	width: 1600px;
	height: 460px;
	display: flex;
	justify-content: space-between;
	.left {
		width: 1064px;
		height: 460px;
		margin-right: 16px;
		border-radius: 10px;
		background-color: #fff;
		border: 1px solid rgb(234, 236, 238);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		position: relative;
		.left-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			top: 223px;
			left: 0px;
			cursor: pointer;
		}
		.right-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			top: 223px;
			right: 0px;
			cursor: pointer;
		}
		.left-top {
			width: 100%;
			height: 48px;
			position: relative;
			border-bottom: 1px solid rgb(234, 236, 238);
			img {
				width: 18px;
				height: 18px;
				position: absolute;
				top: 15px;
				left: 23px;
			}
			span {
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				position: absolute;
				top: 19px;
				right: 40px;
				color: rgb(5, 95, 194);
				cursor: pointer;
			}
			.left-top-title {
				margin-left: 60px;
				width: 152px;
				height: 48px;
				background-color: rgb(5, 95, 194);
				color: #fff;
				font-size: 20px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 26px;
				text-align: center;
				padding: 11px 16px;
			}
		}
		.left-center {
			width: 967px;
			height: 208px;
			margin-top: 33px;
			margin-left: 62px;
			border-bottom: 1px solid rgb(234, 236, 238);
			position: relative;
			img {
				width: 148px;
				height: 148px;
				margin-right: 21px;
			}
			display: flex;
			.left-center-main {
				width: 439px;
				height: 175px;
				.left-center-main-title {
					margin-left: 19px;
					margin-bottom: 17px;
					font-size: 20px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					color: rgb(5, 95, 194);
				}
				.left-center-main-ul {
					width: 439px;
					height: 132px;
					ul {
						list-style-position: inside;
						li {
							width: 100%;
							height: 24px;
							margin-bottom: 12px;
							.ul-title {
								display: inline-block;
								width: 120px;
								height: 24px;
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(59, 65, 75);
							}
							.ul-content {
								color: rgb(59, 65, 75);
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
							}
							.ul-pie {
								display: inline-block;
								box-sizing: border-box;
								padding: 2px 8px;
								border: 1px solid;
								border-radius: 4px;
								margin-right: 8px;
							}
							.cl1 {
								border-color: rgba(186, 224, 255, 1);
								background-color: rgba(230, 244, 255, 1);
								color: rgba(22, 119, 255, 1);
							}
							.cl2 {
								border-color: rgba(255, 163, 158, 1);
								background-color: rgba(255, 241, 240, 1);
								color: rgba(245, 34, 45, 1);
							}
							.cl3 {
								border-color: rgba(135, 232, 222, 1);
								background-color: rgba(230, 255, 251, 1);
								color: rgba(19, 168, 168, 1);
							}
						}
					}
				}
			}
			.left-center-title {
				padding: 3px 8px 5px;
				height: 32px;
				border-radius: 4px;
				background-color: rgba(231, 243, 255, 1);
				font-size: 18px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(5, 95, 194);
				position: absolute;
				right: 0px;
				top: -1px;
			}
		}
		.left-bottom {
			margin: 17px 0 0 62px;
			ul {
				list-style-position: inside;
				.left-bottom-li {
					font-size: 16px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(59, 65, 75);
					margin-bottom: 10px;
				}
			}
			.left-bottom-content {
				width: 943px;
				margin-left: 22px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 30px;
				color: rgb(59, 65, 75);
			}
		}
	}
	.right {
		width: 520px;
		height: 460px;
		border-radius: 10px;
		background-color: #fff;
		border: 1px solid rgb(234, 236, 238);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		position: relative;
		.right-top {
			width: 520px;
			height: 48px;
			border-bottom: 1px solid rgb(234, 236, 238);
			position: relative;
			img {
				width: 21px;
				height: 16.84px;
				position: absolute;
				top: 15.1px;
				left: 19.5px;
			}
			.right-top-title {
				padding: 11px 16px;
				width: 148px;
				height: 48px;
				background-color: rgb(206, 79, 81);
				font-size: 20px;
				font-family: "Microsoft YaHei";
				font-weight: 700;
				line-height: 26px;
				text-align: center;
				color: #fff;
				margin-left: 60px;
				span {
					display: inline-block;
					width: 24px;
					height: 20px;
					background-color: rgba(255, 255, 255, 0.3);
					font-size: 14px;
					font-family: "Microsoft YaHei";
					font-weight: 400;
					line-height: 22px;
					text-align: center;
					color: #fff;
					border-radius: 100px;
				}
			}
		}
		.right-main {
			width: 468px;
			padding-right: 5px;
			height: 47px;
			border-radius: 2px;
			display: flex;
			align-items: center;
			cursor: pointer;
			&:hover {
				background: var(--color-bg-hover);
			}
			.main-left {
				width: 40px;
				height: 40px;
				margin: 4px 13px 3px 2px;
				border-radius: 50%;
				font-size: 12px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 14px;
				padding: 6px 4px;
				text-align: center;
			}
			.cl4 {
				background-color: rgba(255, 241, 240, 1);
				color: rgb(206, 79, 81);
			}
			.cl5 {
				background-color: rgba(255, 247, 230, 1);
				color: rgba(250, 140, 22, 1);
			}
			.main-center {
				width: 347px;
				height: 30px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 30px;
				color: rgb(59, 65, 75);
				margin-right: 2px;
			}
			.main-right {
				width: 60px;
				height: 24px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(132, 136, 142);
				text-align: right;
			}
		}
		.right-mainbtn {
			width: 460px;
			height: 42px;
			border-radius: 6px;
			position: absolute;
			left: 26px;
			bottom: 21px;
			background-color: rgb(5, 95, 194);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			img {
				width: 16px;
				height: 16px;
				margin-right: 8px;
			}
			font-size: 16px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 24px;
		}
	}
}
</style>
