<template>

   <v-dialog
      v-model="dialog"
      width="1000"
      >
      <v-btn
         slot="activator"
         color="primary"
         class="ma-1 one-btn-icon"
         @click="new_patient"
         >
         <span class="icon-add"></span>
      </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"
                                        :error="errors.name"
                                        :rules="[rules.name]"
                                    ></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
                                        :error="errors.sex"
                                        :rules="[rules.sex]"
                                   >

                                   </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
                                        :error="errors.title"
                                        :rules="[rules.title]"
                                   >

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

                                <v-flex xs8 pr-3>
                                   <v-text-field
                                        v-model="patient_new.M_PatientPOB"
                                        label="Tempat Lahir"
                                        :error="errors.pob"
                                        :rules="[rules.pob]"
                                    ></v-text-field>
                               </v-flex>

                               <v-flex xs4>
                                   <v-text-field
                                        v-model="patient_new.M_PatientDOB"
                                        label="Tanggal Lahir"
                                        return-masked-value
                                        mask="##-##-####"
                                        :rules="[rules.dob]"
                                        :error="errors.dob"
                                    ></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"
                                        :error="errors.hp"
                                        :rules="[rules.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-flex xs4 pr-2>
                                   <v-select
                                        v-model="selected_idtype"
                                        :items="idtypes"
                                        item-value="M_IdTypeID"
                                        item-text="M_IdTypeName"
                                        label="Tipe ID"
                                        return-object
                                        clearable
                                   >
                                   </v-select>
                               </v-flex>

                               <v-flex xs8>
                                   <v-text-field
                                        v-model="patient_new.M_PatientIDNumber"
                                        label="Nomor ID"
                                    ></v-text-field>
                               </v-flex>
                                
                                <v-flex xs12>
                                    <v-textarea
                                        v-model="patient_new.M_PatientNote"
                                        label="Catatan Pasien"
                                        rows="2">
                                    </v-textarea>
                                   
                                </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"
                                        :error="errors.address"
                                        :rules="[rules.address]">
                                    </v-textarea>
                                   
                               </v-flex>

                               <v-flex xs12>
                                   <v-autocomplete
                                        :items="provinces"
                                        item-text="M_ProvinceName"
                                        item-value="M_ProvinceID"
                                        label="Propinsi"
                                        v-model="selected_province"
                                        clearable
                                        return-object
                                    ></v-autocomplete>
                                   <!-- <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-autocomplete
                                        :items="cities"
                                        item-text="M_CityName"
                                        item-value="M_CityID"
                                        label="Kota"
                                        v-model="selected_city"
                                        clearable
                                        return-object
                                    ></v-autocomplete>
                                   <!-- <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-autocomplete
                                        :items="districts"
                                        item-text="M_DistrictName"
                                        item-value="M_DistrictID"
                                        label="Kecamatan"
                                        v-model="selected_district"
                                        clearable
                                        return-object
                                    ></v-autocomplete>
                                   <!-- <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-autocomplete
                                        :items="villages"
                                        item-text="M_KelurahanName"
                                        item-value="M_KelurahanID"
                                        label="Kelurahan"
                                        v-model="selected_village"
                                        clearable
                                        :error="errors.kelurahan"
                                        :rules="[rules.kelurahan]"
                                        return-object
                                    ></v-autocomplete>
                                   <!-- <v-select
                                        v-model="selected_village"
                                        :items="villages"
                                        item-text="M_KelurahanName"
                                        item-value="M_KelurahanID"
                                        return-object
                                        label="Kelurahan"
                                        :error="errors.kelurahan"
                                        :rules="[rules.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()"
                     :disabled="!btn_save_enabled"
                     >
                     Simpan
                  </v-btn>

                  <v-btn
                     color="primary"
                     @click="add_use()"
                     :disabled="!btn_save_enabled"
                     v-show="!edit"
                     >
                     Simpan dan Gunakan
                  </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: '',
            rules: {
                dob: value => {
                    // const pattern = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/
                    const pattern = /^(((0[1-9]|[12]\d|3[01])-(0[13578]|1[02])-((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)-(0[13456789]|1[012])-((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])-02-((19|[2-9]\d)\d{2}))|(29-02-((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/
                    let x = pattern.test(value)
                    this.errors.dob = !x
                    return pattern.test(value) || 'Format : dd-mm-yyyy !'
                },
                name: value => { this.errors.name = !value; return !!value || "Harus diisi !" },
                sex: value => { this.errors.sex = !value.M_SexID; return !!value.M_SexID || "Harus diisi !" },
                title: value => { this.errors.title = !value.M_TitleID; return !!value.M_TitleID || "Harus diisi !" },
                pob: value => { this.errors.pob = !value; return !!value || "Harus diisi !" },
                hp: value => { this.errors.hp = !value; return !!value || "Harus diisi !" },
                address: value => { this.errors.address = !value; return !!value || "Harus diisi !" },
                kelurahan: value => { this.errors.kelurahan = !value; return !!value || "Harus diisi !" }
            },

            errors: { dob: false, name: false, sex: false, title: false, hp: false,
                      address: false, province: false, city: false, district: false, kelurahan: false
            }
        }
    },

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

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

        btn_save_enabled () {
            if (this.errors.dob || this.errors.name || this.errors.sex ||
                this.errors.title || this.errors.pob || this.errors.hp ||
                this.errors.address || this.errors.kelurahan) return false

            console.log(this.errors)

            return true
        },

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

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

   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_PatientPOB : this.patient_new.M_PatientPOB,
                M_PatientDOB : this.patient_new.M_PatientDOB,
                M_PatientHP : this.patient_new.M_PatientHP,
                M_PatientPhone : this.patient_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.patient_new.M_PatientIDNumber,
                M_PatientNote : this.patient_new.M_PatientNote,

                M_PatientAddressDescription : this.patient_new.M_PatientAddressDescription,
                M_PatientAddressM_KelurahanID : this.selected_village.M_KelurahanID
           }
           if (use || this.edit) { 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
       },

        new_patient() {
            this.$store.commit('patient/update_edit', false)
        }
   },

   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.'
                }
           }
       },
       
       dialog (val, old) {
            if (val && !old) {

                if (this.edit) {
                    let x = this.patient_new
                    let y = this.selected_patient
                    x.M_PatientName = y.M_PatientRealName
                    x.M_PatientDOB = y.M_PatientDOB.split('-').reverse().join('-')
                    x.M_PatientPOB = y.M_PatientPOB
                    x.M_PatientHP = y.M_PatientHP
                    x.M_PatientEmail = y.M_PatientEmail
                    x.M_PatientNote = y.M_PatientNote
                    x.M_PatientIDNumber = y.M_PatientIDNumber
                    x.M_PatientAddressDescription = y.M_PatientAddressDescription

                    this.patient_new = x

                    // SEX
                    let sex = this.$store.state.other.sex
                    for (let i in sex) 
                        if (sex[i].M_SexID == y.M_SexID) 
                            this.selected_sex = sex[i]

                    // TITLE
                    let title = this.$store.state.other.title
                    for (let i in title)
                        if (title[i].M_TitleID = y.M_TitleID)
                            this.selected_title = title[i]

                    // ID TYPE
                    this.selected_idtype = null
                    let idtype = this.$store.state.patient.idtypes
                    for (let i in idtype)
                        if (idtype[i].M_IdTypeID == y.M_PatientM_IdTypeID)
                            this.selected_idtype = idtype[i] 
                    
                    this.selected_title = {M_TitleID:y.M_TitleID, M_TitleName:y.M_TitleName}

                    // ERRORS
                    let err = { dob: false, name: false, sex: false, title: false, hp: false,
                      address: false, province: false, city: false, district: false, kelurahan: false}
                    this.errors = err
                    
                } else {
                    let x = this.patient_new
                    x.M_PatientName = ""
                    x.M_PatientDOB = ""
                    x.M_PatientPOB = ""
                    x.M_PatientHP = ""
                    x.M_PatientEmail = ""
                    x.M_PatientAddressDescription = ""
                    x.M_PatientIDNumber = ""
                    this.patient_new = x
                    this.selected_sex = {}
                    this.selected_title = {}
                    this.selected_idtype = {}

                    
                }

                this.$store.dispatch('area/search_province')
           }
       }
   },

   mounted () {
    //    this.$store.dispatch('area/search_province')
       this.$store.dispatch('other/search_sex')

       this.$store.dispatch('patient/search_idtype')
    //    this.$store.dispatch('area/search_city')
   }
}
</script>
