<template>
   <div>
     <v-layout wrap>
            <v-flex xs12 pl-0 pr-0 pt-2 pb-2>
               <v-data-table 
                  :headers="headers" 
                  :items="patients" 
                  :loading="isLoading"
                  hide-actions class="elevation-1">

         
                  <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 caption mono pt-1 pb-1 pl-2 " v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.M_PatientNoReg }}</td>
                     <td class="text-xs-left caption mono  pa-1" v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.M_PatientName }}</td>
                     <td class="pa-1 caption mono " v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.hp }}</td>
                     <td class="text-xs-left caption mono  pa-1" v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.dob_ina}}</td>
                     <td class="pa-1 caption mono " v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.M_PatientAddress}}</td>
                  </template>

               </v-data-table>
               <div class="text-xs-center pt-2">
                  <v-btn  :loading="loading" dark v-if="show_more" @click="showMore()" small color="teal lighten-3">
                     Tampilkan lebih banyak
                    <template v-slot:loader>
                       sedang memuat ...
                     </template>
                  </v-btn>
                  <v-btn depressed v-if="!show_more" small color="grey lighten-2">Tidak ada lagi data</v-btn>
               </div>
         </v-flex>
         </v-layout>
 
         <v-dialog
               persistent
               v-model="dialog_birthday"
               width="70%"
            >

               <v-card>
        <v-card-title
          class="headline teal white--text"
          primary-title
        >
         HAPPY BIRTHDAY : UCAPKAN SELAMAT ULANG TAHUN KEPADA PASIEN
        </v-card-title>
        <v-card-text>
            <v-layout row>
               <v-flex xs12>
                  <v-img
                     
                     src="../../../libs/image/hb.png"
                     contain
                  >
                     <v-layout
                        align-center
                        column
                        justify-center
                     >
                        
                     </v-layout>
                  </v-img>
               </v-flex>
            </v-layout>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog_birthday = false"
          >
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog> 
   </div>
</template>

<style scoped>
.custom-loader {
    animation: loader 1s infinite;
    display: flex;
  }
  @-moz-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @-o-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

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

<script>
module.exports = {
   methods: {
      showMore(){
         if(!this.loading){
            this.$store.commit('patient/update_loading', true)
            var xnow = this.curr_page
            this.curr_page = xnow + 1
         }
         
      },
      selectMe(pat) {
         this.$store.commit('patient/update_selected_patient', pat)
         console.log(pat.info.birthday)
         if(pat.info.birthday === 'Y')
            this.dialog_birthday = true

         this.$store.commit('patient/update_search_dialog_is_active',false)

         this.$store.commit('order/update_patient_note', "")
         if (pat && pat.M_PatientNote )
            this.$store.commit('order/update_patient_note', pat.M_PatientNote)
         this.$store.commit('order/update_catatan_fo', "")

         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_deliveries',{type:'patient',id:pat.M_PatientID})

         // clear search
         this.$store.commit('patient/update_search', '')

         // Clear delivery
         this.$store.commit('delivery/update_checked_id', [])

         // Photo module
         this.$store.commit('photo/update_patient_id', pat.M_PatientID)
         if (pat.M_PatientPhoto == null || pat.M_PatientPhoto == "")
            this.$store.commit('photo/update_photo_url', this.$store.state.photo.default_photo_url)
         else
            this.$store.commit('photo/update_photo_url', pat.M_PatientPhoto + "?r=" + Math.round(Math.random() * 1000000000))

        // HISTORIES
        //this.$store.dispatch('history/search')
      }
   },
   computed : {
      loading() {
         return this.$store.state.patient.loading
      },
      show_more() {
         return this.$store.state.patient.show_more
      },
      curr_page: {
         get() {
            return this.$store.state.patient.current_page
         },
         set(val) { 
            this.$store.commit("patient/update_current_page",val)
            this.$store.dispatch('patient/search')
         }
      },
      xtotal_page: {
         get() {
            return this.$store.state.patient.total_patient
         },
         set(val) {
            this.$store.commit("patient/update_total_patient",val)
         }
      },
      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
      },
      dialog_birthday() {
         return this.$store.state.patient.dialog_birthday
      },
      dialog_birthday: {
            get() {
                return this.$store.state.patient.dialog_birthday
            },
            set(val) {
                this.$store.commit('patient/update_dialog_birthday', val)
                // this.$store.commit('language/update_selected_language_2', null)

                
            }
        },

   },
   data() {
      return {
         headers: [
            {
               text: "NO RM",
               align: "left",
               sortable: false,
               value: "mr",
               width: "15%",
               class: "pa-2 teal lighten-3 white--text"
            },
            {
               text: "NAMA",
               align: "left",
               sortable: false,
               value: "name",
               width: "25%",
               class: "pa-2 teal lighten-3 white--text"
            },
            {
               text: "HP",
               align: "left",
               sortable: false,
               value: "hp",
               width: "15%",
               class: "pa-2 teal lighten-3 white--text"
            },
            {
               text: "DOB",
               align: "left",
               sortable: false,
               value: "dob",
               width: "15%",
               class: "pa-2 teal lighten-3 white--text"
            },
            {
               text: "ALAMAT",
               align: "left",
               sortable: false,
               value: "address",
               class: "pa-2 teal lighten-3 white--text"
            }
         ],
      };
   }
}
</script>
