<script setup lang="ts">
// 移动端菜单展开状态
const route = useRoute()
const router = useRouter()
const {$isMobile} = useNuxtApp()

const routeData = computed(() => {
    return {
        path: route.path,
        query: route.query,
        queryParams: {},
        hash: route.hash,
    }
})
const menuExpandStatus = ref(false)
const handleMenuExpandCilck = () => {
    if(!menuExpandStatus.value) {
        router.push({hash: '#menuOpen'})
    }else{
        router.push({hash: ''})
    }
}
const handleMenuExpandStatusChange = () => {
    nextTick(() => {
        if(routeData.value.hash == '#menuOpen'){
            menuExpandStatus.value = true
        }
        if(routeData.value.hash !== '#menuOpen'){
            menuExpandStatus.value = false
        }
    })
}
watch(routeData, () => {
    handleMenuExpandStatusChange()
})
onMounted(() => {
    handleMenuExpandStatusChange()
})
</script>

<template>
    <header class="homeHeader relative flex">
        <div class="logoContainer">
            <nuxt-link  to="/home" class="cursor-pointer">
                <Logo/>
            </nuxt-link>
        </div>
        <nav>
            <div class="menuBarIcon" @click="handleMenuExpandCilck"/>
            <HomeMenu @click="handleMenuExpandCilck" :menuExpandStatus/>
        </nav>
        <div class="infoContainer">
            <div class="menuBarIcon"></div>
        </div>
    </header>
</template>

<style scoped lang="scss">


/* 手机端 */
@media (max-width: 767px) {
    .homeHeader {
        position: relative;
        height: 2.5rem;
        background: var(--header-bg-color);
        user-select: none;

        div.logoContainer{
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-color-bd);
        }

        nav > div.menuBarIcon{
            position: absolute;
            left: 0;
            top: 0;
            &::before{
                position: relative;
                height: 2.5rem;
                font-family: "cocoIconFont" !important;
                content: "\e661";
                color: var(--color-text);
                font-size: 1.6rem;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 2.5rem;
            }
        }

        div.infoContainer > div.menuBarIcon{
            position: absolute;
            right: 0;
            top: 0;
            &::before{
                position: relative;
                height: 2.5rem;
                font-family: "cocoIconFont" !important;
                content: "\e678";
                color: var(--color-text);
                font-size: 1.6rem;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 2.5rem;
            }
        }
    }
}
/* 平板及以上 */
@media (min-width: 768px) {
    .homeHeader {
        position: relative;
        display: flex;
        height: 4rem;
        background: var(--header-bg-color);
        border-bottom: 1px solid var(--bg-color-be);
        user-select: none;
        & > * {
            position: relative;
            height: 100%;
        }

        div.logoContainer{
            //flex: 1;
        }

        nav{
            flex-shrink: 0;
            width: var(--main-width-auto);
        }

        div.infoContainer{
            flex: 1;
        }
    }
}
</style>
