<template>

   <v-dialog
        persistent
        v-model="dialog"
        width="1000"
      >
        <v-btn 
            class="mt-1" 
            fab 
            small  
            slot="activator" 
            title="tambahkan pasien baru"  
            @click="new_patient"  
            dark 
            color="teal lighten-2">
        <v-icon dark>add</v-icon>
      </v-btn>
         <v-card>
            <v-card-title
               class="teal lighten-2 white--text pt-2 pb-2"
               primary-title
               >
               {{ dialog_title }}            
               </v-card-title>
               <v-card-text class="pt-2 pb-2">
                  
                   <v-layout pt-2 row>
                       <v-flex xs6 pr-3>
                           <v-layout row wrap>
                                <v-flex xs3 pr-1>
                                   <v-text-field
                                        style="font-size:12px;padding:4px 0"
                                        v-model="patient_new.M_PatientPrefix"
                                        label="Awalan"
                                    ></v-text-field>
                                </v-flex>
                                <v-flex xs6>
                                   <v-text-field
                                        style="font-size:12px;padding:4px 0"
                                        v-model="patient_new.M_PatientName"
                                        label="Nama Pasien"
                                        :error="errors.name"
                                        :rules="[rules.name]"
                                        :disabled="edit"
                                    ></v-text-field>
                                </v-flex>
                                <v-flex xs3 pl-1>
                                   <v-text-field
                                        style="font-size:12px;padding:4px 0"
                                        v-model="patient_new.M_PatientSuffix"
                                        label="Akhiran"
                                     
                                    ></v-text-field>
                                </v-flex>
                                <v-flex xs6 pr-2>
                                    <v-select
                                        style="font-size:12px;padding:4px 0"
                                        v-model="selected_gender"
                                        :items="genders"
                                        item-value="id"
                                        item-text="name"
                                        label="Jenis Kelamin"
                                        return-object
                                        :error="errors.gender"
                                        :rules="[rules.gender]"
                                        :disabled="edit"
                                    >
                                    </v-select>
                                </v-flex>
                                <v-flex xs6 pl-2>
                                    <v-select
                                        style="font-size:12px;padding:4px 0"
                                        item-text="M_TitleName"
                                        return-object
                                        :items="title"
                                        v-model="selected_title"
                                        hide-details
                                        label="Title"
                                        :error="errors.title"
                                        :rules="[rules.title]"
                                    ></v-select>
                                </v-flex>
                                <v-flex xs4 pr-3>
                                    <v-text-field
                                        style="font-size:12px;padding:4px 0"
                                        v-model="patient_new.M_PatientPOB"
                                        label="Tempat Lahir"
                                        :error="errors.pob"
                                        :rules="[rules.pob]"
                                    ></v-text-field>
                                </v-flex>
                                <v-flex xs4 pr-3>
                                    <v-text-field
                                        style="font-size:12px;padding:4px 0"
                                        v-model="age_years"
                                        label="Umur (tahun)"
                                        return-masked-value
                                    ></v-text-field>
                                </v-flex>
                                <v-flex xs4>
                                    <v-text-field
                                        style="font-size:12px;padding:4px 0"
                                        v-model="patient_new.M_PatientDOB"
                                        label="Tanggal Lahir"
                                        return-masked-value
                                        mask="##-##-####"
                                        :rules="[rules.dob]"
                                        :error="errors.dob"
                                        v-if="dialog"
                                        :disabled="edit"
                                    ></v-text-field>
                                </v-flex>
                                <v-flex xs6 pr-3>
                                    <v-select
                                        style="font-size:12px;padding:4px 0"
                                        item-text="display"
                                        item-value="code"
                                        return-object
                                        :items="religions"
                                        v-model="selected_religion"
                                        hide-details
                                        label="Agama"
                                    ></v-select>
                                </v-flex>
                                <v-flex xs6>
                                   <v-text-field
                                        style="font-size:12px;padding:4px 0"
                                        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
                                        style="font-size:12px;padding:4px 0"
                                        v-model="my_email"
                                        label="Email"
                                        hint="Pisahkan dengan (koma) jika email lebih dari satu"
                                    ></v-text-field>
                                </v-flex>
                                <v-flex xs8 pr-2>
                                    <v-select
                                        style="font-size:12px;padding:4px 0"
                                        v-model="selected_idtype"
                                        :items="idtypes"
                                        item-value="id"
                                        item-text="display"
                                        label="Tipe ID"
                                        return-object
                                        clearable
                                    >
                                    </v-select>
                                </v-flex>
                                <v-flex xs4>
                                    <v-text-field
                                        style="font-size:12px;padding:4px 0"
                                        v-model="patient_new.M_PatientIDNumber"
                                        label="Nomor ID"
                                    ></v-text-field>
                                </v-flex>   
                                <v-flex xs12>
                                    <v-textarea
                                        style="font-size:12px;padding:4px 0"
                                        v-model="patient_new.M_PatientNote"
                                        label="Catatan Pasien"
                                        auto-grow
                                        rows="1">
                                    </v-textarea>
                                </v-flex>
                                <v-flex xs12>
                                    <v-select
                                        label="Golongan Darah"
                                        v-model="selected_blood_type"
                                        :items="blood_types"
                                        item-text="display"
                                        item-value="id"
                                        return-object
                                    ></v-select>
                                </v-flex>
                                <v-flex xs12>
                                    <v-select
                                        label="Rhesus Darah"
                                        v-model="selected_blood_rh_type"
                                        :items="blood_rh_types"
                                        item-text="display"
                                        item-value="id"
                                        return-object
                                    ></v-select>
                                </v-flex>
                                <v-flex xs12>
                                    <v-autocomplete
                                        label="Pendidikan"
                                        v-model="selected_education_type"
                                        :items="education_types"
                                        item-text="display"
                                        item-value="id"
                                        :search-input.sync="search_education_type"
                                        clearable
                                        return-object
                                    ></v-autocomplete>
                                </v-flex>
                                <v-flex xs12>
                                    <v-autocomplete
                                        label="Etnis"
                                        v-model="selected_etnic_type"
                                        :items="etnic_types"
                                        item-text="display"
                                        item-value="id"
                                        :search-input.sync="search_etnic_type"
                                        clearable
                                        return-object
                                    ></v-autocomplete>
                                </v-flex>
                           </v-layout>
                            
                        </v-flex>
                        
                        <v-flex xs6 pl-3>
                            <v-layout row wrap>
                      
                                <v-flex xs12 pr-3>
                                    <v-autocomplete
                                        label="Cari Negara"
                                        v-model="selected_country"
                                        :items="countries"
                                        :search-input.sync="search_country"
                                        auto-select-first
                                        no-filter
                                        outline
                                        item-text="display"
                                        style="font-size:12px;padding:4px 0"
                                        return-object
                                        :loading="isLoading"
                                        no-data-text="Ketikkan Negara"
                                        :error="errors.country"
                                        :rules="[rules.country]"
                                        clearable
                                        >
                                        <template
                                            slot="item"
                                            slot-scope="{ item }"
                                            >
                                            <v-list-tile-content>
                                                <v-list-tile-title v-text="item.display"></v-list-tile-title>
                                            </v-list-tile-content>
                                        </template>
                                    </v-autocomplete>
                                </v-flex>
                                <v-flex xs12 pr-3>
                                    <v-autocomplete
                                        label="Cari Wilayah"
                                        v-model="selected_region"
                                        style="font-size:12px;padding:4px 0"
                                        :items="regions"
                                        outline
                                        :search-input.sync="search_region"
                                        auto-select-first
                                        no-filter
                                        item-text="text_nm"
                                        return-object
                                        class="mb-1"
                                        hide-details
                                        :loading="isLoading"
                                        no-data-text="Ketikkan Wilayah Anda"
                                        clearable
                                        >
                                    </v-autocomplete>
                                </v-flex>
                       
                                <v-flex xs12>
                                    <v-text-field
                                        label="Provinsi"
                                        v-model="patient_new.M_PatientAddressState"
                                        style="font-size:12px;padding:4px 0"
                                        readonly
                                        :error="errors.province"
                                        :rules="[rules.province]"
                                    ></v-text-field>
                                </v-flex>
                                <v-flex xs12>
                                    <v-text-field
                                    label="Kota / Kabupaten"
                                    style="font-size:12px;padding:4px 0"
                                    v-model="patient_new.M_PatientAddressCity"
                                    :error="errors.city"
                                    :rules="[rules.city]"
                                    readonly
                                ></v-text-field>
                                </v-flex>
                                <v-flex xs12>
                                    <v-text-field
                                    label="Kecamatan"
                                    style="font-size:12px;padding:4px 0"
                                    v-model="patient_new.M_PatientAddressDistrict"
                                    :error="errors.district"
                                    :rules="[rules.district]"
                                    readonly
                                ></v-text-field>
                                </v-flex>
                                <v-flex xs12>
                                    <v-text-field
                                        label="Kelurahan / Desa"
                                        style="font-size:12px;padding:4px 0"
                                        v-model="patient_new.M_PatientAddressVillage"
                                        :error="errors.village"
                                        :rules="[rules.village]"
                                        readonly
                                    ></v-text-field>
                                </v-flex>
                                <v-flex xs12>
                                    <v-textarea
                                        style="font-size:12px;padding:4px 0"
                                        auto-grow
                                        rows="1"
                                        v-model="patient_new.M_PatientAddressDescription"
                                        label="Alamat"
                                        :error="errors.address"
                                        :rules="[rules.address]">
                                    </v-textarea>
                                   
                                </v-flex>
                                
                            </v-layout>

                            <v-layout class="mt-3" row>
                                <v-flex xs12>
                                <v-card>
                                <v-card-title>Pasien Corporate</v-card-title>
                                <v-card-text>
                                    <v-layout row>
                                        <v-flex pa-2 xs12>
                                            <v-autocomplete
                                                label="Corporate"
                                                v-model="selected_corporate"
                                                :items="corporates"
                                                :search-input.sync="search_corporate"
                                                item-text="CorporateName"
                                                item-value="CorporateID"
                                                outline
                                                clearable
                                                return-object
                                                no-filter
                                                auto-select-first
                                                :loading="loading_corporate"
                                                no-data-text="Ketikkan Corporate"
                                            ></v-autocomplete>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex pa-2 xs6>
                                            <v-text-field
                                                label="NIP"
                                                :disabled="selected_corporate.CorporateID == 0"
                                                v-model="patient_new.M_PatientNIP"
                                            ></v-text-field>
                                        </v-flex>
                                        <v-flex pa-2 xs6>
                                            <v-text-field
                                                label="Jabatan"
                                                :disabled="selected_corporate.CorporateID == 0"
                                                v-model="patient_new.M_PatientJob"
                                            ></v-text-field>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex pa-2 xs6>
                                            <v-text-field
                                                label="Posisi"
                                                :disabled="selected_corporate.CorporateID == 0"
                                                v-model="patient_new.M_PatientPosisi"
                                            ></v-text-field>
                                        </v-flex>
                                        <v-flex pa-2 xs6>
                                            <v-text-field
                                                label="Divisi"
                                                :disabled="selected_corporate.CorporateID == 0"
                                                v-model="patient_new.M_PatientDivisi"
                                            ></v-text-field>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex pa-2 xs6>
                                            <v-text-field
                                                label="Lokasi"
                                                :disabled="selected_corporate.CorporateID == 0"
                                                v-model="patient_new.M_PatientLocation"
                                            ></v-text-field>
                                        </v-flex>
                                        <v-flex pa-2 xs6>
                                            <v-text-field
                                                label="Departemen"
                                                :disabled="selected_corporate.CorporateID == 0"
                                                v-model="patient_new.M_PatientDepartement"
                                            ></v-text-field>
                                        </v-flex>
                                    </v-layout>
                                </v-card-text>
                                </v-card>
                                </v-flex>
                            
                            </v-layout>
                        </v-flex>
                    </v-layout>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="teal"
                        dark
                        @click="add_use()"
                        :disabled="!btn_save_enabled"
                        v-show="!edit"
                    >
                    Simpan dan Gunakan
                    </v-btn>
                    <v-btn
                        dark
                        color="teal"
                        @click="add_new()"
                        v-show="edit"
                        :disabled="!btn_save_enabled"
                        >
                        Simpan
                    </v-btn>
                    <v-btn
                        color="grey"
                        flat
                        @click="dialog = false"
                    >
                    Tutup
                    </v-btn>
                </v-card-actions>
         </v-card>
   </v-dialog>
</template>
<style scoped>

</style>
<script>
module.exports = {
    components : {
        'one-date-picker' : httpVueLoader('../../common/oneDatePicker.vue')
    },
    data() {
        return {
            search_education_type: '',
            search_etnic_type: '',
            search_corporate: '',
            age_years: '',
            search_region: '',
            dialog_title: 'Data Pasien Baru',
            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]\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 !" },
                gender: value => { this.errors.gender = !value.id; return !!value.id || "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 !" },
                province: value => { this.errors.province = !value; return !!value || "Harus diisi !" },
                city: value => { this.errors.city = !value; return !!value || "Harus diisi !" },
                district: value => { this.errors.district = !value; return !!value || "Harus diisi !" },
                village: value => { this.errors.village = !value; return !!value || "Harus diisi !" },
                NIK:value => {
                    if(this.selected_idtype.code == 'NNIDN'){
                        if(value.length < 16){
                            this.errors.NIK = true
                            return "Harus 16 digit !"
                        }
                        else{
                            this.errors.NIK = false
                            return true
                        }
                    }
                    else{
                        return true
                    }
                },
                country: value => { this.errors.country = _.isEmpty(value); return !_.isEmpty(value) || "Harus dipilih !" },

            },
            errors: { dob: false, name: false, sex: false, title: false, hp: false,
                      address: false, province: false, city: false, district: false, village: false,
                      NIK: false, country: false
            }
        }
    },
   computed: {
        search_country : {
            get () {
                return this.$store.state.patient.search_country
            },
            set (val) {
                this.$store.commit('patient/update_search_country', val)
            }
        },
        countries : {
            get () {
                return this.$store.state.patient.countries
            },
            set (val) {
                this.$store.commit('patient/update_countries', val)
            }
        },
        selected_country : {
            get () {
                return this.$store.state.patient.selected_country
            },
            set (val) {
                this.$store.commit('patient/update_selected_country', val)
            }
        },
        isLoading : {
            get () {
                return this.$store.state.patient.loading
            },
            set (val) {
                this.$store.commit('patient/update_loading', val)
            }
        },
        regions : {
            get () {
                return this.$store.state.patient.regions
            },
            set (val) {
                this.$store.commit('patient/update_regions', val)
            }
        },
        selected_region : {
            get () {
                return this.$store.state.patient.selected_region
            },
            set (val) {
                this.$store.commit('patient/update_selected_region', val)
                if(val.pro_nm) this.patient_new.M_PatientAddressState = val.pro_nm
                if(val.kab_nm) this.patient_new.M_PatientAddressCity = val.kab_nm
                if(val.kec_nm) this.patient_new.M_PatientAddressDistrict = val.kec_nm
                if(val.kel_nm) this.patient_new.M_PatientAddressVillage = val.kel_nm
                if(val.regional_cd) this.patient_new.M_PatientAddressRegionalCd = val.regional_cd
            }
        },
        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)
            }
        },
        genders : {
            get () {
                return this.$store.state.patient.genders
            },
            set (val) {
                this.$store.commit('patient/update_genders', val)
            }
        },
        selected_gender : {
            get () {
                return this.$store.state.patient.selected_gender
            },
            set (val) {
                this.$store.commit('patient/update_selected_gender', val)
                console.log('selected_gender')
                console.log(val)
                if(val){
                    this.$store.dispatch('other/get_titles',{
                        gender_id: val.id
                    })
                    this.selected_title = {}
                }
            }
        },
        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 () {
                let x = this.$store.state.area.selected_village
                if (x) if(x.M_KelurahanID) this.errors.kelurahan = false
                return x 
            },
            set (v) { 
              this.$store.commit('area/update_selected_area', {type:'village',val:v}) 
              let x = this.$store.state.area.selected_village
              if (x) if(x.M_KelurahanID) this.errors.kelurahan = false
            }
        },
        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 () {
            let xxx = true
            if (this.errors.name || this.errors.sex || this.errors.dob ||
                this.errors.title || this.errors.pob || this.errors.hp ||
                this.errors.address || this.errors.kelurahan || this.errors.country || this.errors.NIK || 
                this.errors.province || this.errors.city || this.errors.district || this.errors.village) xxx = false

            return xxx
        },

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

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

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

        selected_religion : {
            get () {
                return this.$store.state.other.selected_religion
            },
            set (val) {
                this.$store.commit('other/update_selected_religion', val)
            }
        },
        corporates : {
            get () {
                return this.$store.state.patient.corporates
            },
            set (val) {
                this.$store.commit('patient/update_corporates', val)
            }
        },
        selected_corporate : {
            get () {
                return this.$store.state.patient.selected_corporate
            },
            set (val) {
                this.$store.commit('patient/update_selected_corporate', val)
            }
        },
        loading_corporate : {
            get () {
                return this.$store.state.patient.loading_corporate
            },
            set (val) {
                this.$store.commit('patient/update_loading_corporate', val)
            }
        },
        blood_types : {
            get () {
                return this.$store.state.patient.blood_types
            },
            set (val) {
                this.$store.commit('patient/update_blood_types', val)
            }
        },
        selected_blood_type : {
            get () {
                return this.$store.state.patient.selected_blood_type
            },
            set (val) {
                this.$store.commit('patient/update_selected_blood_type', val)
            }
        },
        loading_blood_type : {
            get () {
                return this.$store.state.patient.loading_blood_type
            },
            set (val) {
                this.$store.commit('patient/update_loading_blood_type', val)
            }
        },
        blood_rh_types : {
            get () {
                return this.$store.state.patient.blood_rh_types
            },
            set (val) {
                this.$store.commit('patient/update_blood_rh_types', val)
            }
        },
        selected_blood_rh_type : {
            get () {
                return this.$store.state.patient.selected_blood_rh_type
            },
            set (val) {
                this.$store.commit('patient/update_selected_blood_rh_type', val)
            }
        },
        loading_blood_rh_type : {
            get () {
                return this.$store.state.patient.loading_blood_rh_type
            },
            set (val) {
                this.$store.commit('patient/update_loading_blood_rh_type', val)
            }
        },
        education_types : {
            get () {
                return this.$store.state.patient.education_types
            },
            set (val) {
                this.$store.commit('patient/update_education_types', val)
            }
        },
        selected_education_type : { 
            get () {
                return this.$store.state.patient.selected_education_type
            },
            set (val) {
                this.$store.commit('patient/update_selected_education_type', val)
            }
        },
        loading_education_type : {
            get () {
                return this.$store.state.patient.loading_education_type
            },
            set (val) {
                this.$store.commit('patient/update_loading_education_type', val)
            }
        },
        etnic_types : {
            get () {
                return this.$store.state.patient.etnic_types
            },
            set (val) {
                this.$store.commit('patient/update_etnic_types', val)
            }
        },
        selected_etnic_type : {
            get () {
                return this.$store.state.patient.selected_etnic_type
            },
            set (val) {
                this.$store.commit('patient/update_selected_etnic_type', val)
            }
        },
        loading_etnic_type : {
            get () {
                return this.$store.state.patient.loading_etnic_type
            },
            set (val) {
                this.$store.commit('patient/update_loading_etnic_type', val)
            }
        }
   },

   methods : {
        thr_search_corporate: _.debounce( function () {
            this.$store.dispatch("patient/search_corporate",this.search_corporate)
        },2000),
        thr_search_countries: _.debounce( function () {
            this.$store.dispatch("patient/search_countries",this.search_country)
        },2000),
        thr_search_region: _.debounce( function () {
            this.$store.dispatch("patient/searchregion",this.search_region)
        },2000),
       get_city() {
           return
       },
       add_new (use) {
           religion = 0
           if(this.selected_religion)
            religion = this.selected_religion.M_ReligionID
           let prm = {
                M_PatientName : this.patient_new.M_PatientName,
                M_PatientM_TitleID : this.selected_title.M_TitleID,
                M_PatientPrefix : this.patient_new.M_PatientPrefix,
                M_PatientSuffix : this.patient_new.M_PatientSuffix,
                M_PatientGender : this.selected_gender,
                M_PatientReligionCode : this.selected_religion.code,
                M_PatientReligionDisplay : this.selected_religion.display,
                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_PatientIdentifierCode : (this.selected_idtype ? this.selected_idtype.id : ''),
                M_PatientIdentifierDisplay : (this.selected_idtype ? this.selected_idtype.display : ''),
                M_PatientIDNumber : this.patient_new.M_PatientIDNumber,
                M_PatientNote : this.patient_new.M_PatientNote,
                M_PatientAddressDescription : this.patient_new.M_PatientAddressDescription,
                M_PatientAddressCountryCode : this.selected_country.code,
                M_PatientAddressCountry : this.selected_country.display,
                M_PatientAddressRegionalCd : this.selected_region.regional_cd,
                M_PatientAddressLocation : this.selected_region.regional_cd,
                M_PatientAddressCity : this.patient_new.M_PatientAddressCity,
                M_PatientAddressVillage : this.patient_new.M_PatientAddressVillage,
                M_PatientAddressDistrict : this.patient_new.M_PatientAddressDistrict,
                M_PatientAddressState : this.patient_new.M_PatientAddressState,
                M_PatientAddressID : this.patient_new.M_PatientAddressID && this.patient_new.M_PatientAddressID > 0 ? this.patient_new.M_PatientAddressID : 0,
                M_PatientRegisteredByCorporateID : this.selected_corporate.CorporateID ? this.selected_corporate.CorporateID : 0,
                M_PatientNIP : this.selected_corporate.CorporateID > 0 ? this.patient_new.M_PatientNIP : '',
                M_PatientJob : this.selected_corporate.CorporateID > 0 ? this.patient_new.M_PatientJob : '',
                M_PatientPosisi : this.selected_corporate.CorporateID > 0 ? this.patient_new.M_PatientPosisi : '',
                M_PatientDivisi : this.selected_corporate.CorporateID > 0 ? this.patient_new.M_PatientDivisi : '',
                M_PatientLocation : this.selected_corporate.CorporateID > 0 ? this.patient_new.M_PatientLocation : '',
                M_PatientDepartement : this.selected_corporate.CorporateID > 0 ? this.patient_new.M_PatientDepartement : '',
                M_PatientBloodTypeCode:this.selected_blood_type.code,
                M_PatientBloodTypeSystem:this.selected_blood_type.code_system,
                M_PatientBloodRhCode:this.selected_blood_rh_type.code,
                M_PatientBloodRhSystem:this.selected_blood_rh_type.code_system,
                M_PatientEducationCode:this.selected_education_type.code,
                M_PatientEducationSystem:this.selected_education_type.code_system,
                M_PatientEtnicCode:this.selected_etnic_type.code,
                M_PatientEtnicSystem:this.selected_etnic_type.code_system
           }
           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 : {
        search_corporate(val,old) {
            if (val == old ) return
            if (! val) return
            if (val.length < 1 ) return
            if (this.$store.state.patient.loading_corporate == 1 ) return  
            this.thr_search_corporate()
        },
        age_years(val,old) {
            if (val == old ) return
            if (! val) return
            let age = parseInt(val)
            let now = new Date()
            let dob = new Date(now.getFullYear() - age, now.getMonth(), now.getDate())
            this.patient_new.M_PatientDOB = moment(dob).format('DD-MM-YYYY')
        },
        search_region(val,old) {
            if (val == old ) return
            if (! val) return
            if (val.length < 1 ) return
            if (this.$store.state.patient.loading == 1 ) return  
            this.thr_search_region()
        },
        search_country(val,old) {
            if (this.$store.state.patient.loading == 1 ) return  
            this.thr_search_countries()
        },
       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.'
                }
           }
       },
       
       async dialog (val, old) {
            if (val && !old) {

                if (this.edit) {
                    this.dialog_title = 'PERUBAHAN DATA PASIEN'
                    let x = this.patient_new
                    let y = this.selected_patient
                    x.M_PatientPrefix = y.M_PatientPrefix
                    x.M_PatientName = y.M_PatientRealName
                    x.M_PatientSuffix = y.M_PatientSuffix
                    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_PatientIDNumber = y.M_PatientIDNumber
                    
                    this.my_email = y.M_PatientEmail
                    this.patient_new = x
                    console.log(this.selected_patient)
                    
                    //gender
                    let genders = this.$store.state.patient.genders
                    let x_genderid = this.selected_patient.M_PatientGender
                    let idx_gender = _.findIndex(genders, function(o) { return parseInt(o.id) === parseInt(x_genderid) })
                    this.selected_gender = genders[idx_gender]
                    
                    //title
                    await this.$store.dispatch('other/get_titles',{
                        gender_id: this.selected_gender.id
                    })
                    let titles = this.$store.state.other.title
                    let x_titleid = this.selected_patient.M_PatientM_TitleID
                    let idx_title = _.findIndex(titles, function(o) { return parseInt(o.M_TitleID) === parseInt(x_titleid) })
                    this.selected_title = titles[idx_title]
                    
                    // ID TYPE
                    this.selected_idtype = {id:this.selected_patient.M_PatientIdentifierCode,name:this.selected_patient.M_PatientIdentifierDisplay}

                    // ID NUMBER
                    x.M_PatientIDNumber = this.selected_patient.M_PatientIDNumber

                    // RELIgION
                    this.selected_religion = {code:this.selected_patient.M_PatientReligionCode,display:this.selected_patient.M_PatientReligionDisplay}

                    //ADDRESS
                    if(this.selected_patient.M_PatientAddressCountry){
                    this.selected_country = {code:this.selected_patient.M_PatientAddressCountry,display:this.selected_patient.M_PatientAddressCountryName}
                    this.$store.dispatch('patient/countries',[this.selected_country])
                    this.search_country = this.selected_country.display
                    this.countries = [this.selected_country]
                    }
                    else{
                        this.search_country = ''
                    }
                    x.M_PatientAddressCountryCode = this.selected_country.code?this.selected_country.code:'ID'
                    x.M_PatientAddressCountry = this.selected_country.display?this.selected_country.display:'Indonesia'
                    x.M_PatientAddressRegionalCd = this.selected_patient.M_PatientAddressRegionalCd
                    x.M_PatientAddressLocation = this.selected_patient.M_PatientAddressLocation
                    x.M_PatientAddressCity = this.selected_patient.M_PatientAddressCity
                    x.M_PatientAddressVillage = this.selected_patient.M_PatientAddressVillage
                    x.M_PatientAddressDistrict = this.selected_patient.M_PatientAddressDistrict
                    x.M_PatientAddressState = this.selected_patient.M_PatientAddressState
                    x.M_PatientAddressNote = this.selected_patient.M_PatientAddressNote
                    x.M_PatientAddressDescription = this.selected_patient.M_PatientAddressDescription

                    x.M_PatientRegisteredByCorporateID = this.selected_patient.corporate_id ? this.selected_patient.corporate_id : 0;
                    if(this.selected_patient.corporate_id > 0){
                        this.selected_corporate = {id:this.selected_patient.corporate_id,name:this.selected_patient.corporate_name}
                        this.corporates = [{id:this.selected_patient.corporate_id,name:this.selected_patient.corporate_name}]
                    }
                    else{
                        this.selected_corporate = {}
                        this.search_corporate = ''
                        this.corporates = []
                    }
                    x.M_PatientNIP = this.selected_patient.M_PatientNIP
                    x.M_PatientJob = this.selected_patient.M_PatientJob
                    x.M_PatientPosisi = this.selected_patient.M_PatientPosisi
                    x.M_PatientDivisi = this.selected_patient.M_PatientDivisi
                    x.M_PatientLocation = this.selected_patient.M_PatientLocation
                    x.M_PatientDepartement = this.selected_patient.M_PatientDepartement

                    this.selected_country = {code:this.selected_patient.M_PatientAddressCountryCode,display:this.selected_patient.M_PatientAddressCountry}
                    this.countries = [this.selected_country]

                    // BLOOD TYPE
                    this.selected_blood_type = {
                        code:this.selected_patient.M_PatientBloodTypeCode,
                        display:this.selected_patient.M_PatientBloodTypeDisplay, 
                        code_system:this.selected_patient.M_PatientBloodTypeSystem
                    }
                    // BLOOD RH TYPE
                    this.selected_blood_rh_type = {
                        code:this.selected_patient.M_PatientBloodRhCode,
                        display:this.selected_patient.M_PatientBloodRhDisplay,
                        code_system:this.selected_patient.M_PatientBloodRhSystem
                    }
                    // EDUCATION TYPE
                    this.selected_education_type = {
                        code:this.selected_patient.M_PatientEducationCode,
                        display:this.selected_patient.M_PatientEducationDisplay,
                        code_system:this.selected_patient.M_PatientEducationSystem
                    }
                    // ETNIC TYPE
                    this.selected_etnic_type = {
                        code:this.selected_patient.M_PatientEtnicCode,
                        display:this.selected_patient.M_PatientEtnicDisplay,
                        code_system:this.selected_patient.M_PatientEtnicSystem
                    }
          

                    // 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 {
                    this.dialog_title = 'DATA PASIEN BARU'
                    let x = this.patient_new
                    this.my_email = ""
                    x.M_PatientAddressNote = "Utama"
                    x.M_PatienNote = ''
                    x.M_PatientPrefix = ""
                    x.M_PatientName = ""
                    x.M_PatientSuffix = ""
                    x.M_PatientDOB = ""
                    x.M_PatientPOB = ""
                    x.M_PatientHP = ""
                    x.M_PatientEmail = ""
                    x.M_PatientAddressDescription = ""
                    x.M_PatientAddressCountry = ""
                    x.M_PatientAddressCountryCode = ""
                    x.M_PatientAddressRegionalCd = ""
                    x.M_PatientAddressLocation = ""
                    x.M_PatientAddressCity = ""
                    x.M_PatientAddressVillage = ""
                    x.M_PatientAddressDistrict = ""
                    x.M_PatientAddressState = ""
                    x.M_PatientAddressID = 0
                    x.M_PatientIDNumber = ""
                    x.M_PatientNIP = ""
                    x.M_PatientJob = ""
                    x.M_PatientPosisi = ""
                    x.M_PatientDivisi = ""
                    x.M_PatientLocation = ""
                    x.M_PatientDepartement = ""
                    x.M_PatientRegisteredByCorporateID = 0
                    this.selected_corporate = {}
                    this.corporates = []
                    this.search_corporate = ''
                    this.corporates = []
                    this.patient_new = x
                    this.selected_gender = {}
                    this.selected_title = {}
                    this.selected_idtype = {id:'NNIDN',name:'KTP'}
                    this.selected_religion = {}
                    this.countries = [{code:'ID',display:'Indonesia'}]
                    this.selected_country = {code:'ID',display:'Indonesia'}
                    this.search_country = ''
                    this.selected_region = {}
                    this.search_region = ''
                    this.regions = []
                    this.selected_blood_type = {}
                    this.selected_blood_rh_type = {}
                    this.selected_education_type = {}
                    this.selected_etnic_type = {}
                    this.search_education_type = ''
                    this.search_etnic_type = ''
                }

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

   mounted () {
    //    this.$store.dispatch('area/search_province')
       this.$store.dispatch('other/search_sex')
        this.$store.dispatch('other/search_religion')
       this.$store.dispatch('patient/search_idtype')
       this.$store.dispatch('patient/search_blood_type')
       this.$store.dispatch('patient/search_blood_rh_type')
       this.$store.dispatch('patient/search_education_type')
       this.$store.dispatch('patient/search_etnic_type')
    //    this.$store.dispatch('area/search_city')
   }
}
</script>
