<template>
	<div class="coop-page">
		<!-- 面包屑 -->
		<div class="breadcrumb">
			<div class="breadcrumb-box">
				<div class="breadcrumb-item">国家科技安全</div>
				<div class="breadcrumb-item">&nbsp;>&nbsp;</div>
				<div class="breadcrumb-item back-item" @click="handleBackHome">中美博弈概览</div>
				<div class="breadcrumb-item">&nbsp;>&nbsp;</div>
				<div class="breadcrumb-item">科研资助体系</div>
			</div>
		</div>
		<!-- 主页面 -->
		<div class="main-content">
			<!-- 搜索栏部分 -->
			<div class="search">
				<div class="search-main">
					<input v-model="input" placeholder="搜索科研资助实体、资助记录" class="search-input" />
					<div class="search-btn">
						<img src="./assets/icons/search-icon.png" alt="" />
						搜索
					</div>
				</div>
				<div class="search-center">
					<div class="search-item">
						<div class="search-item-num">18</div>
						<div class="search-item-name">科研资助机构</div>
					</div>
					<div class="search-item">
						<div class="search-item-num">633</div>
						<div class="search-item-name">科研资助动态</div>
					</div>
					<div class="search-item">
						<div class="search-item-num">312</div>
						<div class="search-item-name">科研资助项目</div>
					</div>
					<div class="search-item">
						<div class="search-item-num">15,556</div>
						<div class="search-item-name">经费总额(亿美元)</div>
					</div>
				</div>
				<div class="search-bottom">
					<div class="btn" @click="scrollToTop('position1')">
						<div class="btn-text">最新动态</div>
						<div class="btn-icon">></div>
					</div>
					<div class="btn" @click="scrollToTop('position2')">
						<div class="btn-text">咨询要闻</div>
						<div class="btn-icon">></div>
					</div>
					<div class="btn" @click="scrollToTop('position3')">
						<div class="btn-text">数据总览</div>
						<div class="btn-icon">></div>
					</div>
					<div class="btn" @click="scrollToTop('position4')">
						<div class="btn-text">资源库</div>
						<div class="btn-icon">></div>
					</div>
				</div>
			</div>
			<!-- 6个数据 -->
			<div class="data">
				<div v-for="item in dataList" :key="item.id" class="data-item">
					<img :src="item.image" alt="" />
					<div class="data-item-title">{{ item.title }}</div>
					<div class="data-item-name">{{ item.name }}</div>
					<div class="data-item-abb">{{ item.abb }}</div>
					<div class="data-item-num" :style="{ color: item.color }">{{ item.num }}</div>
				</div>
			</div>
			<!-- 最新动态 -->
			<div class="newdata" id="position1">
				<com-title title="最新动态" />
				<div class="newdata-main">
					<newData />
				</div>
			</div>
			<!-- 资讯要问 -->
			<div class="ask" id="position2">
				<com-title title="咨询要闻" />
				<div class="ask-main">
					<askPage />
				</div>
			</div>
			<!-- 数据总览 -->
			<div class="datasub" id="position3">
				<com-title title="数据总览" />
				<div class="datasub-main">
					<dataSub />
				</div>
			</div>
			<!-- 资源库 -->
			<div class="reslib" id="position4">
				<com-title title="资源库" />
				<div class="reslib-main">
					<resLib />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import comTitle from "./common/comTitle.vue";
import newData from "./components/dataNew/index.vue";
import askPage from "./components/askPage/index.vue";
import dataSub from "./components/dataSub/index.vue";
import resLib from "./components/resLib/index.vue";

import scrollToTop from "@/utils/scrollToTop";

import { useContainerScroll } from "@/hooks/useScrollShow";

import img01 from "./assets/images/img01.png";
import img02 from "./assets/images/img02.png";
import img03 from "./assets/images/img03.png";
import img04 from "./assets/images/img04.png";
import img05 from "./assets/images/img05.png";
import img06 from "./assets/images/img06.png";

// 搜索框
const input = ref("");

const router = useRouter();
// 返回首页
const handleBackHome = () => {
	router.push({
		path: "/overview"
	});
};
// 固定数据
const dataList = ref([
	{
		id: 1,
		title: "NSF",
		name: "美国国家科学基金会",
		abb: "National Science Foundation",
		num: "218项",
		image: img01,
		color: "rgb(206, 79, 81)"
	},
	{
		id: 2,
		title: "DARPA",
		name: "美国国防高级研究计划局",
		abb: "Defense Advanced Research Projects Agency",
		num: "95项",
		image: img02,
		color: "rgba(114, 46, 209, 1)"
	},
	{
		id: 3,
		title: "NIH",
		name: "美国国立卫生研究院",
		abb: "National Institutes of Health",
		num: "90项",
		image: img03,
		color: "rgba(19, 168, 168, 1)"
	},
	{
		id: 4,
		title: "NASA",
		name: "美国国家航空航天局",
		abb: "National Aeronautics and Space...",
		num: "42项",
		image: img04,
		color: "rgba(64, 150, 255, 1)"
	},
	{
		id: 5,
		title: "DOE",
		name: "美国能源部",
		abb: "Department of Energy",
		num: "95项",
		image: img05,
		color: "rgb(33, 129, 57)"
	},
	{
		id: 6,
		title: "NIST",
		name: "国家标准与技术研究院",
		abb: "National Institute of Standards and ...",
		num: "218项",
		image: img06,
		color: "rgb(5, 95, 194)"
	}
]);
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.coop-page {
	width: 100%;
	height: 100%;
	.breadcrumb {
		width: 100%;
		height: 64px;
		background-image: url("./assets/images/bread-bg.png");
		background-size: cover;
		padding: 17px 0px 21px 0px;
		.breadcrumb-box {
			margin-left: 160px;
			display: flex;
			// align-items: center;
			.breadcrumb-item {
				font-size: 20px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 30px;
				color: #fff;
			}
			.back-item {
				cursor: pointer;
				&:hover {
					color: #999;
				}
			}
		}
	}
	.main-content {
		overflow: auto;
		width: 100%;
		height: calc(100% - 64px);
		background: url("./assets/images/background.png");
		background-size: 100% 100%;
		padding: 44px 160px 30px 160px;
		.search {
			width: 960px;
			height: 225px;
			margin: 0 auto 52px auto;
			.search-main {
				display: flex;
				padding-right: 3px;
				align-items: center;
				justify-content: space-between;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				width: 960px;
				height: 48px;
				background-color: rgba(255, 255, 255, 0.65);
				border-radius: 10px;
				border: 1px solid #fff;
				&:hover {
					border: 1px solid var(--color-main-active);
				}
				.search-input {
					border: none;
					outline: none;
					width: 800px;
					height: 48px;
					background-color: transparent;
					font-size: 16px;
					padding: 12px 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(132, 136, 142);
				}
				.search-btn {
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120px;
					height: 46px;
					margin-right: -3px;
					border-radius: 8px;
					background-color: rgb(5, 95, 194);
					font-size: 18px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: #fff;
					img {
						width: 22px;
						height: 22px;
						margin-right: 8px;
					}
				}
			}
			.search-center {
				width: 680px;
				height: 57px;
				margin: 36px auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.search-item {
					box-sizing: border-box;
					width: 120px;
					height: 57px;
					.search-item-num {
						width: 120px;
						height: 22px;
						font-size: 36px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 22px;
						color: rgb(5, 95, 194);
						text-align: center;
						cursor: pointer;
					}
					.search-item-name {
						width: 128px;
						height: 24px;
						margin-top: 11px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(95, 101, 108);
						text-align: center;
					}
				}
			}
			.search-bottom {
				width: 688px;
				height: 48px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				// gap: 16px;
				.btn {
					display: flex;
					width: 160px;
					height: 48px;
					border: 1px solid rgba(174, 214, 255, 1);
					box-sizing: border-box;
					border-radius: 32px;
					justify-content: center;
					align-items: center;
					background: rgba(231, 243, 255, 1);
					position: relative;
					cursor: pointer;
					padding: 10px 40px 12px 36px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					&:hover {
						background: #cae3fc;
					}
					.btn-text {
						color: rgb(5, 95, 194);
						font-family: "Microsoft YaHei";
						font-size: 20px;
						font-weight: 400;
						line-height: 26px;
						height: 26px;
					}
					.btn-icon {
						position: absolute;
						top: 14px;
						right: 19px;
						color: rgb(5, 95, 194);
						font-size: 20px;
						font-weight: 400;
					}
				}
			}
		}
		.data {
			width: 1600px;
			height: 316px;
			margin: 0 auto 64px auto;
			display: flex;
			justify-content: space-between;
			align-content: space-between;
			flex-wrap: wrap;
			.data-item {
				width: 520px;
				height: 150px;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				box-sizing: border-box;
				position: relative;
				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);
				}
				img {
					width: 88px;
					height: 88px;
					position: absolute;
					top: 30px;
					left: 23px;
				}
				.data-item-title {
					position: absolute;
					top: 19px;
					left: 132px;
					font-size: 32px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 42px;
					color: rgb(59, 65, 75);
				}
				.data-item-name {
					position: absolute;
					top: 71px;
					left: 134px;
					font-size: 18px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(95, 101, 108);
				}
				.data-item-abb {
					position: absolute;
					top: 101px;
					left: 134px;
					font-size: 16px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(95, 101, 108);
				}
				.data-item-num {
					position: absolute;
					top: 19px;
					right: 25px;
					font-size: 32px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 42px;
					color: rgb(95, 101, 108);
				}
			}
		}
		.newdata {
			width: 1600px;
			height: 538px;
			margin: 36px auto 64px auto;
			.newdata-main {
				width: 1600px;
				height: 460px;
				margin-top: 36px;
			}
		}
		.ask {
			width: 1600px;
			height: 528px;
			margin: 0 auto 64px auto;
			.ask-main {
				width: 1600px;
				height: 450px;
				margin-top: 36px;
			}
		}
		.datasub {
			width: 1600px;
			height: 1014px;
			margin: 0 auto 88px auto;
			.datasub-main {
				width: 1600px;
				height: 936px;
				margin-top: 36px;
			}
		}
		.reslib {
			width: 1600px;
			height: 1633px;
			margin: 0 auto 0px auto;
			.reslib-main {
				width: 1600px;
				height: 1565px;
				margin-top: 26px;
			}
		}
	}
}
</style>
