<template>
   <v-layout row wrap>
      <v-flex xs12>

         <v-layout>
            <v-flex xs3 pa-2>
               <v-layout row wrap>
                  <v-flex xs12>
                     <v-img
                        :src="patient_photo"
                        aspect-ratio="1"
                        class="grey lighten-2 elevation-2"
                        contain
                        >
                  </v-flex>

                        <v-flex xs12>
                           <v-btn
                              color="green 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>
                           <patient-history-dialog> </patient-history-dialog>
                        </v-flex>
               </v-layout>



            </v-flex>

            <v-flex xs9>
               <v-flex xs12>
                  <v-layout>
                     <v-flex xs7 pa-1>
                        <v-text-field
                           label="Nama"
                           placeholder=""
                           :value="patient.M_PatientName"
                           readonly
                           ></v-text-field>
                     </v-flex>
                     <v-flex xs5 pa-1>
                        <v-text-field
                           label="RM"
                           placeholder=""
                           :value="patient.M_PatientNoReg"
                           readonly
                           ></v-text-field>
                     </v-flex>
                  </v-layout>

               </v-flex>

               <v-flex xs12 pa-1>
                  <v-textarea
                     auto-grow
                     label="Alamat"
                     rows="5"
                     :value="patient.M_PatientAddress"
                     readonly
                     ></v-textarea>

               </v-flex>

               <v-flex xs12 pa-1>
                  <v-text-field
                     label="HP"
                     placeholder=""
                     :value="patient.M_PatientHP"
                     readonly
                     ></v-text-field>
               </v-flex>

               <v-flex xs12>
                  <v-layout>
                     <v-flex xs7 pa-1>
                        <v-text-field
                           label="Tanggal Lahir"
                           placeholder=""
                           :value="patient_dob"
                           readonly
                           ></v-text-field>
                     </v-flex>

                     <v-flex xs5 pa-1>
                        <v-text-field
                           label="Umur"
                           placeholder=""
                           v-model="patient_age"
                           readonly
                           ></v-text-field>
                     </v-flex>
                  </v-layout>
               </v-flex>



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

      </v-flex>


      <v-flex xs12>
         <v-divider></v-divider>
         <v-layout row wrap>
            <v-flex xs12 class="pt-3 pl-2">
               <v-textarea
                  auto-grow
                  label="Catatan Pasien"
                  rows="3"
                  v-model="patient_note"
                  ></v-textarea>
            </v-flex>
         </v-layout>
      </v-flex>
      <patient-photo-dialog></patient-photo-dialog>
   </v-layout>


</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')
   },
   computed : {
      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)
      }
   }
}
</script>
