<template>
    <nav class="main-nav flex justify-between align-center">
        <router-link to="/Bi002.page" class="logo gd-1"></router-link>

        <ul class="flex justify-between topmenu-wrap align-center">

            <li v-for="(topMenu, idx) in menuList" key="idx">
                <p @click="selectItem(topMenu.id)" :class="{ active: topMenu.isActive }">{{ topMenu.pathName }}</p>
            </li>

        </ul>
        <div class="logo-wrap flex justify-between align-center logo-btn " style="flex-wrap: nowrap; width: 10%;">

            <div class=" header-btn">
                <p class="btn-img1"></p>
                <a href="/">사용설명서</a>
            </div>

        </div>




    </nav>
</template>
<script>
export default {
    data() {
        return {
            menuList: [
                { id: 0, pathName: "인사/급여" },
                { id: 1, isActive: true, pathName: "회계" },
                { id: 2, pathName: "원가" },
                { id: 3, pathName: "영업" },
                { id: 4, pathName: "원자재" },
                { id: 5, pathName: "부자재" },
                { id: 6, pathName: "생산" },
                { id: 7, pathName: "계근" },
                { id: 8, pathName: "무역" },
                { id: 9, pathName: "안전" },
                { id: 10, pathName: "지시사항" },
                { id: 11, pathName: "업무계획" },
                { id: 12, pathName: "고객" },
                { id: 13, pathName: "프로젝트" },
                { id: 14, pathName: "시스템" },
                { id: 15, pathName: "WEB" },
            ]
        }
    },
    methods: {
        selectItem(id) {
            // 모든 메뉴 항목의 isActive 속성을 false로 설정
            this.menuList.forEach(item => {
                item.isActive = false;
            });

            // 클릭한 메뉴 항목의 isActive 속성만 true로 설정
            const selectedItem = this.menuList.find(item => item.id === id);
            if (selectedItem) {
                selectedItem.isActive = true;
            }

            console.log(id);
            this.$emit('itemSelected', id);
            console.log("상단 메뉴 클릭됨. 사이드 메뉴 상태 변경 예정.");
            
        }
    },
    watch: {

    },
    computed: {

    },
    mounted() {
    }
}
</script>
<style scoped>
ul {
    width: 100%;
    list-style: none;
    padding: 17px 30px;
    background-color: var(--navbarblue);
}

li {
    /* border: 1px solid blue; */
    text-align: center;

}

.topheader {
    background-color: var(--headergray);
    padding: 2px 30px;
}

.topheader p,
.topheader button {
    padding: 0.1% 0;
    color: var(--white);
    font-size: 1.4rem;
}

.header-btn {
    width: 45px;
    height: 45px;
    background-color: var(--white);
    border-radius: 5px;
    text-align: center;
    margin-left: 2%;
    padding: 3% 0;
    box-shadow: 1px 1px 5px #00000031;

}

.header-btn p {
    margin: 0 auto;
    width: 20px;
    height: 20px;
    background-size: contain;
}
</style>