<template>
    <header>
        <p class="navigate_bar"><router-link to="/">Home</router-link> > {{pathName()}}</p>
    </header>
</template>

<script>
import { useRoute } from 'vue-router';

export default {
    data() {
        return {
            //현재 라우터의 정보
			route: useRoute(),

            // 페이지 경로 목록
            pageList: [
                {path: "/management.page", name: "수요반응자원 관리"}
                , {path: "/contract.page", name: "참여고객 관리"}
                , {path: "/rrmsePropose.page", name: "RRMSE 산출의뢰"}
                , {path: "/rrmseCalculationLog.page", name: "RRMSE 산출이력"}
                , {path: "/reduceState.page", name: "감축현황"}
                , {path: "/reduceReport.page", name: "감축결과보고서"}
                , {path: "/translateDay.page", name: "데이터송수신현황 일별"}
                , {path: "/translateContract.page", name: "데이터송수신현황 참여고객별"}
                , {path: "/dataStatus.page", name: "데이터송수신현황 데이터수집현황"}
                , {path: "/analysis.page", name: "전력사용량/CBL 통계"}
                , {path: "/cblAnalysis.page", name: "CBL 분석"}
                , {path: "/device.page", name: "5분검침기 현황"}
                , {path: "/smsAutoSend.page", name: "SMS발송관리 자동발송설정"}
                , {path: "/smsManualSend.page", name: "SMS발송관리 수동발송"}
                , {path: "/smsLog.page", name: "SMS발송관리 발송이력"}
                , {path: "/emailAutoSend.page", name: "E-mail발송관리 자동발송설정"}
                , {path: "/emailLog.page", name: "E-mail발송관리 발송이력"}
                , {path: "/system.page", name: "회원관리"}
                , {path: "/login.page", name: "로그인"}
            ]
        };
    },
    methods: {
        pathName: function () {
            for(let i=0; i<this.pageList.length; i++) {
                if(this.route.path == this.pageList[i]['path']) {
                    return this.pageList[i]['name'];
                }
            }
            return "대시보드"
        }
    },
    watch: {},
    computed: {},
    components: {},
    mounted() {
        console.log("Header mounted");
        console.log("Header route: ", this.route);
    },
};
</script>

<style scoped>
header {
    max-width: 100%;
    border-bottom: 1px solid #eee;
    grid-area: header;
    background: #fff;
}

header p {
    padding: 15px 30px;
    font-size: 1.5rem;
    font-weight: 900;
}
</style>
