<template>
	<div class="search-box">
		<div class="search-header-container">
			<div class="home-main-header-center">
				<el-input
					v-model="store.searchBillText"
					@keyup.enter="handleSearch"
					style="width: 680px; height: 100%"
					:placeholder="store.searchData.placeholder"
				/>
				<div class="search">
					<div class="search-icon">
						<img src="@/assets/icons/search-icon.png" alt="" />
					</div>
					<div class="search-text" @click="handleSearch">搜索</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>
</template>

<script setup>
import { onMounted, ref, computed, onUnmounted, nextTick, watch, watchEffect } from "vue";
import router from "@/router/index";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";

const store = useWrittingAsstaintStore();
const handleSearch = () => {
	window.sessionStorage.setItem("curTabName", `搜索-${store.searchBillText}`);
	const curRoute = router.resolve({
		path: "/searchResults",
		query: {
			searchText: store.searchBillText,
			areaName: store.searchData.areaName
		}
	});
	window.open(curRoute.href, "_blank");
};
let containerRef = computed(() => store.searchData.containerRef);
const handleToPosi = id => {
	const element = document.getElementById(id);
	if (element && containerRef.value) {
		// 2. 使用 nextTick 等待 DOM 布局（如高度切换）完成后再进行坐标计算
		nextTick(() => {
			const containerRect = containerRef.value.getBoundingClientRect();
			const elementRect = element.getBoundingClientRect();
			// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离
			const top = elementRect.top - containerRect.top + containerRef.value.scrollTop;

			containerRef.value.scrollTo({
				top: top,
				behavior: "smooth"
			});
		});
	}
};
</script>

<style lang="scss" scoped>
.search-box {
	width: 100%;
	// background: #fff;
	// box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
	.search-header-container {
		width: 100%;
		margin: 0 auto;
		// padding: 16px 0px 16px 0px;
	}
	.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);
		border: 1px solid var(--color-primary-35);
		background: rgba(255, 255, 255, 1);
		box-sizing: border-box;
		padding: 1px;
		position: relative;
		&:hover {
			border: 1px solid var(--color-main-active);
		}
		.search {
			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: 16px;
		// margin-left: 200px;
		display: flex;
		gap: 16px;
		.btn {
			display: flex;
			align-items: center;
			gap: 9px;
			width: 140px;
			height: 36px;
			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: 24px;
				text-align: center;
			}
			.btn-icon {
				position: absolute;
				top: 10px;
				right: 19px;
				width: 6px;
				height: 12px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
