<template>
    <div>
        <v-dialog
            v-model="dialog_error"
            width="400"
            >

            <v-card>
                <v-card-title
                class="title red lighten-2 white--text"
                primary-title
                >
                Error
                </v-card-title>

                <v-card-text>
                {{msg_error}}
                </v-card-text>

                <v-divider></v-divider>

                <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="grey"
                    flat
                    @click="dialog_error = false"
                >
                    Tutup
                </v-btn>
                </v-card-actions>
            </v-card>
            </v-dialog>
        <v-card>
            <v-layout style="height:250px;overflow: auto;" row>
                <v-flex xs12 class="mt-5 text-xs-center" pl-2 pr-2 pt-2 pb-2>
                    <v-btn v-if="!progress_upload" @click="uploadData" color="warning" fab large dark>
                        <v-icon>cloud_upload</v-icon>
                    </v-btn>
                    <v-progress-linear v-if="progress_upload" :indeterminate="true"></v-progress-linear>
                    <p v-if="!progress_upload">Upload ke Nasional</p>
                    <p v-if="progress_upload">Sedang upload ...</p>
                    <!--<v-pagination  style="margin-top:10px;margin-bottom:10px" :total-visible="15" v-model="curr_page" :length="xtotal_page"></v-pagination>-->
                </v-flex>
            </v-layout>
        </v-card>
        <v-dialog v-model="dialogformaddress" persistent  max-width="650">
            <v-card>
                <v-card-title>
                    <span class="headline">Form Alamat Pasien</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                <v-layout wrap>
                    <v-flex xs12>
                        <v-text-field v-model="labeladdress" label="Label"></v-text-field>
                        <p v-if="checkError('requiredlabel')" class="error pl-2 pr-2" style="color:#fff">Jangan kosong dong</p>
                        <p v-if="checkError('readonlyutama')" class="error pl-2 pr-2" style="color:#fff">Biarkan jadi yang utama</p>
                    </v-flex>
                    <v-flex xs12>
                        <v-layout row>
                            <v-flex xs4 pa-1>
                                <v-autocomplete
                                    label="Kota"
                                    v-model="cityaddress"
                                    :items="xcities"
                                    :search-input.sync="search_city"
                                    auto-select-first
                                    no-filter
                                    item-text="M_CityName"
                                    return-object
                                    :loading="isLoading"
                                    no-data-text="Pilih Kota"
                                    >
                                    <template
                                        slot="item"
                                        slot-scope="{ item }"
                                        >
                                        <v-list-tile-content>
                                            <v-list-tile-title v-text="item.M_CityName"></v-list-tile-title>
                                        </v-list-tile-content>
                                    </template>
                                </v-autocomplete>
                                <p  v-if="checkError('requiredcity')" class="error pl-2 pr-2" style="color:#fff">Jangan kosong dong</p>
                            </v-flex>
                            <v-flex xs4 pa-1>
                                <v-select
                                    item-text="M_DistrictName"
                                    return-object
                                    :items="xdistricts" 
                                    v-model="districtaddress"
                                    label="Kecamatan*"
                                ></v-select>
                                <p  v-if="checkError('requireddistrict')" class="error pl-2 pr-2" style="color:#fff">Jangan kosong dong</p>
                            </v-flex>
                            <v-flex xs4 pa-1>
                                <v-select   
                                    item-text="M_KelurahanName"
                                    return-object
                                    :items="xkelurahans" 
                                    v-model="kelurahanaddress"
                                    label="Kelurahan / Desa*"
                                ></v-select>
                                
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex xs12>
                        <v-textarea
                            box
                            label="Alamat Lengkap"
                            v-model="descriptionaddress"
                        ></v-textarea>
                        <p  v-if="checkError('requireddescription')" class="error pl-2 pr-2" style="color:#fff">Jangan kosong dong</p>
                    </v-flex>
                    
                </v-layout>
                </v-card-text>
                <v-card-actions>
                <v-spacer></v-spacer>
                
                <v-btn v-if="xactaddr === 'new'" color="blue darken-1" flat @click="saveNewAddress()">Simpan</v-btn>
                <v-btn v-if="xactaddr === 'edit'" color="blue darken-1" flat @click="saveEditAddress()">Simpan</v-btn>
                <v-btn color="blue darken-1" flat @click="dialogformaddress = false">Batal</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="dialog_form" persistent width="80%">
            <v-card>
                <v-card-title dark class="headline warning pt-2 pb-2" primary-title style="color:white">
                    <h4 dark>FORM EDIT PASIEN NASIONAL</h4>
                </v-card-title>
                <v-card-text>
                    <v-card flat>
                        <v-layout row>
                            <v-flex xs6 pa-2>
                                <v-card>
                                    <v-card-title>
                                        <h2 class="blue--text text-lighten-3">PASIEN NASIONAL CABANG {{selected_patient.M_BranchCode}}</h2>
                                    </v-card-title>
                                    <v-divider></v-divider>
                                    <v-card-text>
                                        <v-layout row wrap>
                                            <v-flex xs12 pa-2>
                                                <v-layout row>
                                                    <v-flex xs2 pa-1>
                                                        <v-select item-text="M_TitleName" return-object :items="xtitles" v-model="xtitle" label="Panggilan*" hide-details></v-select>
                                                        <p v-if="checkError('requiretitle')" class="error pl-2 pr-2" style="color:#fff">Panggilan harus diisi dong</p>
                                                    </v-flex>
                                                    <v-flex xs2 pa-1>
                                                        <v-text-field v-model="xpatientprefix" label="Awalan" hide-details></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs6 pa-1>
                                                        <v-text-field v-model="xpatientname" label="Nama Pasien*" hide-details></v-text-field>
                                                        <p v-if="checkError('requirename')" class="error pl-2 pr-2" style="color:#fff">Nama harus diisi dong</p>
                                                    </v-flex>
                                                    <v-flex xs2 pa-1>
                                                        <v-text-field v-model="xpatientsuffix" label="Akhiran" hide-details></v-text-field>
                                                    </v-flex>
                                                    <!--<v-flex xs4 pa-1>
                                                        <v-text-field readonly v-model="xnorm" label="PID" hide-details></v-text-field>
                                                    </v-flex>-->
                                                </v-layout>
                                                <v-layout row>
                                                    <v-flex xs4 pa-1>
                                                        <v-text-field v-model="xpob" label="Tempat Lahir" hide-details></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs4 pa-1>
                                                        <v-text-field v-model="xdob" label="Tanggal Lahir*" hint="format : DD-MM-YYYY , contoh : 22-06-1988"></v-text-field>
                                                        <p v-if="checkError('requiredob')" class="error pl-2 pr-2" style="color:#fff">Tanggal lahir harus diisi dong</p>
                                                        <p v-if="checkError('wrongformatdob')" class="error pt-1 pl-2 pr-2" style="color:#fff">format nya belum benar : dd-mm-yyy , OK ?</p>
                                                    </v-flex>
                                                    <v-flex xs4 pa-1>
                                                        <v-select item-text="m_sexname" return-object :items="xsexes" v-model="xsex" label="Jenis Kelamin*" hide-details></v-select>
                                                        <p v-if="checkError('requiresex')" class="error pl-2 pr-2" style="color:#fff">Jenis kelamin harus diisi dong</p>
                                                    </v-flex>
                                                    <!--<v-flex xs3 pa-1>
                                                        <v-select item-text="M_ReligionName" return-object :items="xreligions" v-model="xreligion" label="Agama" hide-details></v-select>
                                                    </v-flex>-->
                                                </v-layout>
                                                <v-layout row>
                                                    <!--<v-flex xs4 pa-1>
                                                        <v-text-field v-model="xphone" label="Telepon" hide-details></v-text-field>
                                                    </v-flex>-->
                                                    <v-flex xs6 pa-1>
                                                        <v-text-field v-model="xhp" label="HP" hide-details></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs6 pa-1>
                                                        <v-text-field v-model="xemail" label="Email" hide-details></v-text-field>
                                                    </v-flex>
                                                </v-layout>
                                                <!--<v-layout row>
                                                    <v-flex xs4 pa-1>
                                                        <v-select item-text="M_IdTypeName" return-object :items="xkartuidentitass" v-model="xkartuidentitas" label="Kartu Identitas"
                                                            hide-details></v-select>
                                                    </v-flex>
                                                    <v-flex xs4 pa-1>
                                                        <v-text-field v-model="xnoidentitas" label="No Identitas" hide-details></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs4 pa-1>
                                                        <v-text-field v-model="xnote" label="Catatan" hide-details></v-text-field>
                                                    </v-flex>
                                                </v-layout>
                                                <v-layout row>
                                                    <v-flex xs6 pa-1>
                                                        <v-text-field v-model="xjob" label="Pekerjaan" hide-details></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs6 pa-1>
                                                        <v-text-field v-model="xnik" label="Nomor Induk Pegawai" hide-details></v-text-field>
                                                    </v-flex>
                                                </v-layout>
                                                <v-layout row>
                                                    <v-flex xs6 pa-1>
                                                        <v-text-field v-model="xjabatan" label="Jabatan" hide-details></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs6 pa-1>
                                                        <v-text-field v-model="xkedudukan" label="Kedudukan" hide-details></v-text-field>
                                                    </v-flex>
                                                </v-layout>
                                                <v-layout row>
                                                    <v-flex xs6 pa-1>
                                                        <v-text-field v-model="xpj" label="Penanggung Jawab" hide-details></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs6 pa-1>
                                                        <v-text-field v-model="xlocation" label="Lokasi" hide-details></v-text-field>
                                                    </v-flex>
                                                    
                                                </v-layout>
                                                !-->
                                            </v-flex>
                                        </v-layout>
                                        <v-divider class="mt-2"></v-divider>
                                        <v-layout class="mt-2" row>
                                            <v-flex xs12>
                                                <v-subheader red--text text--lighten-1> ALAMAT PASIEN
                                                </v-subheader>
                                                <v-layout row wrap>
                                                    <v-flex xs12 pa-2>
                                                        <v-data-table 
                                                            :headers="headers" 
                                                            :items="selected_patient.address"
                                                            :loading="isLoading"
                                                            hide-actions class="elevation-1">
                                                            <template slot="items" slot-scope="props">
                                                                <td class="text-xs-center pa-2">
                                                                    <v-icon class="ml-3" color="primary" @click="editAddress(props.item)">edit</v-icon>
                                                                </td>
                                                                <td class="text-xs-left pa-2">{{ props.item.Nat_PatientAddressNote}}</td>
                                                                <td class="text-xs-left pa-2">{{ props.item.Nat_PatientAddressDescription}}</td>
                                                            </template>
                                                        </v-data-table>
                                                        
                                                    </v-flex>
                                                </v-layout>
                                            </v-flex>
                                        </v-layout>  
                                    </v-card-text>
                                </v-card>
                            </v-flex>
                            <v-flex pa-2 xs6>
                                <v-card>
                                    <v-card-title>
                                        <h2 class="teal--text text-lighten-3">PASIEN LOKAL</h2>
                                    </v-card-title>
                                    <v-divider></v-divider>
                                    <v-card-text>
                                        <v-layout v-if="patient_selected" row wrap>
                                            <v-flex xs12 pa-2>
                                                <v-layout row>
                                                    <v-flex xs2 pa-1>
                                                        <v-text-field readonly :value="patient_selected.M_TitleName" label="Panggilan" hide-details></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs2 pa-1>
                                                        <v-text-field readonly :value="patient_selected.M_PatientPrefix" label="Awalan" hide-details></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs6 pa-1>
                                                        <v-text-field readonly :value="patient_selected.M_PatientRealName" label="Nama Pasien*" hide-details></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs2 pa-1>
                                                        <v-text-field readonly :value="patient_selected.M_PatientSuffix"  label="Akhiran" hide-details></v-text-field>
                                                    </v-flex>
                                                    <!--<v-flex xs4 pa-1>
                                                        <v-text-field readonly v-model="xnorm" label="PID" hide-details></v-text-field>
                                                    </v-flex>-->
                                                </v-layout>
                                                <v-layout row>
                                                    <v-flex xs4 pa-1>
                                                        <v-text-field readonly :value="patient_selected.M_PatientPOB" label="Tempat Lahir" hide-details></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs4 pa-1>
                                                        <v-text-field readonly :value="formatDate(patient_selected.M_PatientDOB)" label="Tanggal Lahir*" hint="format : DD-MM-YYYY , contoh : 22-06-1988"></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs4 pa-1>
                                                        <v-text-field readonly :value="patient_selected.M_SexName" label="Jenis Kelamin*"></v-text-field>
                                                    </v-flex>
                                                    <!--<v-flex xs3 pa-1>
                                                        <v-select item-text="M_ReligionName" return-object :items="xreligions" v-model="xreligion" label="Agama" hide-details></v-select>
                                                    </v-flex>-->
                                                </v-layout>
                                                <v-layout row>
                                                    <!--<v-flex xs4 pa-1>
                                                        <v-text-field v-model="xphone" label="Telepon" hide-details></v-text-field>
                                                    </v-flex>-->
                                                    <v-flex xs6 pa-1>
                                                        <v-text-field readonly :value="patient_selected.M_PatientHP" label="HP" hide-details></v-text-field>
                                                    </v-flex>
                                                    <v-flex xs6 pa-1>
                                                        <v-text-field readonly :value="patient_selected.M_PatientEmail" label="Email" hide-details></v-text-field>
                                                    </v-flex>
                                                </v-layout>
                                            </v-flex>
                                        </v-layout>
                                        <v-divider class="mt-2"></v-divider>
                                        <v-layout class="mt-2" row>
                                            <v-flex xs12>
                                                <v-subheader red--text text--lighten-1> ALAMAT PASIEN
                                                </v-subheader>
                                                
                                                <v-layout row wrap>
                                                    <v-flex xs12 pa-2>
                                                        <v-data-table 
                                                            :headers="headers" 
                                                            :items="patient_selected.address"
                                                            :loading="isLoading"
                                                            hide-actions class="elevation-1">
                                                            <template slot="items" slot-scope="props">
                                                                <td class="text-xs-center pa-2">
                                                                   
                                                                </td>
                                                                <td class="text-xs-left pa-2">{{ props.item.M_PatientAddressNote}}</td>
                                                                <td class="text-xs-left pa-2">
                                                                    <p class="mb-1">Alamat Lengkap : {{ props.item.M_PatientAddressDescription}}</p>
                                                                    <p class="mb-1">Kota : <b>{{ props.item.M_CityName}}</b>, Kecamatan : <b>{{props.item.M_DistrictName}}</b>, Kelurahan : <b>{{props.item.M_KelurahanName}}</b></p>
                                                                </td>
                                                            </template>
                                                        </v-data-table>
                                                        
                                                    </v-flex>
                                                </v-layout>
                                            </v-flex>
                                        </v-layout> 
                                    </v-card-text>
                                </v-card>
                            </v-flex>
                            </v-layout>
                        </v-card>
                        
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn flat v-if="xact === 'edit'" @click="saveData()" small color="primary">Simpan</v-btn>
                    <v-btn small color="primary darken-1 text-sm-right" flat @click="dialog_form = false">Batal</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
    

        
</template>

<style scoped>
    table,
    td,
    th {
        border: 1px solid #ddd;
        text-align: left;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 8px;
        padding-right: 5px;
    }

    .mini-input .v-input {
        margin-top: 0px;
    }

    .mini-input .v-input,
    .mini-input .v-input--selection-controls,
    .mini-input .v-input__slot {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 3px;
    }

    .mini-input .v-messages {
        min-height: 0px;
    }

    input.fhm-input {
        border: 1px solid black;
        border-radius: 2px;
        -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
        0 0 4px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
        0 0 4px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
        0 0 4px rgba(0, 0, 0, 0.1);
        padding: 2px 4px;
        background: rgba(255, 255, 255, 0.5);
        margin: 0 0 1px 0;
        width: 30px;
        text-align: center;
    }
</style>

<script>
    module.exports = {
        mounted() {
                //this.$store.dispatch("patient/getsexreg")
                var patientData = JSON.parse(localStorage.getItem('selpatient'))
                this.selpatient = patientData
            },
        data: () => ({
            search_city:'',
            xbranch_id:0,
            oldlabel:'',
            selpatient:{},
            headers: [
            {
               text: "AKSI",
               align: "center",
               sortable: false,
               value: "action",
               width: "10%",
               class: "pa-1"
            },
            {
               text: "LABEL",
               align: "left",
               sortable: false,
               value: "mr",
               width: "20%",
               class: "pa-1"
            },
            {
               text: "ALAMAT",
               align: "left",
               sortable: false,
               value: "lab",
               width: "40%",
               class: "pa-1"
            }
        ]
        }),
        computed: {
        dialog_error:{
            get() {
                return this.$store.state.patient.dialog_error
            },
            set(val) {
                this.$store.commit("patient/update_dialog_error",val)
            }
        },
        msg_error(){
            return this.$store.state.patient.msg_error
        },
        patient_selected(){
            return this.$store.state.patient.patient_selected[0]
        },
        selected_patient(){
            return this.$store.state.patient.selected_patient
        },
        xcities(){
            return this.$store.state.patient.cities
        },
        labeladdress:{
            get() {
                return this.$store.state.patient.label_address
            },
            set(val) {
                this.$store.commit("patient/update_label_address",val)
            }
        },
        cityaddress:{
            get() {
                return this.$store.state.patient.city_address
            },
            set(val) {
                this.$store.commit("patient/update_city_address",val)
                this.$store.dispatch("patient/getdistrict",this.$store.state.patient.city_address)
            }
        },
        xdistricts(){
            return this.$store.state.patient.districts
        },
        districtaddress:{
            get() {
                return this.$store.state.patient.district_address
            },
            set(val) {
                this.$store.commit("patient/update_district_address",val)
                this.$store.dispatch("patient/getkelurahan",this.$store.state.patient.district_address)
            }
        },
        xkelurahans(){
            return this.$store.state.patient.kelurahans
        },
        kelurahanaddress:{
            get() {
                return this.$store.state.patient.kelurahan_address
            },
            set(val) {
                this.$store.commit("patient/update_kelurahan_address",val)
            }
        },
            dialogconfirmationdeleteaddr:{
                get() {
                    return this.$store.state.patient.dialog_confirmation_delete_addr
                },
                set(val) {
                    this.$store.commit("patient/update_dialog_confirmation_delete_addr",val)
                }
            },
            msgconfirmationdeleteaddr(){
                return  this.$store.state.patient.msg_confirmation_delete_addr
            },
            xact() {
                return this.$store.state.patient.act
            },
            xactaddr() {
                return this.$store.state.patient.act_addr
            },
            dialogformaddress:{
                get() {
                    return this.$store.state.patient.dialog_form_address
                },
                set(val) {
                    this.$store.commit("patient/update_dialog_form_address",val)
                }
            },
            isLoading() {
                return this.$store.state.patient.search_status == 1
            },
            xaddresses() {
                return this.$store.state.patient.addresses
            },
            xcities(){
                return this.$store.state.patient.cities
            },
            labeladdress:{
                get() {
                    return this.$store.state.patient.label_address
                },
                set(val) {
                    this.$store.commit("patient/update_label_address",val)
                }
            },
            cityaddress:{
                get() {
                    return this.$store.state.patient.city_address
                },
                set(val) {
                    this.$store.commit("patient/update_city_address",val)
                    this.$store.dispatch("patient/getdistrict",this.$store.state.patient.city_address)
                }
            },
            xdistricts(){
                return this.$store.state.patient.districts
            },
            districtaddress:{
                get() {
                    return this.$store.state.patient.district_address
                },
                set(val) {
                    this.$store.commit("patient/update_district_address",val)
                    this.$store.dispatch("patient/getkelurahan",this.$store.state.patient.district_address)
                }
            },
            xkelurahans(){
                return this.$store.state.patient.kelurahans
            },
            kelurahanaddress:{
                get() {
                    return this.$store.state.patient.kelurahan_address
                },
                set(val) {
                    this.$store.commit("patient/update_kelurahan_address",val)
                }
            },
            descriptionaddress:{
                get() {
                    return this.$store.state.patient.description_address
                },
                set(val) {
                    this.$store.commit("patient/update_description_address",val)
                }
            },
            pgrs_save(){
                
                return this.$store.state.patient.pgrs_save
            },
            dialog_form: {
                get() {
                    return this.$store.state.patient.dialog_form
                },
                set(val) {
                    this.$store.commit("patient/update_dialog_form", val)
                }
            },
            msgconfirmationdelete() {
                return this.$store.state.patient.msg_confirmation_delete
            },
            xact() {
                return this.$store.state.patient.act
            },
            detail() {
                return this.$store.state.patient.selected_patient
            },
            xtitles() {
                return this.$store.state.patient.titles
            },
            progress_upload: {
                get() {
                    return this.$store.state.patient.progress_upload
                },
                set(val) {
                    this.$store.commit("patient/update_progress_upload", val)
  
                }
            },
            xtitle: {
                get() {
                    return this.$store.state.patient.selected_title
                },
                set(val) {
                    this.$store.commit("patient/update_selected_title", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xpatientprefix: {
                get() {
                    return this.$store.state.patient.patient_prefix
                },
                set(val) {
                    this.$store.commit("patient/update_patient_prefix", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xpatientname: {
                get() {
                    return this.$store.state.patient.patient_name
                },
                set(val) {
                    this.$store.commit("patient/update_patient_name", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xpatientsuffix: {
                get() {
                    return this.$store.state.patient.patient_suffix
                },
                set(val) {
                    this.$store.commit("patient/update_patient_suffix", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xnorm: {
                get() {
                    return this.$store.state.patient.norm
                },
                set(val) {
                    this.$store.commit("patient/update_norm", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xdob: {
                get() {
                    return this.$store.state.patient.dob
                },
                set(val) {
                    this.$store.commit("patient/update_errors", [])
                    var errors = this.$store.state.patient.errors
                    var aDOB = moment(val, 'DD-MM-YYYY', true)
                    var isValidDOB = aDOB.isValid()
                    if (!isValidDOB) {
                        errors.push("wrongformatdob")
                    }

                    this.$store.commit("patient/update_dob", val)
                    this.$store.commit("patient/update_no_save", 1)

                }
            },
            xsexes() {
                return this.$store.state.patient.sexes
            },
            xsex: {
                get() {
                    return this.$store.state.patient.selected_sex
                },
                set(val) {
                    this.$store.commit("patient/update_selected_sex", val)
                    this.$store.commit("patient/update_no_save", 1)
                    console.log(val)
                    let selpat = this.$store.state.patient.selected_patient
                    selpat.Nat_PatientM_SexID = val.M_SexID
                }
            },
            xreligions() {
                return this.$store.state.patient.religions
            },
            xreligion: {
                get() {
                    return this.$store.state.patient.selected_religion
                },
                set(val) {
                    this.$store.commit("patient/update_selected_religion", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xphone: {
                get() {
                    return this.$store.state.patient.phone
                },
                set(val) {
                    this.$store.commit("patient/update_phone", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xhp: {
                get() {
                    return this.$store.state.patient.hp
                },
                set(val) {
                    this.$store.commit("patient/update_hp", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xemail: {
                get() {
                    return this.$store.state.patient.email
                },
                set(val) {
                    this.$store.commit("patient/update_email", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xpob: {
                get() {
                    return this.$store.state.patient.pob
                },
                set(val) {
                    this.$store.commit("patient/update_pob", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xkartuidentitass() {
                return this.$store.state.patient.kartuidentitass
            },
            xkartuidentitas: {
                get() {
                    return this.$store.state.patient.selected_kartuidentitas
                },
                set(val) {
                    this.$store.commit("patient/update_selected_kartuidentitas", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xnoidentitas: {
                get() {
                    return this.$store.state.patient.noidentitas
                },
                set(val) {
                    this.$store.commit("patient/update_noidentitas", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xnote: {
                get() {
                    return this.$store.state.patient.note
                },
                set(val) {
                    this.$store.commit("patient/update_note", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xjob: {
                get() {
                    return this.$store.state.patient.job
                },
                set(val) {
                    this.$store.commit("patient/update_job", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xnik: {
                get() {
                    return this.$store.state.patient.nik
                },
                set(val) {
                    this.$store.commit("patient/update_nik", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xjabatan: {
                get() {
                    return this.$store.state.patient.jabatan
                },
                set(val) {
                    this.$store.commit("patient/update_jabatan", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xkedudukan: {
                get() {
                    return this.$store.state.patient.kedudukan
                },
                set(val) {
                    this.$store.commit("patient/update_kedudukan", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xpj: {
                get() {
                    return this.$store.state.patient.pj
                },
                set(val) {
                    this.$store.commit("patient/update_pj", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
            xlocation: {
                get() {
                    return this.$store.state.patient.location
                },
                set(val) {
                    this.$store.commit("patient/update_location", val)
                    this.$store.commit("patient/update_no_save", 1)
                }
            },
        },
        methods: {
            uploadData(){
                //this.progress_upload = true
                //this.$store.commit("patient/update_pgrs_save", true)
                var patients = this.$store.state.patient.patients
                patients.forEach((patient,index) => {
                    if(patient.isConfirmed === 'Y'){
                        patients[index].status = 'Y'
                    }
                })
                console.log(patients)
                if(!this.progress_upload){
                    this.$store.dispatch("patient/validasi", {selpatient:this.selpatient,data:patients})
                    this.$store.commit("patient/update_verify_data_status", true)
                }
                
            },
            checkError(value) {
                var errors = this.$store.state.patient.errors
                if (errors.includes(value)) {
                    return true
                } else {
                    return false
                }
            },
            formatDate (date) {
                    if (!date) return null

                    const [year, month, day] = date.split('-')
                    return `${day}-${month}-${year}`
                },
            formatDateIndotoInter (date) {
                if (!date) return null

                const [day, month, year] = date.split('-')
                return `${year}-${month}-${day}`
            },
            saveData() {
                this.$store.commit("patient/update_errors", [])
                var errors = this.$store.state.patient.errors
                var aDOB = moment(this.xdob, 'DD-MM-YYYY', true)

                var isValidDOB = aDOB.isValid()
                if (!isValidDOB){
                    errors.push("wrongformatdob")
                }
                if (this.xpatientname === ''){
                    errors.push("requirename")
                }
                if (this.xdob === ''){
                    errors.push("requiredob")
                }
                if (_.isEmpty(this.xsex)){
                    errors.push("requiresex")
                }
                if (_.isEmpty(this.xtitle)){
                    errors.push("requiretitle")
                }
                if (errors.length === 0 && !this.$store.state.patient.pgrs_save){
                    var aDOB = this.formatDateIndotoInter(this.xdob)
                    var prm = this.$store.state.patient.selected_patient
                    prm.Nat_PatientM_TitleID = this.$store.state.patient.selected_title.M_TitleID
                    prm.Nat_PatientPrefix = this.$store.state.patient.patient_prefix
                    prm.Nat_PatientName = this.$store.state.patient.patient_name
                    prm.Nat_PatientSuffix = this.$store.state.patient.patient_suffix
                    prm.Nat_PatientSuffix = this.$store.state.patient.patient_suffix
                    prm.Nat_PatientPOB = this.$store.state.patient.pob
                    prm.Nat_PatientDOB = aDOB
                    prm.Nat_PatientHP = this.$store.state.patient.hp
                    prm.Nat_PatientEmail = this.$store.state.patient.email
                    
                    console.log(prm)
                    this.$store.dispatch("patient/savepatientnas", prm)
                }
            },
            saveNewPatient() {
                this.$store.commit("patient/update_errors", [])
                var errors = this.$store.state.patient.errors
                var aDOB = moment(this.xdob, 'DD-MM-YYYY', true)
                console.log(this.xdob)
                console.log(aDOB)
                var isValidDOB = aDOB.isValid()
                if (!isValidDOB) {
                    errors.push("wrongformatdob")
                }
                if (this.xpatientname === '') {
                    errors.push("requirename")
                }
                if (this.xdob === '') {
                    errors.push("requiredob")
                }
                if (_.isEmpty(this.xsex)) {
                    errors.push("requiresex")
                }
                if (_.isEmpty(this.xtitle)) {
                    errors.push("requiretitle")
                }
                if (errors.length === 0) {
                    var prm = {}
                    prm.M_PatientID = 0
                    prm.M_PatientM_TitleID = this.$store.state.patient.selected_title.M_TitleID
                    prm.M_PatientPrefix = this.xpatientprefix
                    prm.M_PatientName = this.xpatientname
                    prm.M_PatientSuffix = this.xpatientsuffix
                    prm.M_PatientDOB = this.xdob
                    prm.M_PatientM_SexID = this.$store.state.patient.selected_sex.M_SexID
                    prm.M_PatientM_ReligionID = this.$store.state.patient.selected_religion.M_ReligionID
                    prm.M_PatientEmail = this.xemail
                    prm.M_PatientPOB = this.xpob
                    prm.M_PatientHP = this.xhp
                    prm.M_PatientPhone = this.xphone
                    prm.M_PatientM_IdTypeID = this.$store.state.patient.selected_kartuidentitas.M_IdTypeID
                    prm.M_PatientIDNumber = this.xnoidentitas
                    prm.M_PatientNote = this.xnote
                    prm.M_PatientNIK = this.xnik
                    prm.M_PatientJabatan = this.xjabatan
                    prm.M_PatientKedudukan = this.xkedudukan
                    prm.M_PatientPJ = this.xpj
                    prm.M_PatientLocation = this.xlocation
                    prm.M_PatientJob = this.xjob
                    this.$store.commit("patient/update_pgrs_save", true)
                    this.$store.dispatch("patient/newpatient", prm)
                }
            },
            deleteData() {
                let msg = "Yakin, akan menghapus data pasien " + this.xpatientname + " ?"
                this.$store.commit("patient/update_msg_confirmation_delete", msg)
                this.$store.commit("patient/update_dialog_confirmation_delete", true)
            },
            doDeleteData() {
                var prm = {}
                prm.M_PatientID = this.$store.state.patient.selected_patient.M_PatientID
                prm.M_PatientName = this.xpatientname
                this.$store.commit("patient/update_pgrs_save", true)
                this.$store.dispatch("patient/delete", prm)
            },
            thr_search_city: _.debounce( function () {
                this.$store.dispatch("patient/searchcity",this.search_city)
            },2000),
            checkError(value){
                var errors = this.$store.state.patient.errors
                if(errors.includes(value)){
                    return true
                }
                else{
                    return false
                }
            },
        
        editAddress(value){
            this.$store.commit("patient/update_act_addr",'edit')
            //this.xbranch_id = value.M_BranchID
            this.$store.commit("patient/update_x_addr_id",value.Nat_PatientAddressID)
            this.labeladdress = value.Nat_PatientAddressNote
            this.oldlabel = value.Nat_PatientAddressNote

            this.$store.dispatch("patient/getdatalocations",{id :value.Nat_PatientAddressM_KelurahanID})
           // this.$store.commit("patient/update_cities",[{M_CityIDreadonly :value.M_CityID,M_CityNamereadonly :value.M_CityName}])
           // this.cityaddress = {M_CityIDreadonly :value.M_CityID,M_CityNamereadonly :value.M_CityName}
            //this.$store.commit("patient/update_districts",[{M_DistrictIDreadonly :value.M_DistrictID,M_DistrictNamereadonly :value.M_DistrictName}])
            //this.districtaddress = {M_DistrictIDreadonly :value.M_DistrictID,M_DistrictNamereadonly :value.M_DistrictName}
            //this.$store.commit("patient/update_kelurahans",[{M_KelurahanIDreadonly :value.M_PatientAddressM_KelurahanID,M_KelurahanNamereadonly :value.M_KelurahanName}])
            //this.kelurahanaddress = {M_KelurahanIDreadonly :value.M_PatientAddressM_KelurahanID,M_KelurahanNamereadonly :value.M_KelurahanName}
            this.descriptionaddress = value.Nat_PatientAddressDescription
            //this.$store.commit("patient/update_dialog_form_address",true)
        },
        saveEditAddress(){
            console.log('yaaaeee')
            this.$store.commit("patient/update_errors",[])
            var errors = this.$store.state.patient.errors
            if(this.labeladdress === ''){
                errors.push("requiredlabel")
            }
            /*if(this.oldlabel.toLowerCase() === 'utama' && this.labeladdress.toLowerCase() !== 'utama'){
                errors.push("readonlyutama")
            }*/
            if(_.isEmpty(this.cityaddress)){
                errors.push("requiredcity")
            }
            if(_.isEmpty(this.districtaddress)){
                errors.push("requireddistrict")
            }
            if(_.isEmpty(this.kelurahanaddress)){
                errors.push("requiredkelurahan")
            }
            if(_.isEmpty(this.descriptionaddress)){
                errors.push("requireddescription")
            }

            if(errors.length === 0 ){
                //this.$store.commit("patient/update_pgrs_save", true)
                var selected_patient = this.$store.state.patient.selected_patient
                var addresses = this.$store.state.patient.selected_patient.address
                var id_address = this.$store.state.patient.x_addr_id
                var idx = _.findIndex(addresses, function(o) { return o.Nat_PatientAddressID === id_address})
                addresses[idx].Nat_PatientAddressID = id_address
                addresses[idx].Nat_PatientAddressNote = this.labeladdress
                addresses[idx].Nat_PatientAddressDescription =  this.descriptionaddress
                addresses[idx].Nat_PatientAddressM_KelurahanID = this.kelurahanaddress.M_KelurahanID
                selected_patient.address = addresses
                this.$store.commit("patient/update_selected_patient",selected_patient)
                this.$store.commit("patient/update_dialog_form_address",false)
                
            }
        },
        },
        watch: {
                search_city(val,old) {
                    if (val == old ) return
                    if (! val) return
                    if (val.length < 1 ) return
                    if (this.$store.state.patient.update_autocomplete_status == 1 ) return  
                    this.thr_search_city()
                }
        }
    }
</script>