<template>

   <v-dialog
      v-model="dialog"
      width="1000"
      >
      <v-btn
         slot="activator"
         color="primary"
         class="ma-1 one-btn-icon"
         >
         <span class="icon-add"></span>
      </v-btn>

         <v-card>
            <v-card-title
               class="headline grey lighten-2 pt-2 pb-2"
               primary-title
               >
               Data Dokter 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-flex xs6 pr-2>
                               </v-flex>

                               <v-flex xs6 pl-2>
                               </v-flex>

                                <v-flex xs8 pr-3>
                               </v-flex>

                               <v-flex xs4>
                               </v-flex>

                                <v-flex xs12>
                               </v-flex>

                               <v-flex xs12>
                               </v-flex>

                               <v-flex xs4 pr-2>
                               </v-flex>

                               <v-flex xs8>
                               </v-flex>
                                

                           </v-layout>

                           
                       </v-flex>

                       <v-flex xs6 pl-3>
                           <v-layout row wrap>
                               <v-flex xs12>
                                   
                               </v-flex>

                               <v-flex xs12>
                               </v-flex>

                               <v-flex xs12>
                               </v-flex>

                               <v-flex xs12>
                               </v-flex>

                               <v-flex xs12>
                               </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-card-actions>
         </v-card>
   </v-dialog>

</template>

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

.one-btn-icon { font-size: 1.5em; height: 42px; float: right }
</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.'
            },
            id_number: '',
            my_email: ''
        }
    },

   computed: {
       doctor_new : {
           get () {
               return this.$store.state.doctor.doctor_new
           },
           set (v) {
               this.$store.commit('doctor/update_doctor_new', v)
           }
       }, 

      dialog: {
         get() {
            return this.$store.state.doctor.doctor_new_dialog_is_active
         },
         set(val) {
            this.$store.commit('doctor/update_doctor_new_dialog_is_active', val)
         }
      },

      sex () {
          return this.$store.state.doctor.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)
          }
      },

      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}) }
        },

        idtypes () {
            return this.$store.state.patient.idtypes
        },

        selected_idtype : {
            get () { return this.$store.state.patient.selected_idtype },
            set (v) { this.$store.commit('patient/update_selected_idtype', v) }
        }
   },

   methods : {
       get_city() {
           return
       },

       add_new (use) {
           let prm = {
                M_PatientName : this.doctor_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.doctor_new.M_PatientDOB,
                M_PatientHP : this.doctor_new.M_PatientHP,
                M_PatientPhone : this.doctor_new.M_PatientPhone,
                M_PatientEmail : this.my_email,
                
                M_PatientM_IdTypeID : (this.selected_idtype.M_IdTypeID ? this.selected_idtype.M_IdTypeID : 0),
                M_PatientIDNumber : this.doctor_new.M_PatientIDNumber,
                M_PatientNote : '',

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

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

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

       set_date (x) {
           this.doctor_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('patient/search_idtype')
   }
}
</script>
