<template>
   <v-card class="xs12 md12 mt-2" >

      <v-data-table 
         :headers="headers" 
         :items="patients" 
         :loading="isLoading"
         hide-actions class="elevation-1">

         <template slot="footer">
            <td align="left" colspan="5">
               Hasil Pencarian ditemukan {{total}} pasien, ditampilkan {{total_display}}
            </td>
         </template>
         <template slot="no-data">
            <v-alert :value="isError" color="error" icon="warning">
               Data Pasien tidak di temukan
               {{errorMessage}}
            </v-alert>
         </template>


         <template slot="items" slot-scope="props">
            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.M_PatientNoReg }}</td>
            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.M_PatientName }}</td>
            <td class="pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.hp }}</td>
            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.M_PatientDOB }}</td>
            <td class="pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.M_PatientAddress}}</td>
         </template>

      </v-data-table>
   </v-card>
</template>

<style scoped>
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

table.v-table thead tr {
   height: 40px;
}
</style>

<script>
module.exports = {
   methods: {
      selectMe(pat) {
         this.$store.commit('patient/update_selected_patient',pat)
         this.$store.commit('patient/update_search_dialog_is_active',false)
         if (pat && pat.M_PatientNote ) {
            this.$store.commit('order/update_patient_note',pat.M_PatientNote)
         }

         this.$store.commit('patientaddress/testx', pat.M_PatientID);
         this.$store.dispatch('patientaddress/search')

         this.$store.commit('delivery/update_params', {p_id:pat.M_PatientID})
         this.$store.dispatch('delivery/search')
      }
   },
   computed : {
      isError() {
         return this.$store.state.patient.search_status == 3
      },
      errorMessage() {
         return this.$store.state.patient.search_error_message 
      },
      isLoading() {
         return this.$store.state.patient.search_status == 1
      },
      patients() {
         return this.$store.state.patient.patients
      },
      total() {
         return this.$store.state.patient.total_patient
      },
      total_display() {
         return this.$store.state.patient.total_display
      }
   },
   data() {
      return {
         headers: [
            {
               text: "NO RM",
               align: "left",
               sortable: false,
               value: "mr",
               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: "HP",
               align: "left",
               sortable: false,
               value: "hp",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "DOB",
               align: "left",
               sortable: false,
               value: "dob",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "ALAMAT",
               align: "left",
               sortable: false,
               value: "address",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
      };
   }
}
</script>
