<template>
    <nav>
        <div class="logo-wrap">
            <h1>
                <router-link to="/">
                    <img src="../../resources/img/content/login_logo.svg" alt="로고">
                </router-link>
            </h1>
        </div>
        <ul>
            <li
                v-for="menu in menus"
                :key="menu.name"
                :class="{ active: selectedMenu === menu.name }"
                @click="selectMenu(menu)"
            >
                <router-link :to="menu.path">
                    <img
                        :src="getMenuIcon(menu)"
                        :alt="menu.label + ' 아이콘'"
                        style="width:20px; height:20px; margin-right:8px;"
                    />
                    {{ menu.label }}
                </router-link>
            </li>
        </ul>
    </nav>
</template>

<script>
export default {
    data() {
        return {
            menus: [
                { name: 'home', label: 'HOME', icon: 'ico_home', path: '/' },
                { name: 'modeling', label: '모델링', icon: 'ico_modeling', path: '/modeling.page' },
                { name: 'asset', label: '디지털 자산화', icon: 'ico_digital', path: '/asset.page' },
                { name: 'feedback', label: '피드백관리', icon: 'ico_feedback', path: '/feedback.page' }
            ],
            selectedMenu: ''
        };
    },
    methods: {
        selectMenu(menu) {
            this.selectedMenu = menu.name;
            const selectedIconPath = this.getMenuIcon(menu);  // _w 아이콘 포함 경로
            this.$emit('menu-selected', {
                label: menu.label,
                icon: selectedIconPath
            });
        },
        getMenuIcon(menu) {
            const suffix = this.selectedMenu === menu.name ? '_w' : '';
            try {
                return require(`../../resources/img/content/${menu.icon}${suffix}.svg`);
            } catch (e) {
                console.warn(`아이콘 로딩 실패: ${menu.icon}${suffix}.svg`);
                return '';
            }
        } 
    },
    watch:{
        '$route.path'(newPath) {
            const current = this.menus.find(menu => menu.path === newPath);
            this.selectedMenu = current ? current.name : 'home';
        }
    },
    computed:{},
    mounted() {
        // 현재 경로와 일치하는 메뉴를 찾아서 active 처리
        const current = this.menus.find(menu => menu.path === this.$route.path);
        this.selectedMenu = current ? current.name : 'home';
    }
    
};
</script>

