<template>
    <v-layout>
        <v-flex xs12 text-xs-center mb-2>
            <v-card color="blue lighten-4">
                <v-card-text class="pb-0 pt-1">
                    <v-btn
                        v-for="tab in tabs"
                        :color="tab.code == active ? 'white' : 'grey lighten-5'"
                        class="white--text ma-0 tab-btn"
                        :class="[tab.code == active ? 'active' : '']"
                        @click="changeTab(tab.code)"
                        flat
                        :key="tab.code"
                        :data="tab"
                        >
                        <!-- <v-icon left dark>{{ tab.icon }}</v-icon> -->
                        <h6 class="title">{{ tab.label }}</h6>
                    </v-btn>
                </v-card-text>
            </v-card>

        </v-flex>
    </v-layout>
</template>

<style scoped>
.active {
    border-bottom: solid 3px #ffeb3b!important;
}

.tab-btn {
    min-width: 400px;
}
</style>

<script>
module.exports = {
    data () {
        return {
            tabs : [
                {"label":"SETTING", "icon":"opacity", "code":"01"},
                {"label":"NUMBERING", "icon":"verified_user", "code":"02"}
            ],

            active : "01"
        }
    },

    methods : {
        changeTab (x) {
            this.active = x;
            this.$store.commit('change_tab', x);
        }
    }
}
</script>
