<!--ZM博弈概览页-->
<template>
	<div class="home-wrapper">
        <img :src="background" alt="" class="background-img">
		<div class="home-header">
			<div class="header-left">
				<HeaderMenu></HeaderMenu>
			</div>
			<div class="header-right">
				<div class="header-search-box">
					<div class="header-search-left">
						<div class="input-box">
							<el-input v-model="searchText" @keyup.enter="handleSearch" />
						</div>
						<div class="icon" @click="handleSearch">
							<img src="./assets/images/search-icon.png" alt="" />
						</div>
					</div>
					<div class="header-search-right" @click="handleToSearch">
						<div class="header-img-box"><img src="./assets/images/search-btn.png" alt="" /></div>
					</div>
				</div>
			</div>
		</div>
        <div class="data-select">
            <div 
                v-for="item in dateList" 
                :key="item.type" 
                class="date-item" 
                :class="{ active: activeDate === item.type }"
                @click="handleDateClick(item.type)"
            >
                <img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
                <span>{{ item.name }}</span>
            </div>
        </div>
		<div class="content-box">
            <!-- 导航栏 -->
            <div class="content-nav">
                <div class="nav-title">中美科技博弈概览</div>
                <div class="nav-btn">
					<div v-for="item in navList" :key="item.name" class="btn-item" @click="handleScrollTo(item.id)">
						<span>{{ item.name }}</span>
						<img :src="right" alt="" />
					</div>
				</div>
            </div>
            <!-- 最新风险动态 -->
            <commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px;"></commonTitle>
			<newRisk></newRisk>
            <!-- 最新科技要闻 -->
            <!-- <commonTitle id="tech-news" title="最新科技要闻" style="margin-top: 64px;"></commonTitle> -->
            <!-- 美对华“四全”打压 -->
            <commonTitle id="us-pressure" title="美对华“四全”打压" style="margin-top: 64px;"></commonTitle>
			<fourSuppress></fourSuppress>
            <!-- 中美博弈概况 -->
            <commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px;"></commonTitle>
			<gameProfile></gameProfile>
        </div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import background from "./assets/images/backgroundBT.png"
import HeaderMenu from "@/components/headerMenu.vue";
import right from "./assets/icons/right.png"
import commonTitle from "./commonTitle/comTitle.vue"
import week from "./assets/icons/week.png"
import weekActive from "./assets/icons/week-active.png"
import month from "./assets/icons/month.png"
import monthActive from "./assets/icons/month-active.png"
import year from "./assets/icons/year.png"
import yearActive from "./assets/icons/year-active.png"
// 组件引入
import newRisk from "./components/newRisk/index.vue"
import fourSuppress from "./components/fourSuppress/index.vue"
import gameProfile from "./components/gameProfile/index.vue"



const router = useRouter();

const navList = ref([
	{ name: "最新风险动态", id: "risk-dynamic" },
	{ name: "最新科技要闻", id: "tech-news" },
	{ name: "美对华“四全”打压", id: "us-pressure" },
	{ name: "中美博弈概况", id: "zm-overview" }
]);

const handleScrollTo = (id) => {
	const element = document.getElementById(id);
	const container = document.querySelector('.content-box');
	if (element && container) {
		const targetOffsetTop = element.offsetTop - container.offsetTop;
		container.scrollTo({
			top: targetOffsetTop, 
			behavior: "smooth"
		});
	}
};

const searchText = ref("");
const handleSearch = () => {
	if (!searchText.value.trim()) {
		ElMessage.warning("请输入搜索关键词");
		return;
	}
	const curRoute = router.resolve({
		path: "/searchResults",
		query: {
			searchText: searchText.value.trim()
		}
	});
	window.open(curRoute.href, "_blank");
};
// 跳转到综合检索页面
const handleToSearch = () => {
	const route = router.resolve("/comprehensiveSearch");
	window.open(route.href, "_blank");
};

const dateList = ref([
	{ name: "本周", type: "week", icon: week, activeIcon: weekActive },
	{ name: "本月", type: "month", icon: month, activeIcon: monthActive },
	{ name: "今年", type: "year", icon: year, activeIcon: yearActive }
]);
const activeDate = ref("week");
const handleDateClick = (type) => {
	activeDate.value = type;
};
</script>

<style lang="scss" scoped>
.home-wrapper {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
    position: relative;
    .data-select {
        width: 120px;
        height: 144px;
        position: absolute;
        top: 291px;
        left: 0;
        background-color: rgba(255, 255, 255, 0.65);
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        padding: 2px 2px 2px 0px;
        box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        z-index: 10;

        .date-item {
            display: flex;
            align-items: center;
            padding-left: 18px;
            height: 46px;
            cursor: pointer;
            // transition: all 0.3s;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;

            img {
                width: 18px;
                height: 18px;
                margin-right: 18px;
            }

            span {
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 30px;
                color: rgb(95, 101, 108);
            }

            &.active {
                background-color: rgba(231, 243, 255, 1);
                span {
                    font-weight: 700;
                    color: rgb(5, 95, 194);
                }
            }
        }
    }
    .background-img {
        width: 100%;
        height: 700px;
        position: absolute;
        top: 64px;
        left: 0;
        z-index: -1;
    }
	.home-header {
		height: 64px;
		flex-shrink: 0;
		z-index: 100;
		background: url("./assets/images/header-bg.png") no-repeat center center;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 0 160px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.header-right {
			.header-search-box {
				display: flex;
				gap: 12px;
				justify-content: flex-end;

				.header-search-left {
					width: 360px;
					height: 36px;
					line-height: 36px;
					border-radius: 4px;
					background: rgba(255, 255, 255, 0.3);
					display: flex;

					.input-box {
						width: 324px;
						:deep(.el-input) {
							.el-input__wrapper {
								background-color: transparent !important;
								box-shadow: none !important;
								padding: 0 12px;
							}
							.el-input__inner {
								color: #fff;
								height: 36px;
								line-height: 36px;
								&::placeholder {
									color: rgba(255, 255, 255, 0.6);
								}
							}
						}
					}

					.icon {
						width: 36px;
						height: 36px;
						border-radius: 4px;
						cursor: pointer;
						&:hover {
							background: rgba(255, 255, 255, 0.5);
						}

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

				.header-search-right {
					width: 36px;
					height: 36px;
					line-height: 36px;
					border-radius: 4px;
					background: rgba(255, 255, 255, 0.3);
					cursor: pointer;

					.header-img-box {
						width: 19px;
						height: 24px;
						margin: 5px auto;

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

	.content-box {
		flex: 1;
		width: 100%;
		overflow-y: auto;
		padding: 48px 160px;
        .content-nav {
            .nav-title {
                font-size: 48px;
                font-weight: 400;
                line-height: 62px;
                letter-spacing: 0px;
                text-align: center;
                color: rgb(5, 95, 194);
                font-family: YouSheBiaoTiHei;
                margin-bottom: 14px;
            }

            .nav-btn {
                display: flex;
                justify-content: center;
                gap: 16px;

                .btn-item {
                    display: flex;
                    align-items: center;
                    padding: 10px 24px 10px 32px;
                    background: #ffffff;
                    border: 1px solid rgba(255, 255, 255, 1);
                    border-radius: 50px;
                    box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
                    cursor: pointer;
                    transition: all 0.3s;

                    // &:hover {
                    //     background: rgba(255, 255, 255, 0.8);
                    //     transform: translateY(-2px);
                    // }

                    span {
                        font-family: Microsoft YaHei;
                        font-size: 20px;
                        font-weight: 400;
                        line-height: 26px;
                        color: rgb(5, 95, 194);
                        margin-right: 16px;
                    }

                    img {
                        width: 6px;
                        height: 12px;
                    }
                }
            }
        }
	}
}
</style>
