<template>
    <v-card class="mt-2" v-show="visible">
      <v-card-title>Sampling Status </v-card-title>
               <v-btn outline xs4 v-for="(item,idx) in items" :key="idx" :color="get_color(item)">
                  {{item.name}} 
               </v-btn>
    </v-card>
</template>

<style scoped>
.v-input__slot {
    margin-bottom: 0px !important;
}

.v-messages {
    display: none;
}

</style>

<script>
module.exports = {
    components : {
    },
    
    data () {
      return {
         items : [
            {'name': 'Bahan A','sampled' : 'Y'}
            ,{'name': 'Bahan B','sampled' : 'N'}
            ,{'name': 'Bahan C','sampled' : 'N'}
            ]
      }
    },

    computed : {
       visible() {
         if(this.$store.state.patient.selected_patient.mr == '-' &&
         this.$store.state.patient.selected_patient.name == '-' ) return false
         return true
       }
    },
    methods : {
       get_color(item) {
          if (item.sampled == 'Y') return 'green'
          return 'red'
       },
       load_data() {
       }
    }
}
</script>
