<template>
    <div id="bottomTab">
        <mu-container style="width: 100%;"  >
            <mu-bottom-nav :value="nowTab" color="red" >
                <mu-bottom-nav-item v-for="tab in tabs" :title="tab.name" :icon="tab.src" :to="tab.class" :key="tab.tabindex"
                                    :value="tab.name"></mu-bottom-nav-item>
            </mu-bottom-nav>
        </mu-container>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                nowTab: this.curTab,
                tabs: [
                    {name: 'STATE', class: '/', src: 'home', tabindex: 1},
                    {name: 'SPORT', class: 'sport', src: 'alarm', tabindex: 2},
                    {name: 'MAP', class: 'map', src: 'map', tabindex: 3},
                    {name: 'RADIO', class: 'radio', src: 'radio', tabindex: 4},
                    {name: 'SET', class: 'mine', src: 'settings', tabindex: 5},
                    //laptop
                ]
            }
        },
        props: ['curTab'],
        methods: {},
        watch: {
            '$route': function (e) {
                this.nowTab = e.meta.title;
            }
        },
    }
</script>

<style scoped>
    #bottomTab {
        position: absolute;
        top: 0;
        width: 100%;
        background: #000;
        z-index: 9999;
    }

    .container {
        padding: 0;
    }


     .mu-bottom-item-text {
        color: #fff
    }

    .mu-bottom-item-active .mu-bottom-item-text {
        color: red;
    }
    .mu-bottom-nav {
        background: #000;
        color: #fcfcfc;
    }
</style>
