<template>

   <v-dialog
      v-model="dialog"
      width="1000"
      >
      <v-btn
         slot="activator"
         color="primary"
         block
         class="mr-1 ml-1"
         >
         BARU
      </v-btn>

         <v-card>
            <v-card-title
               class="headline grey lighten-2 pt-2 pb-2"
               primary-title
               >
               Data Pasien Baru
            </v-card-title>
               <v-card-text class="pt-2 pb-2">
                  
                   <v-layout row>
                       <v-flex xs6 pr-3>
                           <v-layout row wrap>
                               <v-flex xs12>
                                   <v-text-field
                                        v-model="patient_new.M_PatientName"
                                        label="Nama Pasien"
                                        
                                    ></v-text-field>
                               </v-flex>
                               
                               <v-flex xs6 pr-2>
                                   <v-select
                                        v-model="selected_sex"
                                        :items="sex"
                                        item-value="M_SexID"
                                        item-text="M_SexName"
                                        label="Jenis Kelamin"
                                        return-object
                                        
                                   >

                                   </v-select>
                               </v-flex>

                               <v-flex xs6 pl-2>
                                   <v-select
                                        v-model="selected_title"
                                        :items="title"
                                        item-value="M_TitleID"
                                        item-text="M_TitleName"
                                        label="Titel"
                                        return-object
                                        
                                   >

                                   </v-select>
                               </v-flex>

                                <v-flex xs8 pr-3>
                                   <v-text-field
                                        v-model="patient_new.M_PatientPOB"
                                        label="Tempat Lahir"
                                        
                                    ></v-text-field>
                               </v-flex>

                               <v-flex xs4>
                                   <!-- <v-text-field
                                        v-model="patient_new.M_PatientDOB"
                                        label="Tanggal Lahir"
                                        
                                    ></v-text-field> -->
                                    <one-date-picker
                                        label="Tanggal Lahir"
                                        @change="set_date($event)"
                                    ></one-date-picker>
                               </v-flex>

                                <v-flex xs12>
                                   <v-text-field
                                        v-model="patient_new.M_PatientHP"
                                        label="No HP"
                                        
                                    ></v-text-field>
                               </v-flex>

                               <v-flex xs12>
                                   <v-text-field
                                        v-model="my_email"
                                        label="Alamat EMAIL"
                                        :rules="[email]"
                                    ></v-text-field>
                               </v-flex>
                                

                           </v-layout>

                           
                       </v-flex>

                       <v-flex xs6 pl-3>
                           <v-layout row wrap>
                               <v-flex xs12>
                                    <v-textarea
                                        v-model="patient_new.M_PatientAddressDescription"
                                        label="Alamat">
                                    </v-textarea>
                                   
                               </v-flex>

                               <v-flex xs12>
                                   <v-select
                                        v-model="selected_province"
                                        :items="provinces"
                                        item-text="M_ProvinceName"
                                        item-value="M_ProvinceID"
                                        return-object
                                        label="Propinsi"
                                        @change="get_city()"></v-select>
                               </v-flex>

                               <v-flex xs12>
                                   <v-select
                                        v-model="selected_city"
                                        :items="cities"
                                        item-text="M_CityName"
                                        item-value="M_CityID"
                                        return-object
                                        label="Kota"></v-select>
                               </v-flex>

                               <v-flex xs12>
                                   <v-select
                                        v-model="selected_district"
                                        :items="districts"
                                        item-text="M_DistrictName"
                                        item-value="M_DistrictID"
                                        return-object
                                        label="Kecamatan"></v-select>
                               </v-flex>

                               <v-flex xs12>
                                   <v-select
                                        v-model="selected_village"
                                        :items="villages"
                                        item-text="M_KelurahanName"
                                        item-value="M_KelurahanID"
                                        return-object
                                        label="Kelurahan"></v-select>
                               </v-flex>
                           </v-layout>
                       </v-flex>
                   </v-layout>

               </v-card-text>
               <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn
                     color="primary"
                     flat
                     @click="dialog = false"
                     >
                     Tutup
                  </v-btn>

                  <v-btn
                     color="primary"
                     @click="add_new()"
                     >
                     Simpan
                  </v-btn>

                  <v-btn
                     color="primary"
                     @click="add_use()"
                     >
                     Simpan dan Gunakan
                  </v-btn>
               </v-card-actions>
         </v-card>
   </v-dialog>

</template>

<style scoped>
.v-dialog__container {
   display: block !important;
}
</style>

<script>
module.exports = {
    components : {
        'one-date-picker' : httpVueLoader('../../common/oneDatePicker.vue')
    },
    data () {
        return {
            emailRules:[],
            email: value => {
                const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                return pattern.test(value) || 'Invalid e-mail.'
            }
        }
    },

   computed: {
       patient_new : {
           get () {
               return this.$store.state.patient.patient_new
           },
           set (v) {
               this.$store.commit('patient/update_patient_new', v)
           }
       }, 

      dialog: {
         get() {
            return this.$store.state.patient.patient_new_dialog_is_active
         },
         set(val) {
            this.$store.commit('patient/update_patient_new_dialog_is_active', val)
         }
      },

      sex () {
          return this.$store.state.other.sex
      },

      selected_sex : {
          get () {
              return this.$store.state.other.selected_sex
          },
          set (val) {
              this.$store.commit('other/update_selected_sex', val)
          }
      },

      title () {
          return this.$store.state.other.title
      },

      selected_title : {
          get () {
              return this.$store.state.other.selected_title
          },
          set (val) {
              this.$store.commit('other/update_selected_title', val)
          }
      },

      my_email : {
          get () {
              return ""
          },
          set (v) {
              return
          }
          
      },

      provinces () { return this.$store.state.area.provinces },
      selected_province : { 
          get () { return this.$store.state.area.selected_province },
          set (v) { 
              this.$store.commit('area/update_selected_area', {type:'province',val:v})
              this.$store.dispatch('area/search_city') }          
        },

      cities () { return this.$store.state.area.cities },
      selected_city : { 
          get () { return this.$store.state.area.selected_city },
          set (v) { this.$store.commit('area/update_selected_area', {type:'city',val:v})
                    this.$store.dispatch('area/search_district') }
        },

      districts () { return this.$store.state.area.districts },
      selected_district : { 
          get () { return this.$store.state.area.selected_district },
          set (v) { this.$store.commit('area/update_selected_area', {type:'district',val:v})
                    this.$store.dispatch('area/search_kelurahan') }
        },

      villages () { return this.$store.state.area.villages },
      selected_village : { 
          get () { return this.$store.state.area.selected_village },
          set (v) { this.$store.commit('area/update_selected_area', {type:'village',val:v}) }
        }
   },

   methods : {
       get_city() {
           return
       },

       add_new (use) {
           let prm = {
                M_PatientName : this.patient_new.M_PatientName,
                M_PatientM_TitleID : this.selected_title.M_TitleID,
                M_PatientSuffix : '',
                M_PatientM_SexID : this.selected_sex.M_SexID,
                M_PatientM_ReligionID : 1,
                M_PatientDOB : this.patient_new.M_PatientDOB,
                M_PatientHP : this.patient_new.M_PatientHP,
                M_PatientPhone : this.patient_new.M_PatientPhone,
                M_PatientEmail : this.patient_new.M_PatientEmail,
                
                M_PatientM_IdTypeID : 0,
                M_PatientIDNumber : 0,
                M_PatientNote : '',

                M_PatientAddressDescription : this.patient_new.M_PatientAddressDescription,
                M_PatientAddressM_KelurahanID : this.selected_village.M_KelurahanID
           }
           if (use) { prm.use = true }

           this.$store.dispatch('patient/add_new', prm)
           this.dialog = false
       },

       add_use () {
           this.add_new(true)
       },

       set_date (x) {
           this.patient_new.M_PatientDOB = x.new_date
       }
   },

   watch : {
       my_email (v, o) {
           if (v == "") {
               this.email = value => {
                   return /\s/ || 'Hahaha'
               }
           } else {
               this.email = value => {
                    const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                    return pattern.test(value) || 'Invalid e-mail.'
                }
           }
       }    
   },

   mounted () {
       this.$store.dispatch('area/search_province')
       this.$store.dispatch('other/search_sex')
    //    this.$store.dispatch('area/search_city')
   }
}
</script>
