<script>
import { mapActions, mapMutations } from "vuex";

export default {
    name: "Buscador",
    methods: {
        ...mapActions('productos', ["filtrarProductos"]),
        ...mapMutations('ui', ["addMiga", "popUltimaBusqueda", "toggleBurger"]),
        buscar() {
            if (this.burger_activa)
                this.toggleBurger();
            this.filtrarProductos({ filtro: "nombre", valor: this.searchString });
            this.popUltimaBusqueda();
            this.addMiga({ nombre: this.searchString });
        }
    },
    data() {
        return {
            searchString: "",
        }
    },
}
</script>

<template>
    <div class="navbar-item field has-addons mt-1 mr-3 mb-1">
        <a class="button is-small has-text-dark-grey" @click.capture="buscar">
            <span class="icon">
              <i class="fas fa-search"></i>
            </span>
        </a>
        <input class="input is-small"
               type="text"
               placeholder="Harina"
               v-model="searchString"
               @keyup.enter="buscar">
    </div>
</template>

<style scoped>

</style>
