<template>
   <v-card class="mb-2 one-fo-tab">

      <v-layout style="border-top: 0.6px solid red;" justify-center >
      <div class="btn-group">
     <button @click="changeTo('pasien-dokter')" class="button" v-bind:class="{ 'active': tab_selected('pasien-dokter')}">Pasien <br/> Dokter</button>
     <button @click="changeTo('mou-px')"  class="button" v-bind:class="{ 'active': tab_selected('mou-px')}">MOU <br/> Pemeriksaan</button>
     <button @click="changeTo('delivery-payment')"  class="button" v-bind:class="{ 'active': tab_selected('delivery-payment')}">Kirim Hasil <br/> Pembayaran</button>
     <button @click="changeTo('barcode-supplies')" class="button" v-bind:class="{ 'active': tab_selected('barcode-supplies')}">Supplies <br/> Barcode</button>
     </div>
      </v-layout>
   </v-card>

</template>

<style scoped>
.btn-group .button {
text-transform: uppercase;
 border: 1px solid #ffff;
 color: black;
 height:83px;
 width:150px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 font-weight:500;
 cursor: pointer;
 float: left;
}

.btn-group .button:hover {
 background-color: #E0F7FA;
border-bottom: 2px solid #ff1604;

}

.btn-group .button.active {
  border-bottom: 2px solid #ff1604;
}


</style>

<script>
module.exports = {
    methods: {
      tab_selected : function(tab) {
         return this.$store.state.tab_selected == tab
      },
      changeTo : function(tab) {
        this.$store.dispatch('change_tab',tab)
        
      }
   }
}
</script>

