<template>
	<div v-if="region_elegida" class="block">
		<div class="field">
			<label class="label" :class="adminUrl ? 'has-text-white' : ''">
                Seleccioná tu barrio o grupo de compra
            </label>
			<div class="control">
				<div class="select">
		        	<select @change="selectGrupoDeCompra({ grupo_de_compra: barrio })" v-model="barrio">
				    	<option :disabled="grupo_de_compra_elegido !== null" value=null>
                            Seleccionar
                        </option>
						<option v-for="(gdc, index) in grupos_de_compra"
                                :key="index"
                                v-text="gdc.nombre"
                                :name="gdc.nombre">
                        </option>
					</select>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
    name: 'BarrioSelect',
    async mounted() {
        await this.getRegiones();
    },
    methods: {
        ...mapMutations('login',["selectGrupoDeCompra"]),
        ...mapActions('login',["getRegiones", "getGruposDeCompra"]),
    },
    computed: {
        ...mapState('login',["region_elegida","grupos_de_compra","grupo_de_compra_elegido"]),
        ...mapGetters('login',["adminUrl"]),
    },
    data() {
        return {
            barrio: null,
        };
    },
}
</script>
