<template>
	<div class="block">
		<div class="field">
		    <label class="label" :class="adminUrl ? 'has-text-white' : ''">
                Seleccioná tu región
            </label>
	        <div class="control">
	        	<div class="select">
	        		<select @change="selectRegion({ region })" v-model="region">
			    		<option :disabled="region_elegida" value=null>
                            Seleccionar
                        </option>
						<option v-for="(region, index) in regiones"
                                :key="index"
                                v-text="region"
                                :name="region">
                        </option>
					</select>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {mapActions, mapGetters, mapState} from "vuex";
export default {
    name: 'RegionSelect',
    async mounted() {
        await this.getRegiones();
    },
    data() {
        return {
            region: null,
        };
    },
    methods: {
        ...mapActions('login',["getRegiones","selectRegion"]),
    },
    computed: {
        ...mapState('login',["regiones","region_elegida"]),
        ...mapGetters('login',["adminUrl"]),
    }
}
</script>