<template>
	<div class="search-container" v-show="!isShow">
		<div class="search-type-tabs" v-if="enableBillTypeSwitch">
			<div
				class="search-type-tab"
				:class="{ active: billSearchType === 'federal' }"
				@click="handleChangeBillSearchType('federal')"
			>
				联邦议会
			</div>
			<div
				class="search-type-tab"
				:class="{ active: billSearchType === 'state' }"
				@click="handleChangeBillSearchType('state')"
			>
				州议会
			</div>
		</div>
		<div class="search-main" :class="{ 'search-main-with-tabs': enableBillTypeSwitch }">
			<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 } from "vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import { useRouter } from "vue-router";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";

const store = useWrittingAsstaintStore();
const router = useRouter();

const { countInfo, containerRef, placeholder, areaName, enableBillTypeSwitch, defaultBillSearchType } = defineProps({
	countInfo: {
		type: Array,
		default: () => []
	},
	containerRef: {
		type: Object,
		default: {}
	},
	placeholder: {
		type: String,
		default: ""
	},
	areaName: {
		type: String,
		default: "法案"
	},
	// 法案页专用：是否展示“联邦议会/州议会”搜索类型切换
	// 其他页面默认 false，不受影响
	enableBillTypeSwitch: {
		type: Boolean,
		default: false
	},
	// 法案页专用：默认搜索类型
	// 可选值：'federal'（联邦议会）| 'state'（州议会）
	defaultBillSearchType: {
		type: String,
		default: "federal"
	}
});

// 法案搜索类型状态（仅在 enableBillTypeSwitch=true 时生效）
// 维护说明：
// - federal: 联邦议会
// - state: 州议会
const billSearchType = ref(defaultBillSearchType === "state" ? "state" : "federal");

const handleChangeBillSearchType = type => {
	billSearchType.value = type;
};

const handleSearch = () => {
	window.sessionStorage.setItem("curTabName", `搜索-${store.searchBillText}`);
	if (!areaName) return;

	const query = {
		searchText: store.searchBillText,
		areaName: areaName
	};

	// 法案页附带搜索类型参数，便于搜索结果页后续按类型处理
	if (enableBillTypeSwitch) {
		query.billSearchType = billSearchType.value;
	}

	const curRoute = router.resolve({
		path: "/searchResults",
		query
	});
	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-type-tabs {
		display: flex;
		align-items: flex-end;
		height: 41px;
		gap: 2px;

		.search-type-tab {
			width: 176px;
			height: 41px;
			line-height: 48px;
			text-align: center;
			border-radius: 10px 10px 0 0;
			border: 1px solid rgb(255, 255, 255);
			border-bottom: none;
			background: rgba(255, 255, 255, 0.65);
			color: rgb(95, 101, 108);
			font-family: Microsoft YaHei;
			font-size: 18px;
			font-weight: 700;
			line-height: 41px;
			cursor: pointer;
			padding: 0 16px;
			box-sizing: border-box;
		}

		.search-type-tab.active {
			background: rgba(231, 243, 255, 1);
			color: rgb(5, 95, 194);
			border-color: rgb(255, 255, 255);
		}
	}

	.search-main-with-tabs {
		border-top-left-radius: 0 !important;
	}

	.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>
