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