<template>
    <div class="w1400 header-wrap">
        <div class="logo-toggle">

            <div class="logo">
                <router-link to="/"><span>AI 디지털교과서 통합지원센터</span></router-link>
            </div>
            <input type="checkbox" id="checkbox" v-model="check">
            <label for="checkbox" class="toggle" @click="toggleMenu">
                <div class="bar bar--top"></div>
                <div class="bar bar--middle"></div>
                <div class="bar bar--bottom"></div>
            </label>
            <!-- <i v-if="!isOpened" class="fa-solid fa-bars mobile1" @click="toggleMenu"></i>
            <i v-else class="fa-solid fa-times mobile1" @click="toggleMenu"></i> -->
        </div>
        <!-- 모바일 -->
        <nav class=" sub-nav">
            <ul class="main-sub-menu" :class="{ open: isOpened }">
                <li v-for="menuItem in menuItems" :key="menuItem.text">
                    <div @click="toggleAccordion(menuItem)" class="accordion-header"
                        :class="{ 'active': menuItem.isExpanded }">
                        {{ menuItem.text }}
                    </div>
                    <ul class="main-sub-menu-sb" v-if="menuItem.isExpanded">
                        <li v-for="subMenuItem in menuItem.subMenu" :key="subMenuItem.text" @click="navClose(menuItem)">
                            <router-link :to="subMenuItem.link">{{ subMenuItem.text }}</router-link>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
        <!-- PC -->
        <nav>
            <ul class="main-menu main-menu-1">
                <li v-for="menuItem in menuItems" :key="menuItem.text" :class="{ 'active': menuItem.isHovered }"
                    @mouseover="menuItem.isHovered = true" @mouseout="menuItem.isHovered = false">
                    <router-link :to="menuItem.link">{{ menuItem.text }}</router-link>
                    <ul class="sub-menu sub-menu-1">
                        <li v-for="subMenuItem in menuItem.subMenu" :key="subMenuItem.text" @click="navClose(menuItem)">
                            <router-link :to="subMenuItem.link">{{ subMenuItem.text }}</router-link>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
export default {
    data() {
        return {
            check: false,
            isOpened: false,
            menuItems: [
                {
                    text: "자료실",
                    link: "/Technology.page",
                    isHovered: false,
                    subMenu: [
                        // { text: "AI 디지털교과서개발 가이드라인", link: "/Guide.page" },
                        { text: "기술문서", link: "/Technology.page" },
                        { text: "자료집", link: "/Data.page" }
                    ]
                },
                {
                    text: "네트워킹",
                    link: "",
                    isHovered: false,
                    subMenu: [
                        { text: "기업 홍보관", link: "/Matching.page" },
                    ]
                },
                {
                    text: "커뮤니티",
                    link: "/Notice.page",
                    isHovered: false,
                    subMenu: [
                        { text: "공지사항", link: "/Notice.page" },
                        { text: "홍보/뉴스", link: "/News.page" },
                        { text: "전문가 협의체", link: "" }
                    ]
                },
                {
                    text: "통합지원센터 소개",
                    link: "/Introduction.page",
                    subMenu: [
                        { text: "통합지원센터란?", link: "/Introduction.page" },
                        // { text: "협력 기업", link: "" }
                    ]
                },
                {
                    text: "마이페이지",
                    link: "/Info.page",
                    isHovered: false,
                    subMenu: [
                        { text: "내 정보 수정", link: "/Info.page" },
                        { text: "매칭 관리", link: "" }
                    ]
                }
            ]
        };
    },
    methods: {
        toggleAccordion(menuItem) {
            menuItem.isExpanded = !menuItem.isExpanded;
            console.log(menuItem.isExpanded);
            this.isOpened = true;
        },
        toggleMenu() {
            this.isOpened = !this.isOpened;
        },
        navClose(menuItem) {
            this.isOpened = false;
            menuItem.isExpanded = false;
            this.check = false;
        },
        // mouseouts() {
        //     this.isOpened = false;
        //     console.log("active");
        // }
    },
    watch: {

    },
    computed: {

    },
    mounted() {
        console.log('Menu mounted');
    }
}
</script>

<style scoped>
ul.main-menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

ul.main-menu>li {
    position: relative;
}

ul.main-menu>li>a {
    display: block;
    padding: 2.5rem;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Pretendard-Regular";

}

ul.sub-menu {
    height: 0;
    overflow: hidden;
    transition: all 0.8s;
    position: absolute;
    /* top: 100px; */
    left: 0;
    width: 100%;
    z-index: 100000;
    background-color: #ffff;
    /* box-shadow: 0px 2px 2px #3333331b; */
}

ul.main-menu>li.active ul.sub-menu {
    height: auto;
}


ul.sub-menu>li>a {
    display: block;
    padding: 10px;
    font-size: 1.5rem !important;
    font-weight: 500;
    font-family: "Pretendard-Regular";
    padding-bottom: 2rem;
    text-align: center;
    font-size: 1.2rem;
}





#checkbox {
    display: none;
}

.toggle {
    position: relative;
    width: 30px;
    cursor: pointer;
    margin: auto;
    display: block;
    height: calc(4px * 3 + 11px * 2);
}

.bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: calc(4px / 2);
    background: #2c407f;
    color: inherit;
    opacity: 1;
    transition: none 0.35s cubic-bezier(.5, -0.35, .35, 1.5) 0s;
}

/***** Spin Animation *****/

.bar--top {
    bottom: calc(50% + 11px + 4px/ 2);
    transition-property: bottom, transform;
    transition-delay: calc(0s + 0.35s), 0s;
}

.bar--middle {
    top: calc(50% - 4px/ 2);
    transition-property: opacity;
    transition-delay: calc(0s + 0.35s);
}

.bar--bottom {
    top: calc(50% + 11px + 4px/ 2);
    transition-property: top, transform;
    transition-delay: calc(0s + 0.35s), 0s;
}

#checkbox:checked+.toggle .bar--top {
    bottom: calc(50% - 4px/ 2);
    transform: rotate(135deg);
    transition-delay: 0s, calc(0s + 0.35s);
}

#checkbox:checked+.toggle .bar--middle {
    opacity: 0;
    transition-duration: 0s;
    transition-delay: calc(0s + 0.35s);
}

#checkbox:checked+.toggle .bar--bottom {
    top: calc(50% - 4px/ 2);
    transform: rotate(225deg);
    transition-delay: 0s, calc(0s + 0.35s);
}
</style>