<template>
	<div v-show="visible" class="container">
      <div class="columns is-multiline is-mobile">
        <div v-for="catego in categorias" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
          <div @click.capture="seleccionarCategoria(catego)" class="card" style="height:100%" >
            <div class="card-content">
              <div class="media">
                <div class="media-content" style="overflow:hidden">
                  <p class="title is-6" v-text="catego"></p>
                </div>
              </div>
            </div>
          </div><!-- END CARD -->
        </div><!-- END BLOCK COLUMN -->
      </div><!-- END COLUMNS -->
  </div><!-- END CONTAINER -->
</template>

<script>
	export default {
		data() {
		    return {
		      categorias: null,
		      visible: true,
		      miga: {
		        nombre: "Categorías",
		        href: "/productos"
		      }
		    }
		  },
		  mounted() {
		    axios.get("/api/categorias").then(response => {
		      this.categorias = response.data;
		    });
		    Event.$emit("migas-setear-como-inicio",this.miga);
		  },
		  methods: {
		    seleccionarCategoria(categoria) {
		      this.visible = false;
		      Event.$emit("categoria-seleccionada",categoria);
		    }
		  }
	}
</script>