<template>
   <v-card class="mb-2 one-fo-tab">
      <v-layout justify-center class="tab-container">
         <v-btn @click="changeTo('pasien-dokter')" justify-center multi-line class= "buttonkiri active" color="success">
         Pasien <br/> Dokter
         <v-icon v-if="tab_selected('pasien-dokter')" right dark>verified_user</v-icon>
         </v-btn>
         <v-btn @click="changeTo('mou-px')" justify-center multi-line class= "buttonnew" color="error">MOU <br/> Pemeriksaan
         <v-icon v-if="tab_selected('mou-px')" right dark>verified_user</v-icon>
         </v-btn>
         <v-btn @click="changeTo('delivery-payment')" justify-center multi-line class= "buttonnew" color="warning">Kirim Hasil <br/> Payment
         <v-icon v-if="tab_selected('delivery-payment')" right dark>verified_user</v-icon>
         </v-btn>
         <v-btn @click="changeTo('barcode-supplies')" justify-center multi-line class= "buttonkanan" color="info">
         <v-icon v-if="tab_selected('barcode-supplies')" left dark>verified_user</v-icon>
            Supplies <br/> Barcode
         </v-btn>
      </v-layout>
   </v-card>

</template>

<style scoped>

.one-fo-tab {
   min-height:84px;
}
.layout.tab-container .v-btn {
   min-height:64px;
   margin-top:10px;
}
.v-card{
   text-align: center;
}

.v-btn__content{
   margin-top : 0px;
}

.buttonnew {
   width : 20%;
   text-decoration:none;
}

.buttonkiri {
   width : 20%;
   text-decoration:none;
   border-top-left-radius: 50px;
   border-bottom-left-radius: 50px;
}

.buttonkanan {
   width : 20%;
   text-decoration:none;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
}
.active{

}

</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>

