<template>
   <v-card class="pa-2" flat>
      <v-layout>
         <v-flex xs2 pa-1>
            <v-text-field
               label="No Antrian"
               placeholder="No Antrian"
               single-line
               outline
               v-model="queue"
               hide-details
               ></v-text-field>
         </v-flex>
         <v-flex xs3 pa-1>
            <v-text-field
               label="Search"
               placeholder="PID"
               single-line
               outline
               v-model="noreg"
               @keyup.native="keyup"
               hide-details
               ></v-text-field>
         </v-flex>
         <v-flex xs4 pa-1>
            <v-text-field
               label=""
               placeholder="Nama + HP + DOB + Alamat"
               v-model="search"
               single-line
               outline
               hide-details
               @keyup.native="keyup"
               ></v-text-field>
         </v-flex>

         <v-flex xs3>
            <v-layout row wrap>
               <v-flex xs6>
                  <patient-search-dialog></patient-search-dialog>
               </v-flex>

               <v-flex xs6>
                  <one-fo-patient-new-dialog></one-fo-patient-new-dialog>
                  <!-- <v-btn color="primary" class="mr-1 ml-1" block>BARU</v-btn> -->
               </v-flex>
            </v-layout>


         </v-flex>
      </v-layout>

   </v-card>
</template>
<style scoped>
.v-btn {
   min-width: auto;
}

.v-input__slot {
   margin-bottom: 0px !important;
}

.v-messages {
   display: none;
}

.v-text-field--box>.v-input__control>.v-input__slot,.v-text-field--full-width>.v-input__control>.v-input__slot,.v-text-field--outline>.v-input__control>.v-input__slot {
   min-height: 44px;
}

.v-text-field--box.v-text-field--single-line input,.v-text-field--full-width.v-text-field--single-line input,.v-text-field--outline.v-text-field--single-line input {
   margin-top: 6px;
}
</style>
<script>
module.exports = {

   methods: {
      keyup(e) {
         if (e.which==13) {
            this.$store.commit('patient/update_search_dialog_is_active',true)
            this.$store.dispatch('patient/search')
         }
      }
   },
   computed: {
      noreg: {
         get() {
            return this.$store.state.patient.noreg
         },
         set(val) {
            this.$store.commit('patient/update_noreg',val)
         }
      },
      search: {
         get() {
            return this.$store.state.patient.search
         },
         set(val) {
            this.$store.commit('patient/update_search',val)
         }
      },
      queue : {
         get() {
            return this.$store.state.order.queue
         },
         
         set(v) {
            this.$store.commit('order/update_queue', v)
         }
      }
   },
   components : {
      'patient-search-dialog': httpVueLoader('./patientSearchDialog.vue'),
      'one-fo-patient-new-dialog': httpVueLoader('./patientNewDialog.vue')
   }
}
</script>
