Region

Region.vue

<template>
    <div>
        <h2 class="h2">Выберите ваш регион</h2>
         
        <form class="mt-3" @submit.prevent="sendPhone" v-if="countries.length > 0">
             <transition name="fade">
                <div class="mb-3">
                    <label for="country" class="form-label">Страна</label>
                    <Multiselect
                            v-model="countryId"
                            placeholder="Выберете страну"
                            label="name"
                            valueProp="id"
                            :options="countries"
                            :canClear="false"
                            :hideSelected="true"
                            @change="changeCountry"
                            />
                </div>
            </transition>
            <transition name="fade">
                <div class="mb-3" v-if="regions.length > 0">
                    <label for="country" class="form-label">Регион</label>
                    <Multiselect
                            v-model="regionid"
                            placeholder="Выберете регион"
                            label="name"
                            valueProp="id"
                            :options="regions"
                            :canClear="false"
                            trackBy="name"
                            noResultsText="Регион не найден"
                            :searchable="true"
                            @change="changeRegion"
                            ref="region"
                            @select="$refs.region.clearSearch()"
                            />
                </div>
            </transition>
            <transition name="fade">
                <div class="mb-3" v-if="cities.length > 0">
                    <label for="country" class="form-label">Населенный пункт</label>
                    <Multiselect
                            v-model="cityId"
                            placeholder="Выберете город"
                            label="name"
                            valueProp="id"
                            trackBy="name"
                            :canClear="false"
                            :searchable="true"
                            noResultsText="город не найден"
                            :options="cities"
                            ref="city"
                            @select="$refs.city.clearSearch()"
                            @change="changeCity"
                            />
                </div>
            </transition>
            <transition name="fade">
                <div class="d-grid gap-2 col-6 mx-auto" v-if="cityId && proceed">
                    <button class="btn btn-secondary btn-block" @click="sendCityId">
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"
                        v-if="sendUserData"></span>
                        Далее</button>
                </div>
            </transition>
        </form>
        <div class="invalid-feedback d-block">{{error}}</div>
        <Loading :loading="loading" />
    </div>
    
</template>

<script>
import axios from 'axios';
import Multiselect from '@vueform/multiselect'
import { mapGetters } from 'vuex';

import Loading from '@/components/helpers/Loading.vue'

//https://github.com/vueform/multiselect
export default {
    props: {
         proceed: Boolean,
    },
    components: { 
        Multiselect,
        Loading
    },
    data() {
        return {
            loading: false,
            countryId: '',
            error: '',
            regionid: 0,
            cityId: 0,
            value: null,
            countries: [],
            countriesError: '',
            regions: [],
            cities: [],
            sendUserData: false,
        }
    },
    created() {
        this.loading = true;
        if(this.getUserInfo && this.getUserInfo.city_id > 0){
            axios.get(`getAddressByCityId?cityId=${this.getUserInfo.city_id}`, 
            {
                headers: { Authorization: `Bearer ${this.getToken}` }
            })
            .then( (res) => {
                const {regionId, countryId} = res.data;
                this.cityId = this.getUserInfo.city_id;
                this.regionid = regionId;
                this.countryId = countryId;

                this.changeCountry(countryId);
                this.changeRegion(regionId);
                this.loading = false;
            })
            .catch((error) => {
                this.error =  error.response.data.message;
                this.loading = false;
            })
        }

        axios.get('getCountries', {
            headers: { Authorization: `Bearer ${this.getToken}` }
        })
        .then( (res) => {
            this.countries = res.data;
            this.loading = false;
        })
        .catch((error) => {
            this.error =  error.response.data.message;
            this.loading = false;
        })
      
    },
    computed: {
        ...mapGetters([
            'getToken',
            'getUserInfo'
        ])
    },
    methods: {
        customLabel (option) {
            return `${option.library} - ${option.language}`
        },
        onSelect (option, id) {
            console.log(option, id)
        },
        changeCountry(id){
            this.loading = true;
            axios.get(`getRegions?id=${id}`, {
                headers: { Authorization: `Bearer ${this.getToken}` }
            })
            .then( (res) => {
                this.regions = res.data;
                this.loading = false;
            })
            .catch((error) => {
                this.error =  error.response.data.message;
                this.loading = false;
            });
        },
        changeRegion(id){
            this.loading = true;
             axios.get(`getCities?id=${id}`,{
                headers: { Authorization: `Bearer ${this.getToken}` }
            })
            .then( (res) => {
                this.cities = res.data;
                this.loading = false;
            })
            .catch((error) => {
                this.error =  error.response.data.message;
                this.loading = false;
            });
        },
        changeCity(){
             
        },
        sendCityId(){
            this.sendUserData = true;
            console.log(this.getUserInfo.id)

            this.$store
                .dispatch("updateUserCityId", {
                    userId : this.getUserInfo.id,
                    cityId : this.cityId
                })
                .then(
                    () => {
                        this.sendUserData = false;
                    },
                    (error) => {
                        if(error.response){
                            this.error =  error.response.data.message;
                            this.sendUserData = false;
                        }
                        this.loading = false;
                    }
                );

        }
    }
}
</script>
<style src="@vueform/multiselect/themes/default.css"></style>
<style  scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>