<template>
<div>
   <v-dialog
      v-model="dialog_card"
      width="65%"
      >
      <v-card>
         <v-card-title
            class="teal subheading  white--text pt-2 pb-2"
            primary-title
            align-center
            >
            <span class="font-weight-thin">KARTU ANGGOTA</span>
         </v-card-title>
         <v-card-text class="pt-2 pb-1">
            <v-layout>
              <v-flex xs12>
                  <object :data="rpt_card"
                    width="100%" height="512px"></object>
              </v-flex>
          </v-layout>
         </v-card-text>
      </v-card>
   </v-dialog>
   <v-layout align-center row>
         <v-flex xs12>
            <v-card tile flat color=" pa-2 teal lighten-4">
               <h5 class=" subtitle-1 font-weight-bold">DATA PASIEN</h5>
            </v-card>
         </v-flex>
      </v-layout>
   <v-layout row wrap>
      
      <v-flex xs12>
         
         <v-layout>
            <v-flex xs3 pa-2>
               <v-layout row wrap>
                  <v-flex  v-if="patient.info" xs12>
                        <v-btn
                           class="mt-0 mb-0"
                           deppressed
                           small
                           @click="getHistories(patient.info.visit)"
                           color="teal lighten-3 white--text"
                           block
                           >
                           kunjungan ke {{ patient.info.visit }}
                        </v-btn>
                  </v-flex>
                  <v-flex xs12>
                      <v-card tile >
                        <v-img
                           :src="patient_photo"
                           aspect-ratio="1"
                           class="teal lighten-2 pt-2"
                           contain
                        >
                           <template v-slot:placeholder>
                           <v-layout
                              fill-height
                              align-center
                              justify-center
                              ma-0
                           >
                              <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                           </v-layout>
                           </template>
                        </v-img>
                      </v-card>
                  </v-flex>
                     <v-flex xs12>
                        <v-btn
                           class="mt-0 mb-0"
                           deppressed
                           small
                           color="teal lighten-3 white--text"
                           :dark="patient.M_PatientID ? true : false"
                           block
                           @click="update_photo"
                           :disabled="!patient.M_PatientID"
                           >
                           Update Foto
                        </v-btn>
                  </v-flex>
                        <v-flex xs12>
                           <v-btn
                              small
                              color="teal lighten-3 white--text"
                              :dark="patient.M_PatientID ? true : false"
                              block
                              @click="edit_patient"
                              :disabled="!patient.M_PatientID"
                              class="mt-1"
                              >
                              Ubah Data
                           </v-btn>
                        </v-flex>
                        <v-flex xs12>
                           <v-btn
                              small
                              color="teal lighten-3 white--text"
                              :dark="patient.M_PatientID ? true : false"
                              block
                              @click="generate_card"
                              :disabled="!patient.M_PatientID"
                              class="mt-1"
                              >
                              Cetak Kartu
                           </v-btn>
                        </v-flex>
                        <v-divider></v-divider>
                        <v-flex mt-0 xs12>
                     <patient-history-dialog> </patient-history-dialog>
                  </v-flex>

                  <!--<v-flex xs12 v-if="patient.info">
                        <div v-show="patient.info.birthday == 'Y'">Happy Birthday !</div>
                  </v-flex>-->
               </v-layout>



            </v-flex>

            <v-flex xs9>
               <v-flex xs12>
                  <v-layout class="text-truncate" pt-2>
                     <v-flex xs5 pa-1>
                        <v-text-field
                           label="Nama"
                           placeholder=""
                           style="font-size:12px;padding:4px 0"
                           :value="patient.M_PatientName"
                           :title="patient.M_PatientName"
                           readonly
                           ></v-text-field>
                     </v-flex>
                     <v-flex xs2 pa-1>
                        <v-text-field
                           label="PID"
                           style="font-size:12px;padding:4px 0"
                           placeholder=""
                           :value="patient.M_PatientNoReg"
                           readonly
                           ></v-text-field>
                     </v-flex>
                     <v-flex xs2 pa-1>
                        <v-text-field
                           style="font-size:12px;padding:4px 0"
                           label="Tanggal Lahir"
                           placeholder=""
                           :value="patient_dob"
                           readonly
                           ></v-text-field>
                     </v-flex>
                     <v-flex xs3 pa-1>
                        <v-text-field
                           style="font-size:12px;padding:4px 0"
                           label="Umur"
                           placeholder=""
                           v-model="patient_age"
                           readonly
                           ></v-text-field>
                     </v-flex>
                  </v-layout>

               </v-flex>

               <v-flex xs12 pa-1>

<v-text-field
         style="font-size:12px;padding:4px 0"
         label="Nomor ID"
         placeholder=""
         v-model="patient.M_PatientIDNumber"
         readonly
         :suffix="patient.idtype_name"
         ></v-text-field>
</v-flex>
               <v-flex xs12 pa-1>
                  <v-textarea
                     style="font-size:12px;padding:4px 0"
                     auto-grow
                     rows="3"
                     label="Alamat"
                     :value="patient.M_PatientAddress"
                     readonly
                     ></v-textarea>

               </v-flex>

               <v-flex xs12 pa-1>
                  <v-textarea
                     auto-grow
                     placeholder=""
                     label="Catatan Pasien"
                     rows="1"
                     style="font-size:12px;padding:4px 0"
                     v-model="patient_note"
                  ></v-textarea>
               </v-flex>

               <v-flex xs12 pa-1>
                  <v-textarea
                     auto-grow
                     label="Diagnosa"
                     rows="1"
                     style="font-size:12px;padding:4px 0"
                     v-model="diagnosa"
                     ></v-textarea>
               </v-flex>
              
            </v-flex>
         </v-layout>
         
      </v-flex>
      

      
      <patient-photo-dialog></patient-photo-dialog>
   </v-layout>

</div>
</template>

<style scoped>
.v-messages { display:none; }
.v-input__slot {
   margin-bottom: 0px;
}
</style>

<script>

module.exports = {
   components : {
      'patient-search-dialog': httpVueLoader('./patientSearchDialog.vue'),
      'patient-history-dialog': httpVueLoader('./patientHistoryDialog.vue'),
      'patient-photo-dialog': httpVueLoader('./oneDialogPhoto.vue')
   },
   data() {
      return {
            showinfo:false,
            dialog_card:false,
            rpt_card:''
      };
   },
   computed : {
      diagnosa: {
         get() {
            return this.$store.state.order.diagnosa
         },
         set(val) {
            this.$store.commit('order/update_diagnosa',val)
         }
      },
      patient() {
         return this.$store.state.patient.selected_patient
      },

      patient_note: {
         get() {
            return this.$store.state.order.patient_note
         },
         set(val) {
            this.$store.commit('order/update_patient_note',val)
         }
      },

      patient_age: {
         get () {
            return this.$store.state.patient.selected_patient.patient_age            
         },

         set (v) {
            return
         }
      },

      patient_dob () {
         try {
            return this.$store.state.patient.selected_patient.M_PatientDOB.split('-').reverse().join('-')
         } catch (e) {
         }
         
      },
      patient_photo () {
         return this.$store.state.photo.photo_url
      }
   },
   methods : {
      update_photo () {
         this.$store.commit('photo/update_dialog_photo', true)
      },
      edit_patient () {
         this.$store.commit('patient/update_edit', true)
         this.$store.commit('patient/update_patient_new_dialog_is_active', true)
      },
      getHistories(visit){
         console.log(visit)
         if(parseInt(visit) > 1){
            this.$store.dispatch('history/search')
         }
      },
      generate_card(){
         var xid = this.$store.state.patient.selected_patient.M_PatientID
         this.rpt_card = "/birt/run?__report=report/one/fo/rpt_card.rptdesign&__format=pdf&username=admin%20&PID="+xid
         this.dialog_card = true
      }
   }
}
</script>
