<template>
    <nav class="main-menu">
        <ul class="flex-start">
            <li v-for="(menu, index) in menuList" :key="index">
                <router-link :to="menu.path">{{ menu.pathName }}</router-link>
            </li>
        </ul>
    </nav>
</template>

<script>

export default {
    data() {
        return {
            menuList: [
                { pathName: "가공도구 마모 데이터 시각화", path: "/" ,isActive:true},
                { pathName: "물류운송 데이터 시각화", path: "/transit.page",isActive:true },
            ]
        }
    },
    methods: {
        selectActive: function (currentPath) {
            this.menuList.forEach((item) => {
                // 주요 메뉴의 path와 현재 경로를 비교
                if (item.path === currentPath) {
                    item.isActive = true;
                } else {
                    // 하위 메뉴가 있는 경우, 하위 메뉴의 path와 현재 경로를 비교
                    if (item.subMenu && item.subMenu.some(sub => sub.path === currentPath)) {
                        item.isActive = true;
                    } else {
                        item.isActive = false;
                    }
                }
            });
        }
    },
    watch: {

    },
    computed: {

    },
    components: {

    },
    mounted() {
        console.log('main mounted');
        this.selectActive(this.$route.path)
    }
}
</script>
