<template>
    <div :class="className">
        <div class="w1280">
            <p class="navigation-bar"><router-link
                    :to="className === 'admin-navigation pd10 pl30' ? '/kdm/main.page' : '/'" role="link" aria-label="home" id="home"><svg-icon type="mdi" :width="18" :height="18"
                        :path="homePath" role="img" aria-labelledby="home"></svg-icon> 홈</router-link>                       
                        <span v-if = "pageNavi.main != ''"> > {{ pageNavi.main }} </span> <span v-if = "!(pageNavi.sub == null || pageNavi.sub.trim() == '')"> > {{ pageNavi.sub }} </span>
                        <span v-if = "!(pageNavi.third == null || pageNavi.third.trim() == '')"> > {{ pageNavi.third }} </span>
            </p>
        </div>
    </div>
</template>

<script>
import { mdiHome } from '@mdi/js';
export default {
    props: {
        className: {
            type: String,
            default: 'navigation-wrap pd10',
        },
        navi : {
            type: Object,
            default : null
        }
    },
    data() {
        return {
            homePath: mdiHome,
            pageNavi : this.$getPageNaviInfo(),
        }
    },
    mounted()  {
       
    },
    watch:{
        'className':function(newV,oldV){          
        },
        '$store.state.pageNaviInfo': function (newValue) {
            this.pageNavi = newValue;
        },
        'navi.sub' : function(v){
            this.pageNavi.main = this.navi.main;
            this.pageNavi.sub = this.navi.sub;
        }
    },
}
</script>
