<template>
    <v-dialog
        v-model="dialog" 
        persistent
        width="800px"
    >
        <v-card>
            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs6 pr-2>
                        <v-layout row wrap>
                            <v-flex xs12 pl-1 pr-1>
                                <v-text-field
                                    label="NAMA LENGKAP"
                                    v-model="name"
                                    :error="!rules.required"
                                    :rules="[rules.required]"
                                    @update:error="error_trigger('name', $event)"
                                ></v-text-field>
                            </v-flex>

                            <v-flex xs6 pl-1 pr-1>
                                <v-text-field
                                    label="Prefix 1"
                                    v-model="prefix1"
                                ></v-text-field>
                            </v-flex>

                            <v-flex xs6 pl-1 pr-1>
                                <v-text-field
                                    label="Prefix 2"
                                    v-model="prefix2"
                                ></v-text-field>
                            </v-flex>
                        </v-layout>

                        <v-layout row wrap>
                            <v-flex xs4 pl-1 pr-1>
                                <v-text-field
                                    label="Sufix 1"
                                    v-model="sufix1"
                                ></v-text-field>
                            </v-flex>

                            <v-flex xs4 pl-1 pr-1>
                                <v-text-field
                                    label="Sufix 2"
                                    v-model="sufix2"
                                ></v-text-field>
                            </v-flex>

                            <v-flex xs4 pl-1 pr-1>
                                <v-text-field
                                    label="Sufix 3"
                                    v-model="sufix3"
                                ></v-text-field>
                            </v-flex>
                        </v-layout>

                        <v-layout row wrap>
                            <v-flex xs6 pl-1 pr-1>
                                <v-select
                                    :items="sexs"
                                    item-text="M_SexName"
                                    item-value="M_SexID"
                                    return-object
                                    v-model="selected_sex"
                                    label="Jenis Kelamin"
                                    :error="!rules.required"
                                    :rules="[rules.required]"
                                    @update:error="error_trigger('selected_sex', $event)"
                                ></v-select>
                            </v-flex>
                            <v-flex xs6>
                                &nbsp;
                            </v-flex>

                            <v-flex xs12 pl-1 pr-1>
                                <v-text-field
                                    label="No HP"
                                    v-model="hp"
                                    :error="!rules.required"
                                    :rules="[rules.required]"
                                    @update:error="error_trigger('hp', $event)"
                                ></v-text-field>
                            </v-flex>
                        </v-layout>
                    </v-flex>

                    <v-flex xs6 pl-2>
                        <v-layout row wrap>
                            <v-flex xs12>
                                <v-textarea label="Alamat lengkap" v-model="address"
                                    :error="!rules.required"
                                    :rules="[rules.required]"
                                    @update:error="error_trigger('address', $event)"></v-textarea>
                            </v-flex>

                            <v-flex xs12>
                                
                                <v-autocomplete
                                    :items="provinces"
                                    item-text="M_ProvinceName"
                                    item-value="M_ProvinceID"
                                    return-object
                                    v-model="selected_province"
                                    label="Propinsi"
                                    autocomplete
                                ></v-autocomplete>
                            </v-flex>

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

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

                            <v-flex xs12>
                                <v-autocomplete
                                    :items="villages"
                                    item-text="M_KelurahanName"
                                    item-value="M_KelurahanID"
                                    return-object
                                    v-model="selected_village"
                                    label="Kelurahan"
                                    autocomplete
                                    :error="!rules.required"
                                    :rules="[rules.required]"
                                    @update:error="error_trigger('selected_village', $event)"
                                ></v-autocomplete>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
            </v-card-text>

            <v-card-actions>
                <v-btn color="primary" flat @click="dialog=!dialog">Tutup</v-btn>
                <v-spacer></v-spacer>
                <v-btn color="primary" @click="save" :disabled="!btn_save_enabled" >Simpan</v-btn>
            </v-card-actions>
        </v-card>
        
    </v-dialog>
</template>

<script>
module.exports = {
    data () {
        return {
            errors : {
                name : true,
                hp : true,
                sufix1 : false,
                sufix2 : false,
                sufix3 : false,
                prefix1 : false,
                prefix2 : false,
                selected_sex : true,
                address : false,
                selected_village : false
            },
            rules : {
                required : value => { return !!value || "Harus diisi !" },
                // hp : value => { this.errors.name = !value; return !!value || "Harus diisi !" },
                // selected_sex : value => { this.errors.name = !value; return !!value || "Harus diisi !" },
                // address : value => { this.errors.name = !value; return !!value || "Harus diisi !" },
                // selected_village : value => { this.errors.name = !value; return !!value || "Harus diisi !" }
            }
        }
    },

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

        sexs () {
            return this.$store.state.doctor_new.sexs
        },

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

        provinces () {
            return this.$store.state.doctor_new.provinces
        },

        selected_province : {
            get () { return this.$store.state.doctor_new.selected_province },
            set (v) { 
                this.$store.commit('doctor_new/update_selected_province', v)
                // this.$store.dispatch('doctor_new/search_city')
            }
        },

        cities () {
            return this.$store.state.doctor_new.cities
        },

        selected_city : {
            get () { return this.$store.state.doctor_new.selected_city },
            set (v) { 
                this.$store.commit('doctor_new/update_selected_city', v) 
                // this.$store.dispatch('doctor_new/search_district')
            }
        },

        districts () {
            return this.$store.state.doctor_new.districts
        },

        selected_district : {
            get () { return this.$store.state.doctor_new.selected_district },
            set (v) { 
                this.$store.commit('doctor_new/update_selected_district', v) 
                // this.$store.dispatch('doctor_new/search_village')
            }
        },

        villages () {
            return this.$store.state.doctor_new.villages
        },

        selected_village : {
            get () { return this.$store.state.doctor_new.selected_village },
            set (v) { this.$store.commit('doctor_new/update_selected_village', v) }
        },

        name : {
            get () { return this.$store.state.doctor_new.param_name },
            set (v) { this.$store.commit('doctor_new/update_param', {param:'name',val:v}) }
        },

        prefix1 : {
            get () { return this.$store.state.doctor_new.param_prefix1 },
            set (v) { this.$store.commit('doctor_new/update_param', {param:'prefix1',val:v}) }
        },

        prefix2 : {
            get () { return this.$store.state.doctor_new.param_prefix2 },
            set (v) { this.$store.commit('doctor_new/update_param', {param:'prefix2',val:v}) }
        },

        sufix1 : {
            get () { return this.$store.state.doctor_new.param_sufix1 },
            set (v) { this.$store.commit('doctor_new/update_param', {param:'sufix1',val:v}) }
        },

        sufix2 : {
            get () { return this.$store.state.doctor_new.param_sufix2 },
            set (v) { this.$store.commit('doctor_new/update_param', {param:'sufix2',val:v}) }
        },

        sufix3 : {
            get () { return this.$store.state.doctor_new.param_sufix3 },
            set (v) { this.$store.commit('doctor_new/update_param', {param:'sufix3',val:v}) }
        },

        hp : {
            get () { return this.$store.state.doctor_new.param_hp },
            set (v) { this.$store.commit('doctor_new/update_param', {param:'hp',val:v}) }
        },

        address : {
            get () { return this.$store.state.doctor_new.param_address },
            set (v) { this.$store.commit('doctor_new/update_param', {param:'address',val:v}) }
        },

        btn_save_enabled () {
            if (this.errors.name || this.errors.hp || this.errors.selected_sex || this.errors.address ||
                this.errors.selected_village)
                return false

            return true
        }
    },

    methods : {
        save () {
            this.$store.commit('update_dialog_loading', true)
            this.$store.dispatch('doctor_new/save')
        },

        error_trigger(x, e) {
            this.errors[x] = e
        }
    },

    mounted () {
        this.$store.dispatch('doctor_new/search_sex')
    },

    watch : {
        dialog(val, old) {
            if (val && !old) {
                this.$store.dispatch('doctor_new/search_province')

                this.name = ""
                this.hp = ""
                this.sufix1 = ""
                this.sufix2 = ""
                this.sufix3 = ""
                this.prefix1 = ""
                this.prefix2 = ""
                this.selected_sex = null
                this.address = ""
            }
                
        },

        selected_province(val, old) {
            if (val != old)
                this.$store.dispatch('doctor_new/search_city')
        },

        selected_city(val, old) {
            if (val != old)
                this.$store.dispatch('doctor_new/search_district')
        },

        selected_district(val, old) {
            if (val != old)
                this.$store.dispatch('doctor_new/search_village')
        }
    }
}
</script>
