Vue.component('categorias-container', {
  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 -->`,
  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);
    }
  }
});

Vue.component('productos-container', {
  template: `
    <div v-show="visible" class="container">
      <div class="columns is-multiline is-mobile">
        <div v-for="producto in productos" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
          <div class="card" style="height:100%">
            <div class="card-image">
              <figure class="image is-4by3">
                <img v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
              </figure>
            </div>
            <div class="card-content">
              <div class="media">
                <div class="media-content">
                  <p class="title is-6" v-text="producto.nombre"></p>
                  <p class="subtitle is-7" v-text="producto.proveedor"></p>
                  <p class="subtitle is-7">$<span v-text="producto.precio"></span></p>
                </div>
              </div>
            </div>
          </div><!-- END CARD -->
        </div><!-- END BLOCK COLUMN -->
      </div><!-- END COLUMNS -->
    </div><!-- END CONTAINER -->`,
  data() {
    return {
      productos: [],
      visible: false,
      categoria: null,
      paginar: 150
    }
  },
  computed: {
    miga: function(){
      return {
        nombre: this.categoria,
        href: "#" + this.categoria
      }
    }
  },
  mounted() {
    Event.$on('categoria-seleccionada', (categoria) =>  {
      this.categoria = categoria;

      axios.get("/api/productos", {
        params: {
          categoria: this.categoria,
          paginar: this.paginar
        }
      }).then(response => {
        this.productos = response.data.data;
      });
      this.visible = true;
      Event.$emit("migas-agregar",this.miga);
    });
  }
});