<template>
<div v-show="show" class="orderbox mono mt-2">
   <h3  class="subtitle-1 font-weight-black pb-2 pl-1 " style="
    font-size: 18px;">Daftar Pemeriksaan
   <v-progress-circular 
   style="height:20px"
   v-show="loading" :indeterminate="true">
   </v-progress-circular>
   </h3>

   <div class="px" v-for="order in orders" >
      {{order.name}}
   </div>
</div>
</template>

<style scoped>
.orderbox{
   z-index:99;
   background-color: rgba(230, 255, 230,0.9);
   color:  #004d00;
   padding:20px;
   width:100%;
   display: block;
   max-height: 270px;
   overflow-y: scroll;
   border-radius-top: 10px;
   margin-top:10px;
   box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}
.px {
   padding:5px;
   width: 40%;
   border: 1px solid #004d00;
   display:inline-block;
   margin: 0px 2px 0px 2px;
}
</style>

<script>
module.exports = {
   components : {
   },
   computed: {
      orders() {
         return this.$store.state.order_info.orders
      },
      loading() {
         return this.$store.state.order_info.loading
      }
      ,show : {
         get() { return this.$store.state.order_info.show}
         ,set(v) { return this.$store.commit("order_info/update_show",v) }
      }
      ,sel_patient() {
         return this.$store.state.samplecall.selected_patient
      }
   },
   methods : {
   },
   watch : {
      async sel_patient(n,o) {
            this.$store.dispatch("order_info/search",{id:n.T_OrderHeaderID})
      }
   }
}
</script>
