<template>
   <v-layout class="fill-height" column>
      <v-card   class="mb-2 pa-2 searchbox">
         <v-layout >
            <v-text-field class="xs3 ma-1"
                          placeholder="No Lab"
                          single-line
                          outline
                          v-model="nolab"
                          hide-details
                          ></v-text-field>

               <v-text-field class="xs6 ma-1"
                             label=""
                             placeholder="Nama"
                             single-line
                             outline
                             v-model="name"
                             hide-details
                             ></v-text-field>

               <v-select class="xs6 ma-1" :items="statuses" 
                  item-text="name"
                  return-object
                  v-model="status"
                  label="Status" outline   hide-details></v-select>
            <v-btn class="xs3 ma-1" color="success"  @click="searchPatient" >Search</v-btn>
         </v-layout>
      </v-card>
      <v-card >
         <v-layout row>
            <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
               <v-data-table 
                  :headers="headers" 
                  :items="patients"
                  :loading="isLoading"
                  hide-actions class="elevation-1">
                  <template slot="items" slot-scope="props">
                     <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_PatientNoReg }}</td>
                     <td class="pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_OrderHeaderLabNumber}}</td>
                     <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_PatientName}}</td>
                     <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_StatusName}}</td>
                  </template>
               </v-data-table>
            </v-flex>
         </v-layout>
      </v-card>
      <one-dialog-alert :status="openalertverification" :msg="msgalertverification" @forget-dialog-alert="forgetAlertVerification()" @close-dialog-alert="closeAlertVerification()"></one-dialog-alert>
      <one-dialog-info :status="opendialogverification" :msg="msginfoverification" @close-dialog-info="closeInfoVerification()"></one-dialog-info>
   </v-layout>
</template>

<style scoped>
.searchbox .v-input.v-text-field .v-input__slot{
   min-height:60px;
}
.searchbox .v-btn {
   min-height:60px;
}
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

table.v-table thead tr {
   height: 40px;
}

</style>

<script>
module.exports = {
components : {
      'one-dialog-info':httpVueLoader('../../common/oneDialogInfo.vue'),
      'one-dialog-alert':httpVueLoader('../../common/oneDialogAlert.vue')
   },
   mounted() {
      this.$store.dispatch("status/lookup")
      this.$store.dispatch("delivery/lookup")
      this.$store.dispatch("patient/search",{
            name:this.name,
            nolab: this.nolab,
            status: this.status.id
         })
   },
   methods : {
      isSelected(p) {
         return p.T_OrderHeaderID == this.$store.state.patient.selected_patient.T_OrderHeaderID
      },
      searchPatient() {
         this.$store.dispatch("patient/search",{
            name:this.name,
            nolab: this.nolab,
            status: this.status.id
         })
      },
      selectMe(pat) {
            //console.log(pat.verification_patient)
            if(this.$store.state.supplies.no_save == 0 && this.$store.state.patient.no_save == 0){
                  this.$store.commit("patient/update_selected_patient",pat)
                  this.$store.commit("verification/update_verification_patient",pat.verification_patient)
                  this.$store.commit("verification/update_verification_doctor",pat.verification_doctor)
                  this.$store.commit("verification/update_verification_delivery",pat.verification_delivery)
                  this.$store.commit("verification/update_verification_payment",pat.verification_payment)
                  this.$store.commit("verification/update_verification_supplies",pat.verification_supplies)
                  this.$store.commit("verification/update_verification_barcode",pat.verification_barcode)
                  this.$store.commit("verification/update_verification_company_mou",pat.verification_companymou)
                  this.$store.commit("verification/update_verification_px",pat.verification_px)
                  this.$store.commit("verification/update_verification_info",pat.verification_info)
                  this.$store.commit("px/update_moucompany",pat)
                  this.$store.commit("delivery/update_address_patient",pat.address_patient)
                  this.$store.commit("delivery/update_address_doctor",pat.address_doctor)
                  this.$store.commit("delivery/update_hp_patient",pat.M_PatientHP)
                  this.$store.commit("delivery/update_hp_doctor",pat.M_DoctorHP)
            }
            else{
                  if(this.$store.state.supplies.no_save !== 0){
                        this.$store.commit("supplies/update_open_alert_supplies",true)
                  }
                  if(this.$store.state.patient.no_save !== 0){
                        this.$store.commit("patient/update_open_alert_verification",true)
                  }
            }
         
      },
      closeInfoVerification(){
            this.$store.commit("patient/update_open_dialog_verification",false)
            var oldArr = this.$store.state.patient.patients
            var idx = _.findIndex(oldArr, ['T_OrderHeaderID', this.$store.state.patient.selected_patient.T_OrderHeaderID])
            oldArr.splice(idx,1)
            if(oldArr.length > 0){
               var newArr = {'records':oldArr,'total':oldArr.length}
               this.$store.commit("patient/update_patients",newArr)
               this.$store.commit("patient/update_selected_patient",oldArr[0])
               this.$store.commit("verification/update_verification_patient",oldArr[0].verification_patient)
               this.$store.commit("verification/update_verification_doctor",oldArr[0].verification_doctor)
               this.$store.commit("verification/update_verification_delivery",oldArr[0].verification_delivery)
               this.$store.commit("verification/update_verification_payment",oldArr[0].verification_payment)
               this.$store.commit("verification/update_verification_supplies",oldArr[0].verification_supplies)
               this.$store.commit("verification/update_verification_barcode",oldArr[0].verification_barcode)
               this.$store.commit("verification/update_verification_company_mou",oldArr[0].verification_companymou)
               this.$store.commit("verification/update_verification_px",oldArr[0].verification_px)
               this.$store.commit("verification/update_verification_info",oldArr[0].verification_info)
               this.$store.commit("px/update_moucompany",oldArr[0])
            }else{
               var newArr = {'records':[],'total':0}
               this.$store.commit("patient/update_patients",newArr)
               this.$store.commit("patient/update_selected_patient",{})
               this.$store.commit("verification/update_verification_patient",[])
               this.$store.commit("verification/update_verification_doctor",[])
               this.$store.commit("verification/update_verification_delivery",[])
               this.$store.commit("verification/update_verification_payment",[])
               this.$store.commit("verification/update_verification_supplies",[])
               this.$store.commit("verification/update_verification_barcode",[])
               this.$store.commit("verification/update_verification_company_mou",[])
               this.$store.commit("verification/update_verification_px",[])
               this.$store.commit("verification/update_verification_info",null)
               this.$store.commit("px/update_moucompany",[])
            }
      },
       closeAlertVerification(){
          this.$store.commit("patient/update_open_alert_verification",false)
      },
      forgetAlertVerification(){
          this.$store.commit("patient/update_no_save",0)
          this.$store.commit("patient/update_open_alert_verification",false)
      }
   },
   computed: {
      statuses() {
         return this.$store.state.status.statuses
      },
      status: {
         get() {
            return this.$store.state.status.selected_status
         },
         set(val) {
            this.$store.commit("status/update_selected_status",val)
         }
      },
      isLoading() {
         return this.$store.state.patient.search_status == 1
      },
      patients() {
         return this.$store.state.patient.patients
      },
      opendialogverification: {
            get() {
                  return this.$store.state.patient.open_dialog_verification
            },
            set(val) {
                  this.$store.commit("patient/update_open_dialog_verification",false)
            }
      },
      msginfoverification(){
            return this.$store.state.patient.msg_info_verification
      },
      openalertverification: {
            get() {
                return this.$store.state.patient.open_alert_verification
            },
            set(val) {
                this.$store.commit("patient/open_alert_verification",false)
            }
        },
        msgalertverification(){
            return this.$store.state.patient.msg_alert_verification
        },
   },
   data() {
      return {
         items: [],
         name: '',
         nolab: '',
         headers: [
            {
               text: "NO REG",
               align: "left",
               sortable: false,
               value: "mr",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NO LAB",
               align: "left",
               sortable: false,
               value: "lab",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NAMA",
               align: "left",
               sortable: false,
               value: "name",
               width: "25%",
               class: "pa-2 blue lighten-3 white--text"
            },

            {
               text: "STATUS",
               align: "left",
               sortable: false,
               value: "status",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
      };
   }
}
</script>
