<template>
	<div class="coop-page">
		<!-- 吸顶简易搜索框 -->
		<div class="search-header" v-show="isShow">
			<div class="home-main-header-center">
				<input v-model="input" class="search-input" placeholder="搜索规则限制" />
				<div class="search-btn-small" @click="handleSearch">
					<div class="search-icon">
						<img src="./assets/icons/search-icon.png" alt="" />
					</div>
					<div class="search-text">搜索</div>
				</div>
			</div>
			<div class="home-main-header-btn-box">
				<div class="btn" @click="handleToPosi('position1')">
					<div class="btn-text">最新动态</div>
					<div class="btn-icon">
						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
					</div>
				</div>
				<div class="btn" @click="handleToPosi('position2')">
					<div class="btn-text">咨询要闻</div>
					<div class="btn-icon">
						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
					</div>
				</div>
				<div class="btn" @click="handleToPosi('position3')">
					<div class="btn-text">数据总览</div>
					<div class="btn-icon">
						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
					</div>
				</div>
				<div class="btn" @click="handleToPosi('position4')">
					<div class="btn-text">资源库</div>
					<div class="btn-icon">
						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
					</div>
				</div>
			</div>
		</div>

		<!-- 面包屑 -->
		<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="search" v-show="!isShow">
				<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">190</div>
						<div class="search-item-name">规则限制政令</div>
					</div>
					<div class="search-item">
						<div class="search-item-num">125</div>
						<div class="search-item-name">规则限制实体</div>
					</div>
					<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">12</div>
						<div class="search-item-name">排华国家数量</div>
					</div>
				</div> -->
				<div class="search-bottom">
					<div class="btn" @click="handleToPosi('position1')">
						<div class="btn-text">最新动态</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="handleToPosi('position2')">
						<div class="btn-text">咨询要闻</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="handleToPosi('position3')">
						<div class="btn-text">数据总览</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="handleToPosi('position4')">
						<div class="btn-text">资源库</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</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, nextTick } 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 HeaderMenu from "@/components/headerMenu.vue";
import headerInfo from "@/components/headerInfo.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;
		display: flex;
		justify-content: space-between;
		padding: 0 160px;
	}
	.main-content {
		position: relative;
		overflow: auto;
		width: 100%;
		height: calc(100% - 64px);
		background: url("./assets/images/background.png");
		background-size: 100% 100%;
		padding: 44px 160px 30px 160px;

		&.scroll-main {
			height: calc(100% - 144px);
		}

		.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 #fff;
				&:hover {
					border: 1px solid var(--color-main-active);
				}
				.search-input {
					border: none;
					outline: none;
					width: 838px;
					height: 48px;
					background-color: transparent;
					font-size: 14px;
					padding: 12px 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 22px;
					color: rgba(59, 65, 75, 1);

					&::placeholder {
						color: #a8abb2;
					}
				}
				.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: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 22px;
					color: #fff;
					img {
						width: 18px;
						height: 18px;
						margin-right: 8px;
					}
				}
			}
			.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;
			display: flex;
			align-items: center;
			border: 1px solid transparent;

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

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

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

			.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%;
					}
				}
			}
		}
	}
}
</style>
