<template>
	<div v-if="region_elegida" class="block">
		<div class="field">
			<label class="label" :class="estilos.texto">
                Seleccioná tu barrio o grupo de compra
            </label>
			<div class="control">
				<div class="select">
		        	<select v-model="barrio"
                        @change="selectGrupoDeCompra({ grupo_de_compra: barrio })">
				    	<option :disabled="grupo_de_compra_elegido" 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>
        <password-input v-if="grupo_de_compra_elegido"></password-input>
        <input readonly v-model="nombre" type="hidden" name="name">
	</div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex";
import PasswordInput from "../PasswordInput.vue";
export default {
    name: 'BarrioSelect',
    components: { PasswordInput },
    methods: {
        ...mapMutations("login", ["selectGrupoDeCompra"]),
    },
    computed: {
        ...mapState("login", ["region_elegida", "grupos_de_compra", "grupo_de_compra_elegido"]),
        ...mapGetters("login", ["urlRol", "estilos", "nombre"]),
    },
    data() {
        return {
            barrio: null,
        };
    },
}
</script>