<template>
    <div style="width: 100%;box-shadow: 1px 1px 5px #afafaf45;">
        <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 v-if="shouldRenderMenuItem(menuItem) && menuItem.text !== '교육과정 표준체계'" :to="menuItem.link">{{ menuItem.text
                        }}</router-link>
                        <a v-else-if="menuItem.text === '교육과정 표준체계'" target="_blank" @click="postSelectOnePage(menuItem)">{{ menuItem.text }}</a>
                        <ul class="sub-menu sub-menu-1">
                            <li v-for="subMenuItem in menuItem.subMenu" :key="subMenuItem.text" @click="navClose(menuItem)">
                                <router-link v-if="shouldRenderSubMenuItem(subMenuItem)" :to="subMenuItem.link">{{ subMenuItem.text }}</router-link>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</template>

<script>
import { useStore } from "vuex";
import axios from 'axios';

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: "/Wgcommunity.page" }
                    ]
                },
                {
                    text: "통합지원센터 소개",
                    link: "/Introduction.page",
                    subMenu: [
                        { text: "통합지원센터란?", link: "/Introduction.page" },
                        // { text: "협력 기업", link: "" }
                    ]
                },
                {
                    text:"교육과정 표준체계",
                    link: "http://211.253.31.234/",
                    post_id: "POST_0000000098",
                    bbs_id: "3",
                    ctgry_nm: "service"
                },
                {
                    text: "마이페이지",
                    link: "/Info.page",
                    isHovered: false,
                    subMenu: [
                        { text: "내 정보 수정", link: "/Info.page" },
                        { text: "매칭 관리", link: "/MatchingManager.page" }
                    ]
                }
            ],
            store: useStore(),
        };
    },
    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;
        },
        shouldRenderMenuItem(menuItem) {
            //해당 메뉴 항목이 로그인 상태에 따라 렌더링되어야 하는지 확인하는 로직
            if (menuItem.text === "마이페이지") {
                return this.store.state.loginUser != null;
            }
            // 다른 메뉴 항목은 항상 표시
            return true;
        },
        shouldRenderSubMenuItem(subMenuItem) {
            // 해당 서브 메뉴 항목이 로그인 상태에 따라 렌더링되어야 하는지 확인하는 로직
            if (subMenuItem.text === "매칭 관리") {
                // '매칭 관리' 항목은 'company'로 로그인한 경우에만 표시
                return this.store.state.loginUser && this.store.state.loginUser.user_auth === 'company';
            }
            // 다른 서브 메뉴 항목은 항상 표시
            return true;
        },

        //게시글 상세조회 페이지로 이동
        postSelectOnePage: function (item) {
            const vm = this;

            axios({
                url: '/post/postViewCount.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: { 'post_id': item.post_id, 'bbs_id': item.bbs_id }
            }).then(function (response) {
                axios({
                    url: '/statistics/postLogInsert.json',
                    method: 'post',
                    hearder: {
                        'Content-Type': "application/json; charset=UTF-8",
                    },
                    data: item
                }).then(function (response) {
                    window.location.href = item.link;
                })
               
            })
        },
    },
    watch: {

    },
    computed: {

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