<template>
	<div class="data-new">
		<div class="left">
			<img src="./assets/leftbtn.png" alt="" class="left-btn" @click="handleSwithCurDecree('left')" />
			<img src="./assets/rightbtn.png" alt="" class="right-btn" @click="handleSwithCurDecree('right')" />
			<div class="left-top">
				<img src="./assets/icon01.png" alt="" />
				<div class="left-top-title">最新资助项目</div>
				<span>查看详情 ></span>
			</div>
			<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
				indicator-position="none">
				<el-carousel-item v-for="(itemData, indexData) in box1Data" :key="index">
					<div class="left-center">

						<img :src="itemData.logoUrl" alt="" />
						<div class="left-center-main">
							<div class="left-center-main-title">
								{{ itemData.projectName }}
							</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">{{ itemData.publicationDate }}</span>
									</li>
									<li>
										<span class="ul-title">资助经费：</span>
										<span class="ul-content">{{ itemData.amount }}</span>
									</li>
									<li>
										<span class="ul-title">涉及领域：</span>
										<span class="ul-pie cl1" v-for="value in itemData.toOrgNameList">{{ value }}</span>

									</li>
									<li>
										<span class="ul-title">资助对象：</span>
										<span class="ul-content">{{ itemData.fromOrgNameList.join(',') }}</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">{{ itemData.abstractContent }}
						</div>
					</div>
				</el-carousel-item>
			</el-carousel>

		</div>
		<div class="right">
			<div class="right-top">
				<img src="./assets/icon02.png" alt="" />
				<div class="right-top-title">
					风险信号
					<span>{{ list.length }}</span>
				</div>
			</div>
			<div style="margin: 6px 34px 0 23px">
				<div v-for="item, index in list" :key="index" class="right-main">
					<div class="main-left" :class="{
						cl4: item.signalLevel === '特别重大',
						cl5: item.signalLevel === '重大风险',
						cl6: item.signalLevel === '一般风险'
					}">
						{{ item.signalLevel }}
					</div>
					<div class="main-center">{{ item.signalTitle }}</div>
					<div class="main-right">{{ item.signalTime }}</div>
				</div>
			</div>
			<div class="right-mainbtn" @click="handleToMoreRiskSignal">
				<img src="./assets/btn.png" alt="" />
				查看更多
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
	getNewProject, getRiskSignal
} from "@/api/scientificFunding/overview";
import router from "@/router";

const list = ref([
	{
		id: 1,
		title: "特别重大",
		content: "NSF宣布新的“新兴技术体验式学习”计划资...",
		time: "一天前"
	},
	{
		id: 2,
		title: "一般风险",
		content: "美国NASA公布NIAC计划2025年度第一轮资助",
		time: "一天前"
	},
	{
		id: 3,
		title: "特别重大",
		content: "美国NASA公布“早期创新计划”2026年资助...",
		time: "一天前"
	},
	{
		id: 4,
		title: "重大风险",
		content: '美国NIH冻结多所顶尖大学资金引发广泛争议"',
		time: "一天前"
	},
	{
		id: 5,
		title: "重大风险",
		content: "美国NIH终止哥伦比亚大学研究项目拨款引发...",
		time: "一天前"
	},
	{
		id: 6,
		title: "特别重大",
		content: "美国DARPA资助可调控生物功能微系统技术开发",
		time: "一天前"
	}
]);

//// 获取风险信号
const handleGetRiskSignal = async () => {
	try {
		const res = await getRiskSignal();
		console.log("获取风险信号", res);
		if (res.code === 200 && res.data) {
			list.value = res.data
		}
	} catch (error) {
		console.error("获取风险信号error", error);
	}
};

// 查看更多风险信号
const handleToMoreRiskSignal = () => {
	const route = router.resolve("/riskSignal");
	window.open(route.href, "_blank");
};
const box1Data = ref([])
const carouselRef = ref(null);
// 切换当前智库
const handleSwithCurDecree = name => {
	console.log(name, carouselRef.value);
	if (name === "left") {
		carouselRef.value.prev();
	} else {
		carouselRef.value.next();
	}
};
//// 最新资助项目
const handleGetNewProject = async () => {
	try {
		const res = await getNewProject();
		console.log("最新资助项目", res);
		if (res.code === 200 && res.data) {
			box1Data.value = res.data
		}
	} catch (error) {
		console.error("获取最新资助项目error", error);
	}
};

onMounted(async () => {
	handleGetRiskSignal()
	handleGetNewProject()
});
</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;
			z-index: 1000;
		}

		.right-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			top: 223px;
			right: 0px;
			cursor: pointer;
			z-index: 1000;
		}

		.left-top {
			width: 100%;
			height: 48px;
			position: relative;
			border-bottom: 1px solid rgb(234, 236, 238);

			img {
				width: 22px;
				height: 22px;
				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: 156px;
				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: 250px;
			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: 758px;
				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);
							}

							.cl4 {
								border-color: rgba(211, 173, 247, 1);
								background-color: rgba(249, 240, 255, 1);
								color: rgba(114, 46, 209, 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);
			}

			.cl6 {
				background-color: rgba(246, 255, 237, 1);
				color: rgba(82, 196, 26, 1);
			}

			.main-center {
				white-space: nowrap;
				/* 保持在一行内 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 超出部分显示省略号 */
				width: 200px;
				/* 设置一个固定的宽度 */
				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: 115px;
				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>
