<template>
    <ul
        v-if="getBreadcrumbList"
        :class="$style.breadcrumb"
    >
        <template
            v-for="(item,index) in getBreadcrumbList"
        >
            <li :key="index" :class="$style.item">{{item}}</li>
            <li
                v-if="index<getBreadcrumbList.length-1"
                :key="getBreadcrumbList.length+index"
                :class="$style.symbol"
            >></li>
        </template>
    </ul>
</template>

<script>
    export default {
        name: "Breadcrumb",
        computed:{
            getBreadcrumbList(){
                if(this.$route.meta&&this.$route.meta.breadcrumb&&this.$route.meta.breadcrumb&&this.$route.meta.breadcrumb){
                    if(this.$route.meta.breadcrumb.constructor==Array){
                        return this.$route.meta.breadcrumb
                    }else{
                        return [this.$route.meta.breadcrumb.firstLevelTitle,this.$route.params.id==-1?this.$route.meta.breadcrumb.secondLevelTitle[0]:this.$route.meta.breadcrumb.secondLevelTitle[1]]
                    }
                }
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssLayout.scss';
    .breadcrumb{
        display: inline-block;
        @extend %ClearFloat;
        font-size: 15px;
        line-height: 1em;
        vertical-align: middle;
        >li{
            float: left;
            color: rgba(71,71,71,0.9);
            &:not(:last-child){
                &.item{
                    margin-right: 6px;
                }
                &.symbol{
                    margin-right: 6px;
                }
            }
            &.symbol{
                font-size: 0.7em;
            }
        }
    }
</style>