<template>
    <nav class="gd gd1 pd1 sub-nav">
        <input type="text" placeholder="메뉴검색" class="mb2">
        <ul>
            <li v-if="selectedItem">
                <div v-for="(sidetitle) in selectedItem.subMenuBox" :key="sidetitle.pathName" class="side-wrap">
                    <p @click="toggleMenu(sidetitle)" :class="{ active: sidetitle.show }">{{ sidetitle.pathName }}</p>
                    <!-- <img src="../../../resources/img/component/chevron-down.svg" alt=""> -->
                    <ul class="sidemenu-wrap">
                        <li v-for="(subMenu, idx) in sidetitle.subList" :key="idx">
                            <router-link v-show="sidetitle.show" :to="subMenu.path" class="mb2"
                                @click="selectSubMenu(idx)" :class="{ 'active-text': isActive(idx) }">{{
                subMenu.pathName
            }}</router-link>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</template>

<script>

export default {
    props: {
        selectedId: {
            type: Number,
            default: null,
        },
    },
    data() {
        return {
            selectedId: 1,
            selectedSubMenu: false,
            activeIndex: null,
            menuList: [
                {
                    // 인사/급여관리
                    id: 0,
                    subMenuBox: [

                        {
                            pathName: "기준정보",
                            show: false,
                            subList: [
                                { path: "/", pathName: "(회계)공통코드 등록", isActive: false },
                                { path: "/", pathName: "거래처 정보 등록", isActive: false },
                                { path: "/", pathName: "계정과목 등록", isActive: false },
                                { path: "/", pathName: "재무제표 양식 등록", isActive: false },
                                { path: "/", pathName: "재무제표 계정 설정 등록", isActive: false },
                                { path: "/", pathName: "은행 계좌 등록", isActive: false },
                            ],
                        },
                        {
                            pathName: "전표관리",
                            show: false,
                            subList: [
                                { path: "/", pathName: "(회계)공통코드 등록" },
                                { path: "/", pathName: "거래처 정보 등록" },
                                { path: "/", pathName: "계정과목 등록" },
                                { path: "/", pathName: "재무제표 양식 등록" },
                                { path: "/", pathName: "재무제표 계정 설정 등록" },
                                { path: "/", pathName: "은행 계좌 등록" },
                            ],
                        },
                        {
                            pathName: "기준정보",
                            show: false,
                            subList: [
                                { path: "/", pathName: "(회계)공통코드 등록" },
                                { path: "/", pathName: "거래처 정보 등록" },
                                { path: "/", pathName: "계정과목 등록" },
                                { path: "/", pathName: "재무제표 양식 등록" },
                                { path: "/", pathName: "재무제표 계정 설정 등록" },
                                { path: "/", pathName: "은행 계좌 등록" },
                            ],
                        },
                    ]
                },

                {
                    // 회계관리
                    id: 1,
                    subMenuBox: [

                        {
                            pathName: "기준정보",
                            show: true,

                            subList: [
                                { path: "/Bi001.page", pathName: "(회계)공통코드 등록" },
                                { path: "/Bi002.page", isActive: true, pathName: "거래처 정보 등록" },
                                { path: "/Bi003.page", pathName: "계정과목 등록" },
                                { path: "/Bi004.page", pathName: "재무제표 양식 등록" },
                                { path: "/Bi005.page", pathName: "재무제표 계정 설정 등록" },
                                { path: "/Bi006.page", pathName: "은행 계좌 등록" },
                                { path: "/Bi007.page", pathName: "거래처 대장" },
                            ],
                        },
                        {
                            pathName: "전표관리",
                            show: false,
                            subList: [
                                { path: "/Cm001.page", pathName: "잔액 이월 전표등록" },
                                { path: "/Cm002.page", pathName: "전표 작성 (일반)" },
                                { path: "/", pathName: "전표 작성 (계산서)" },
                                { path: "/", pathName: "전표 작성 (법인카드)" },
                                { path: "/", pathName: "전표 작성 (어음분할 발행)" },
                                { path: "/", pathName: "전표 작성 (포장매출)" },
                                { path: "/", pathName: "미전송 전표 조회" },
                                { path: "/", pathName: "전표 확정 (일반)" },
                                { path: "/", pathName: "전표 확정 (계산서)" },
                                { path: "/", pathName: "전표 확정 (법인카드)" },
                                { path: "/", pathName: "전표 확정 (포장매출)" },
                                { path: "/", pathName: "전표 승인 및 반려등록" },
                                { path: "/", pathName: "전표 조회" },
                                { path: "/", pathName: "전표 조회 (부서별)" },
                                { path: "/", pathName: "분개장 (전표기준)" },
                                { path: "/", pathName: "계정별 명세서" },
                                { path: "/", pathName: "계정별 명세서(부서별)" },
                                { path: "/", pathName: "거래처별 명세서" },
                                { path: "/", pathName: "거래처별 채원/채무리스트" },
                                { path: "/", pathName: "미수금 관리 (제품)" },
                            ],
                        },
                        {
                            pathName: "채권채무관리",
                            show: false,
                            subList: [
                                { path: "/", pathName: "월 채권채무 마감 작업" },
                                { path: "/", pathName: "채무 연령표" },
                                { path: "/", pathName: "채권 연령표" },
                            ],
                        },
                        {
                            pathName: "법인카드관리",
                            show: false,
                            subList: [
                                { path: "/", pathName: "법인카드 관리 대장" },
                                { path: "/", pathName: "법인카드 일자별 사용 명세" },
                                { path: "/", pathName: "법인카드 일자별 사용 명세 (계정)" },
                                { path: "/", pathName: "월별 사용액 현황(카드별)" },
                                { path: "/", pathName: "월별 사용액 현황(상세)" },
                                { path: "/", pathName: "계정과목별 사용액 현황(월)" },
                                { path: "/", pathName: "월별 사용액 현황(요약)" },
                            ],
                        },
                        {
                            pathName: "자금관리",
                            show: false,
                            subList: [
                                { path: "/", pathName: "분개장" },
                                { path: "/", pathName: "현금출납장" },
                                { path: "/", pathName: "일계표" },
                                { path: "/", pathName: "자금 일일 원장" },
                                { path: "/", pathName: "일 자금 마감 작업" },
                                { path: "/", pathName: "잔액 이월 작업" },
                                { path: "/", pathName: "기초 잔액 등록" },
                            ],
                        },
                        {
                            pathName: "어음관리",
                            show: false,
                            subList: [
                                { path: "/", pathName: "받을어음 등록" },
                                { path: "/", pathName: "받을어음 수탁 등록" },
                                { path: "/", pathName: "받을어음 결제 및 반환 등록" },
                                { path: "/", pathName: "받을어음 할인 등록" },
                                { path: "/", pathName: "지급어음 결제 및 반환 등록" },
                                { path: "/", pathName: "어음 용지 관리" },
                                { path: "/", pathName: "받을어음 잔액 명세서" },
                                { path: "/", pathName: "받을어음 수탁 명세서" },
                                { path: "/", pathName: "받을어음 할인 명세서" },
                                { path: "/", pathName: "지급어음 잔액 명세서" },
                            ],
                        },
                        {
                            pathName: "차입금관리",
                            show: false,
                            subList: [
                                { path: "/", pathName: "차입금 등록" },
                                { path: "/", pathName: "차입금 및 이자 상환 등록" },
                                { path: "/", pathName: "차입금 잔액 명세서" },
                                { path: "/", pathName: "차입금 상환 명세서" },
                                { path: "/", pathName: "이자 지급 명세서" },
                            ],
                        },
                        {
                            pathName: "결산조정관리",
                            show: false,
                            subList: [
                                { path: "/", pathName: "선급비용 발생 등록" },
                                { path: "/", pathName: "선급비용 계상 전표 작성" },
                                { path: "/", pathName: "선급비용 명세서" },
                                { path: "/", pathName: "미지급이자 전표 작성" },
                                { path: "/", pathName: "미지급이자 명세서" },
                                { path: "/", pathName: "이자 비용 명세서" },
                            ],
                        },
                        {
                            pathName: "결산관리",
                            show: false,
                            subList: [
                                { path: "/", pathName: "합계잔액시산표" },
                                { path: "/", pathName: "재무상태표" },
                                { path: "/", pathName: "손익계산서" },
                                { path: "/", pathName: "제조원가명세서" },
                                { path: "/", pathName: "결산 기초 정보 등록" },
                                { path: "/", pathName: "월 결산 마감 작업" },
                            ],
                        },
                        {
                            pathName: "세무관리",
                            show: false,
                            subList: [
                                { path: "/", pathName: "부가세 명세서" },
                                { path: "/", pathName: "부가세 집계표(세금 및 계산서)" },
                                { path: "/", pathName: "부가세 집계표(법인카드)" },
                                { path: "/", pathName: "부가세 신고서 작성(세금 및 계산서)" },
                                { path: "/", pathName: "부가세 신고서 작성(법인카드)" },
                                { path: "/", pathName: "수출 실적 신고서 작성" },
                            ],
                        },
                        {
                            pathName: "담보관리",
                            show: false,
                            subList: [
                                { path: "/", pathName: "담보 등록" },
                                { path: "/", pathName: "담보 현황" },
                            ],
                        },
                    ]
                }

            ]
        }
    },
    methods: {

        toggleMenu(menu) {
            menu.show = !menu.show;
        },
        selectSubMenu(index) {
            this.activeIndex = index; // 클릭된 항목의 인덱스로 활성화 상태 변경
        },
        isActive(index) {
            return this.activeIndex === index; // 현재 인덱스가 활성화 상태인지 판단
        },


    },
    watch: {

    },
    computed: {

        selectedItem() {

            console.log('Selected ID:', this.selectedId);  // 선택된 ID를 콘솔에 출력
            const item = this.menuList.find(item => item.id === this.selectedId);
            console.log('Found Item:', item);  // 찾은 항목을 콘솔에 출력
            return item;


        },
    },
    mounted() {
        this.activeIndex = 0;
    }
}
</script>

<style scoped>
nav {
    height: 100%;
    position: relative;
    overflow-y: scroll;
    background-color: var(--sidenavgray);
    width: 100%;

}

nav::-webkit-scrollbar {
    width: 2px;
}

nav::-webkit-scrollbar-thumb {
    background-color: var(--navbarblue);
}

input {
    width: 100%;
    margin-bottom: 5%;
}

.side-wrap p {
    font-family: 'Pretendard';
    font-weight: 600;
    color: #333;
}


.sidemenu-wrap li {
    padding-left: 15%;
    font-family: 'Pretendard';
    font-weight: 600;
    color: #333;
}
</style>