---
import { getConfig, getExtra } from "../../../utils/config";
import { Image } from 'astro:assets';
import { TP2_COLUMN_ABOUT_US, TP2_COLUMN_ABOUT_US_URL, TP2_COLUMN_CONTACT_US, TP2_COLUMN_CONTACT_US_URL, TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL, TP2_COLUMN_DOWNLOAD, TP2_COLUMN_DOWNLOAD_URL } from "../../../utils/const";
import { extractDirectives } from "astro/runtime/server/hydration.js";
const config = getConfig(Astro)
const extra = getExtra(config.app_extra_tag)
---
<div class="v4 header slide-down-corporation nav-v2 scroll-with-screen" id="header-v4" data-component="header" role="navigation">
    <div id="topTipsBox" class="top-tips-box"></div>

    <input title="main-nav" type="hidden" id="mainNav" value="nav-v2" />
    <div class="v4 n01-main-navigation main-navigation nav-v2" data-component="n01-main-navigation">
        <div class="container main-navigation__container">
            <a title="logo" class="logo" href="/" data-navicon="logo">
                <div>
                    <Image src={config.app_logo} alt="logo" width="25" height="25" loading="eager"/>
                </div>
                <div class="company_name">
                    {config.app_name}
                </div>
            </a>
            <nav class="main-nav" role="presentation">
                <div class="lf-nav nav-zone">
                    <ul class="main-nav__list" role="menubar">

                        <li class="main-nav__item" role="menuitem">
                            <a title={TP2_COLUMN_NEWS} class="main-nav__link unhover title-hide-v5" href={TP2_COLUMN_NEWS_URL}>{TP2_COLUMN_NEWS}</a>
                        </li>

                        <li class="main-nav__item" role="menuitem">
                            <a title={TP2_COLUMN_ABOUT_US} class="main-nav__link unhover title-hide-v5" href={TP2_COLUMN_ABOUT_US_URL}>{TP2_COLUMN_ABOUT_US}</a>
                        </li>

                        <li class="main-nav__item" role="menuitem">
                            <a title={TP2_COLUMN_CONTACT_US} class="main-nav__link unhover title-hide-v5" href={TP2_COLUMN_CONTACT_US_URL}>{TP2_COLUMN_CONTACT_US + extra.app_phone}</a>
                        </li>

                        <li class="main-nav__item" role="menuitem">
                            <a title={TP2_COLUMN_DOWNLOAD} class="main-nav__link unhover title-hide-v5" href={extra.app_download}>{TP2_COLUMN_DOWNLOAD}</a>
                        </li>
                    </ul>
                </div>
                <!-- <div class="rg-nav nav-zone">
                    <ul class="main-nav__list" role="menubar">           
                        <li class="main-nav__item " role="menuitem" tabindex="0">
                            <a title="服务热线" class="main-nav__link unhover title-hide-v5" href="/cn/support/">服务热线888-888</a>
                        </li>
                    </ul>
                </div> -->
            </nav>

            <div class="nav-addons">
                <button id="open-nav" aria-haspopup="true" role="button" aria-expanded="false" class="nav-toggle js-nav-toggle">
                    <span class="btn-line"></span>
                    <span class="sr-only">打开菜单</span>
                    <span class="btn-line"></span>
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    // 确保 DOM 完全加载后再执行代码
    document.addEventListener('DOMContentLoaded', function() {
        // 获取导航栏元素 - 请根据实际情况修改选择器
        const headerNav = document.querySelector('#header-v4');
        const btn = document.getElementById("open-nav");
        const mainNav = document.querySelector('.main-nav');
        // 如果未找到导航栏元素，记录错误并退出
        if (!headerNav) {
            console.error('导航栏元素未找到，请检查选择器是否正确');
            return;
        }
        // 滚动处理函数
        function handleScroll(e) {
            // 获取当前滚动位置
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const headerNav = document.querySelector('#header-v4');
            // 检查滚动位置并更新类名
            if (scrollTop > 1) {
                if (headerNav?.classList.contains('header-scroll')) {
                    return;
                }
                headerNav?.classList.add('header-scroll');
            } else if (scrollTop < 1) {
                headerNav?.classList.remove('header-scroll');
            }
        }
        // 初始调用一次以设置正确的状态
        handleScroll();
        // 添加滚动事件监听器
        window.addEventListener('scroll', handleScroll, true);

        btn?.addEventListener('click', function(e: MouseEvent) {
            e.stopPropagation();
            if (!mainNav || !btn) return;
            const isOpen = mainNav.classList.toggle('main-nav--opened');
            if (isOpen) {
                document.body.style.overflow = 'hidden';
            } else {
                document.body.style.overflow = 'auto';
            }
            
            btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
            btn.classList.toggle('nav-toggle--active', isOpen);
            // 控制 li 显示
            const items = mainNav.querySelectorAll('.main-nav__item');
            items.forEach(item => item.classList.toggle('main-nav__item--visible', isOpen));
            // 原有隐藏逻辑
            const logo = document.querySelector('.main-navigation__container .logo');
            if (logo) logo.classList.add('hide');
            const login = document.querySelector('.nav-addons .nav-addons__link.login-v4-wrap');
            if (login && login instanceof HTMLElement) login.style.display = 'none';
            const bag = document.querySelector('.nav-addons__link.nv-addons__bag');
            if (bag && bag instanceof HTMLElement) bag.style.display = 'none';
            const shopBag = document.querySelector('.nav-addons .shop-bag-bnt');
            if (shopBag && shopBag instanceof HTMLElement) shopBag.style.display = 'none';
            const search = document.querySelector('.nav-addons__link.nav-addons__search');
            if (search && search instanceof HTMLElement) search.style.display = 'none';
        }, false);

        // 点击空白处关闭菜单
        document.addEventListener('click', function(e: MouseEvent) {
            if (!mainNav || !btn) return;
            if (
                mainNav.classList.contains('main-nav--opened') &&
                !(e.target instanceof Element && (e.target.closest('.main-nav') || e.target.closest('#open-nav')))
            ) {
                mainNav.classList.remove('main-nav--opened');
                btn.setAttribute('aria-expanded', 'false');
                btn.classList.remove('nav-toggle--active');
                // 移除 li 显示
                const items = mainNav.querySelectorAll('.main-nav__item');
                items.forEach(item => item.classList.remove('main-nav__item--visible'));
            }
        });
    });
</script>
<style>
    .logo {
        display: flex;
        align-items: center;

        .company_name {
            font-weight: bold;
            margin-left: 0.5rem;
        }
    }
</style>