<template>
	<div v-show="visible" class="block">
		<div class="field">
			<label class="label">Seleccioná tu barrio o grupo de compra</label>
			<div class="control">
				<div class="select">
		        	<select @change="onGDCSelected" v-model="gdc" name="name">
				    	<option :disabled="isDefaultDisabled==1" value=null>Seleccionar</option>
						<option v-for="gdc in gdcs" v-text="gdc.nombre" :name="gdc.nombre"></option>
					</select>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				region: null,
				gdcs: [],
				isDefaultDisabled: 0,
				gdc: null
			}
		},
		mounted() {
	  		Event.$on('region-seleccionada', (region)=>  {
				this.region = region;
	  			this.fillGDC(region);
	  			this.visible = true;
	  		});
		},
		methods : {
			fillGDC(region) {
		    	axios.get("/api/grupos-de-compra").then(response => {
		    		this.gdcs = response.data[this.region];
		    	});
			},
			onGDCSelected() {
				this.isDefaultDisabled = 1;
	  			Event.$emit("gdc-seleccionado",this.gdc);
	  		}
		}
	}
</script>