<template>
<div>
    <!--<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"
                        >
                        <h6 class="title">{{ tab.label }}</h6>
                    </v-btn>
                </v-card-text>    
            </v-card>
        </v-flex>
    </v-layout>-->
    <v-layout mt-0 row>
        <v-flex ml-1 mr-1 mb-1 xs12>
            <v-card color="blue-grey">
                <v-layout row>
                    <v-flex ml-2 mt-1 mr-1 mb-1 xs12>
                        <v-btn block  
                            depressed
                            @click="changeTab('01')"
                            class="font-weight-black text-mono"
                            style="color:#fff!important"
                            color="#82b1ff">
                            PEMESANAN MASA DEPAN
                        </v-btn>
                    </v-flex>
                </v-layout>
            </v-card>
        </v-flex>
    </v-layout>
    <v-layout mt-0 v-if="active == '01'" row>
        <v-flex ml-1 mr-1 mb-1 xs12>
            <v-card color="red lighten-3">
                <v-layout row>
                    <v-flex ml-2 mt-1 mr-1 mb-1 xs4>
                        <v-btn block  
                            depressed
                            @click="changeTab('01')"
                            class="font-weight-black text-mono"
                            style="color:#fff!important"
                            color="red lighten-2">
                            DEMOGRAFI
                        </v-btn>
                    </v-flex>
                    <v-flex ml-1 mt-1 mr-1 mb-1 xs4>
                        <v-btn block 
                            flat
                            @click="changeTab('02')"
                            class="font-weight-black text-mono"
                            style="background:#fff!important"
                            color="#8bc34a">
                            PEMERIKSAAN
                        </v-btn>
                    </v-flex>
                    <v-flex ml-1 mt-1 mr-2 mb-1 xs4>
                        <v-btn block 
                            flat
                            style="background:#fff!important"
                           
                            class="font-weight-black text-mono"
                            color="#9e9e9e">
                            PEMBAYARAN
                        </v-btn>
                    </v-flex>
                </v-layout>
            </v-card>
        </v-flex>
    </v-layout>
    <v-layout mt-0 v-if="active == '02'" row>
        <v-flex ml-1 mr-1 mb-1 xs12>
            <v-card color="#8bc34a">
                <v-layout row>
                    <v-flex ml-2 mt-1 mr-1 mb-1 xs4>
                        <v-btn block  
                            depressed
                            flat
                            @click="changeTab('01')"
                            style="background:#fff!important"
                            class="font-weight-black text-mono"
                            color="red">
                            DEMOGRAFI
                        </v-btn>
                    </v-flex>
                    <v-flex ml-1 mt-1 mr-1 mb-1 xs4>
                        <v-btn block 
                            depressed
                            @click="changeTab('02')"
                            class="font-weight-black text-mono"
                            style="color:#fff!important"
                            color="#8bc34a">
                            PEMERIKSAAN
                        </v-btn>
                    </v-flex>
                    <v-flex ml-1 mt-1 mr-2 mb-1 xs4>
                        <v-btn block 
                            depressed
                            flat
                            
                            style="background:#fff!important"
                            class="font-weight-black text-mono"
                            color="#9e9e9e">
                            PEMBAYARAN
                        </v-btn>
                    </v-flex>
                </v-layout>
            </v-card>
        </v-flex>
    </v-layout>
    <v-layout mt-0 v-if="active == '03'" row>
        <v-flex ml-1 mr-1 mb-1 xs12>
            <v-card color="#ffeaa5">
                <v-layout row>
                    <v-flex ml-2 mt-1 mr-1 mb-1 xs4>
                        <v-btn block  
                            depressed
                            flat
                            style="background:#fff!important"
                           
                            class="font-weight-black text-mono"
                            color="#9e9e9e">
                            DEMOGRAFI
                        </v-btn>
                    </v-flex>
                    <v-flex ml-1 mt-1 mr-1 mb-1 xs4>
                        <v-btn block 
                            depressed
                            flat
                            style="background:#fff!important"
                           
                            class="font-weight-black text-mono"
                            color="#9e9e9e">
                            PEMERIKSAAN
                        </v-btn>
                    </v-flex>
                    <v-flex ml-1 mt-1 mr-2 mb-1 xs4>
                        <v-btn block 
                            depressed
                            @click="changeTab('03')"
                            style="color:#fff!important"
                            class="font-weight-black text-mono"
                            color="#e16262">
                            PEMBAYARAN
                        </v-btn>
                    </v-flex>
                </v-layout>
            </v-card>
        </v-flex>
    </v-layout>
    </div>
</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>