<template>
	<div class="search-container" v-show="!isShow">
		<div class="search-main">
			<input v-model="store.searchBillText" :placeholder="placeholder" @keyup.enter="handleSearch"
				class="search-input" />
			<div class="search-btn" @click="handleSearch">
				<img src="@/assets/icons/search-icon.png" alt />
				搜索
			</div>
		</div>
		<div class="search-center" v-if="countInfo.length">
			<div class="search-item" v-for="info in countInfo">
				<div class="search-item-num">{{ info.count }}</div>
				<div class="search-item-name">{{ info.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>
</template>

<script setup>
import { ref, nextTick, watchEffect, onMounted } from "vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import { useRouter } from "vue-router";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";

const store = useWrittingAsstaintStore();
const router = useRouter();
let { countInfo, containerRef, placeholder, areaName } = defineProps({
	countInfo: {
		type: Array,
		default: () => []
	},

	containerRef: {
		type: Object,
		default: {}
	},
	placeholder: {
		type: String,
		default: ""
	},
	areaName: {
		type: String,
		default: "法案"
	}
});
const handleSearch = () => {
	window.sessionStorage.setItem("curTabName", `搜索-${store.searchBillText}`);
	if (!areaName) return;

	const curRoute = router.resolve({
		path: "/searchResults",
		query: {
			searchText: store.searchBillText,
			areaName: areaName
		}
	});
	window.open(curRoute.href, "_blank");
};
let homeMainRef = ref(containerRef);

const { isShow } = useContainerScroll(homeMainRef);

watchEffect(() => {
	if (isShow.value) {
		homeMainRef.value.classList.add("scroll-main");
		homeMainRef.value.classList.add("scrollHomeMain");

	} else {
		homeMainRef.value.classList.remove("scroll-main");
		homeMainRef.value.classList.remove("scrollHomeMain");

	}

	store.changeIsShowSearchBar(isShow.value);
});

store.setSearchData({ placeholder, areaName, containerRef: homeMainRef });
// 锚点跳转
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 lang="scss" scoped>
.search-container {
	width: 960px;
	height: 168px;
	margin: 0 auto 68px auto;

	.search-center {
		width: 688px;
		height: 48px;
		margin: 0 auto;
		margin-top: 36px;
		display: flex;
		justify-content: space-between;

		.search-item {
			width: 130px;
			height: 57px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.search-item-num {
				font-family: Microsoft YaHei;
				font-style: Bold;
				font-size: 36px;
				font-weight: 700;
				line-height: 22px;
				letter-spacing: 0px;
				text-align: center;
				color: rgba(5, 95, 194, 1);
			}

			.search-item-name {
				font-family: Microsoft YaHei;
				font-style: Regular;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: center;
				color: rgba(95, 101, 108, 1);
			}
		}
	}

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