<template>
	<div class="coop-page">
		<!-- 吸顶简易搜索框 -->

		<!-- 面包屑 -->
		<!-- <div class="breadcrumb" v-show="!isShow">
			<div class="header-left">
				<HeaderMenu></HeaderMenu>
			</div>
			<div class="header-right">
				<headerInfo curTitleName="合作限制"></headerInfo>
			</div>
		</div> -->
		<!-- 主页面 -->
		<div class="main-content" ref="homeMainRef" :class="{ 'scroll-main': isShow }">
			<div class="home-top-bg"></div>
			<!-- 搜索栏部分 -->
			<SearchContainer v-if="homeMainRef" placeholder="搜索合作限制" :containerRef="homeMainRef" areaName="" />

			<!-- 最新动态 -->
			<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, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router";
import HeaderMenu from "@/components/headerMenu.vue";
import headerInfo from "@/components/headerInfo.vue";
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 { useContainerScroll } from "@/hooks/useScrollShow";

// 搜索框
const input = ref("");
const homeMainRef = ref(null);
const { isShow } = useContainerScroll(homeMainRef);

const router = useRouter();

// 搜索功能
const handleSearch = () => {
	console.log("搜索内容：", input.value);
};

// 锚点跳转
const handleToPosi = id => {
	const element = document.getElementById(id);
	if (element && homeMainRef.value) {
		// 如果当前还未显示吸顶搜索栏，先强制切换状态以稳定布局
		if (!isShow.value) {
			isShow.value = true;
		}

		// 使用 nextTick 确保 DOM 状态更新（高度变化生效）后再计算
		nextTick(() => {
			const containerRect = homeMainRef.value.getBoundingClientRect();
			const elementRect = element.getBoundingClientRect();
			// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离，不受嵌套布局影响
			const top = elementRect.top - containerRect.top + homeMainRef.value.scrollTop;

			homeMainRef.value.scrollTo({
				top: top,
				behavior: "smooth"
			});
		});
	}
};
</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: 0 160px;
	// 	display: flex;
	// 	justify-content: space-between;
	// }

	.main-content {
		position: relative;
		overflow: hidden;
		overflow-y: auto;
		width: 100%;
		height: 100%;
		// background: url("./assets/images/background.png");
		// background-size: 100% 100%;
		padding: 44px 0 30px 0;

		.home-top-bg {
			background:
				url("./assets/images/background.png"),
				linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
			background-size: 100% 100%;
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: -100;
			top: -64px;
		}

		.search {
			width: 960px;
			height: 168px;
			margin: 0 auto 68px 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 transparent;

				&:hover {
					border: 1px solid var(--color-main-active);
				}

				.search-input {
					border: none;
					outline: none;
					width: 838px;
					height: 48px;
					background-color: transparent;
					font-size: 16px;
					padding: 12px 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgba(59, 65, 75, 1);

					&::placeholder {
						color: #a8abb2;
					}
				}

				.search-btn {
					margin-right: -3px;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120px;
					height: 46px;
					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: 440px;
				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: 120px;
						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;
				margin-top: 36px;
				display: flex;
				justify-content: space-between;

				// gap: 16px;
				.btn {
					display: flex;
					align-items: center;
					gap: 9px;
					width: 160px;
					height: 48px;
					border: 1px solid #aed6ff;
					box-sizing: border-box;
					border-radius: 24px;
					background: #e7f3ff;
					cursor: pointer;
					position: relative;

					&:hover {
						background: #cae3fc;
					}

					.btn-text {
						width: 80px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
						line-height: 48px;
						margin-left: 36px;
						text-align: center;
					}

					.btn-icon {
						position: absolute;
						top: 16px;
						right: 19px;
						width: 6px;
						height: 12px;

						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.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: 538px;
			margin: 0 auto 88px auto;

			.datasub-main {
				width: 1600px;
				height: 460px;
				margin-top: 36px;
			}
		}

		.reslib {
			width: 1600px;
			height: 1633px;
			margin: 0 auto 0px auto;

			.reslib-main {
				width: 1600px;
				height: 1565px;
				margin-top: 26px;
			}
		}
	}

	.search-header {
		width: 100%;
		height: 144px;
		background: #fff;
		box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
		overflow: hidden;

		.home-main-header-center {
			margin-top: 20px;
			margin-left: 200px;
			width: 800px;
			height: 48px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
			background: rgba(255, 255, 255, 1);
			box-sizing: border-box;
			padding: 1px;
			position: relative;
			border: 1px solid transparent;
			display: flex;
			align-items: center;

			&:hover {
				border: 1px solid var(--color-main-active);
			}

			.search-input {
				border: none;
				outline: none;
				width: 800px;
				height: 46px;
				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-small {
				position: absolute;
				right: -1px;
				top: 0px;
				width: 120px;
				height: 46px;
				border-radius: 10px;
				background: var(--color-main-active);
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;

				.search-icon {
					width: 18px;
					height: 18px;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.search-text {
					margin-left: 8px;
					height: 22px;
					color: #fff;
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 22px;
				}
			}
		}

		.home-main-header-btn-box {
			margin-top: 20px;
			margin-left: 200px;
			display: flex;
			gap: 16px;

			.btn {
				display: flex;
				align-items: center;
				gap: 9px;
				width: 160px;
				height: 48px;
				border: 1px solid #aed6ff;
				box-sizing: border-box;
				border-radius: 24px;
				background: #e7f3ff;
				cursor: pointer;
				position: relative;

				&:hover {
					background: #cae3fc;
				}

				.btn-text {
					width: 80px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: 400;
					line-height: 48px;
					margin-left: 36px;
					text-align: center;
				}

				.btn-icon {
					position: absolute;
					top: 16px;
					right: 19px;
					width: 6px;
					height: 12px;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.scroll-main {
		height: calc(100% - 144px) !important;
	}
}
</style>
