<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 ? 'black' : 'grey lighten-5'"
                        class="black--text ma-0 tab-btn"
                        :class="[tab.code == active ? 'active' : '']"
                        @click="changeTab(tab.code)"
                        flat
                        :key="tab.code"
                        :data="tab"
                        :disabled="!tab.enabled"
                        >
                        <!-- <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 7px #000066!important;
}

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

<script>
module.exports = {
    data () {
        return {
            
        }
    },

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

    computed : {
        tabs : {
            get () {
                return this.$store.state.order.tabs
            },
            set (v) {
                return
            }
        },

        active () {
            return this.$store.state.tab_active
        }
    }
}
</script>