<template>
    <div class="side-bar">
        <div class="logo">
            <router-link :to="{path : this.$filters.ctxPath('/adm/main.page')}">ADMINISTRATOR</router-link>
        </div>
        <nav>
            <ul class="main-menu">
                <li v-for="(menu, idx) in menuList" :key="idx" class="menu-item"
                    @click.stop="toggleSubMenu(menu)">
                    <span :class="{ 'main-active': isActive(menu.menuId), 'open': menu.isOpen,'has-children': menu.childList && menu.childList.length > 0 }">
                        {{ menu.menuNm }}
                    </span>
                    <ul v-if="menu.isOpen" class="sub-menu">
                        <li v-for="(subMenu, subIdx) in menu.childList" :key="subIdx"
                            :class="{ 
                                'has-third-depth': subMenu.childList && subMenu.childList.length > 0, 
                                'only-second-depth': !(subMenu.childList && subMenu.childList.length > 0),
                                'sub-active': isActive(subMenu.menuId),
                            }"
                            @click.stop="toggleSubMenu(subMenu)">
                            <span>{{ subMenu.menuNm }}</span>
                            <ul v-if="subMenu.isOpen && subMenu.childList.length > 0" class="ssub-menu">
                                <li v-for="(third, thirdIdx) in subMenu.childList" :key="thirdIdx"
                                    :class="{ 'ss-active': isActive(third.menuId) }"
                                    @click.stop="menuClick(third)">
                                    <span>{{ third.menuNm }}</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
import store from "../pages/AppStore";
import queryParams from '../../resources/js/queryParams';
import { defaultSearchParams } from '../../resources/js/defaultSearchParams';
import cntnStatsSave from "../../resources/js/cntnStatsSave";
import { findBySysMenu } from '../../resources/api/menu';

export default {
    mixins: [queryParams, cntnStatsSave],
    data() {
        return {
            // checkMenu: null,
            currentPath: this.$route.path,
            resetSearch: { ...defaultSearchParams },
            menuList: [],
            activeMenus: [] // 현재 선택된 메뉴 및 부모 메뉴 ID 저장
        };
    },
    created() {
        this.findAll();
        // this.menuCheck();
    },
    methods: {
        // 새로고침 시 메뉴 체크
        menuCheck() {
            let menu = store.state.menu;
            if (menu) {
                // this.checkMenu = menu.menuId;
                this.activeMenus = this.getParentMenus(menu);
                for (const mu of this.activeMenus) {
                    if (mu.childList && mu.childList.length > 0) {
                        mu.isOpen = true; // 하위 메뉴가 있을 시 메뉴 펼치기
                    }
                }
            }
        },
        async findAll() {
            try {
                const params = {
                    roles: store.state.roles.map(auth => auth.authority),
                    menuType: store.state.userType
                };
                const res = await findBySysMenu(params);
                if (res.status === 200) {
                    this.menuList = this.formatMenuList(res.data.data.menuList);
                    // // `isOpen` 속성을 추가하여 초기 상태 설정
                    // this.menuList = res.data.data.menuList.map(menu => ({
                    //     ...menu,
                    //     isOpen: false, // 1뎁스 닫힘
                    //     childList: menu.childList.map(sub => ({
                    //         ...sub,
                    //         isOpen: false, // 2뎁스도 닫힘
                    //         routerUrl: this.$filters.ctxPath(sub.routerUrl)
                    //     }))
                    // }));

                    // 전체 메뉴 트리 store에 저장
                    this.$store.commit('setMenuList', this.menuList);
                }
            } catch (error) {
                alert('에러가 발생했습니다.\n관리자에게 문의하세요.');
            }
        },
        async menuClick(menu) {
            this.saveQueryParams("queryParams", this.resetSearch); // 검색조건 초기화
            this.$store.commit('setMenu', menu);
            await this.cntnStatsSave(menu.menuId);

            // 선택된 메뉴 및 부모 메뉴 추적
            this.activeMenus = this.getParentMenus(menu);
            if (menu.linkType === "0") {
                // 현재창
                this.$router.push({
                    path: menu.routerUrl,
                });
            } else if (menu.linkType === "1") {
                // 새창
                window.open(menu.routerUrl, "_blank");
            }
        },
        toggleSubMenu(menu) {
            if (menu.childList && menu.childList.length > 0) {
                // 부모 메뉴 클릭 시 펼치기만 함
                menu.isOpen = !menu.isOpen;
            } else {
                if(menu.routerUrl === "") {
                    // 하위메뉴가 없는 상위메뉴일 시 알림 출력
                    alert("하위 메뉴가 존재하지 않습니다.");
                    return;
                }
                // 2뎁스 또는 3뎁스 선택 시 menuClick 실행
                this.menuClick(menu);
            }
        },

        isActive(menuId) {
            // return this.activeMenus.includes(menuId);
            return this.activeMenus.some(menu => menu.menuId === menuId);
        },

        getParentMenus(menu) {
            let parents = [];
            while (menu) {
                // parents.push(menu.menuId);
                parents.push(menu);
                menu = this.findParent(menu);
            }
            return parents;
        },
        findParent(menu) {
            for (const parent of this.menuList) {
                if (parent.childList?.some(child => child.menuId === menu.menuId)) {
                // if (parent.childList && parent.childList.includes(menu)) {
                return parent;
                }
                for (const child of parent.childList || []) {
                    if (child.childList?.some(grand => grand.menuId === menu.menuId)) {
                    // if (child.childList && child.childList.includes(menu)) {
                        return child;
                    }
                }
            }
            return null;
        },

        // 메뉴 리스트를 가공
        formatMenuList(menuList) {
            // `isOpen` 속성을 추가하여 초기 상태 설정
            return menuList.map(menu => {
                const formatted = {
                    ...menu,
                    isOpen: false,
                    routerUrl: menu.routerUrl !== "" ? this.$filters.ctxPath(menu.routerUrl) : menu.routerUrl, // 최상위 메뉴가 아닐 때만 context path 가공
                };

                // 자식이 있으면 재귀 호출
                if (menu.childList && menu.childList.length > 0) {
                    formatted.childList = this.formatMenuList(menu.childList);
                }

                return formatted;
            });
        },

        // 모든 메뉴 닫기
        closeAllMenus(menus) {
            for (const menu of menus) {
                menu.isOpen = false;

                if (Array.isArray(menu.childList) && menu.childList.length > 0) {
                    this.closeAllMenus(menu.childList); // 재귀로 하위 메뉴까지 모두 닫기
                }
            }
        }
    },
    watch: {
        // 나중에 네비게이션 가드에서 form 받을 수 있으면 form adm/main으로 갈때 sotre.state값0로 바꿔주기
        $route(to, from) {
            this.currentPath = to.path;
        },
        "$store.state.mbrNm"(newVal) {
            this.mbrNm = newVal;
        },
        '$store.state.menuList': {
            immediate: true,
            handler(val) {
                if (val && val.length > 0) {
                    this.menuCheck();
                }
            }
        },
        '$store.state.menu'(newValue) {
            if(!newValue) {
                this.closeAllMenus(this.menuList);
                this.activeMenus = [];
            }
        },
    }
};
</script>

