<template> <div v-bind:class="visible ? 'is-active modal' : 'modal'"> <div class="modal-background"></div> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title" v-text="producto.nombre"></p> <button class="delete" aria-label="close" @click.capture="cerrar"></button> </header> <section class="modal-card-body"> <div class="card-image"> <figure v-show="producto.nacional" class="image icono is-32x32" style="z-index:10"> <img src="/assets/uruguay.png"> </figure> <figure v-show="producto.economia_solidaria" class="image icono is-32x32" style="z-index:10"> <img src="/assets/solidaria.png"> </figure> <figure class="image is-4by3"> <img v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'"> </figure> </div> <div class="media-content"> <p class="title is-4" v-text="producto.proveedor"></p> <p class="subtitle is-4">$<span v-text="producto.precio"></span></p> <p class="subtitle is-6"><span v-show="producto.apto_veganxs">Apto para veganxs. </span><span v-show="producto.apto_celiacxs">Apto para celíacxs.</span></p> <p class="subtitle is-5"><span v-text="producto.descripcion"></span></p> <div class="field has-addons is-centered is-thin-centered"> <p class="control"> <button class="button" @click="cant !== 0 ? cant-- : cant"> <span class="icon is-small"> <!-- Habría que ver de poner un ícono de - --> </span> <span>-</span> </button> </p> <p class="control"> <input id="cantidad" class="input" type="number" v-model.number="cant" style="text-align: center"> </p> <p class="control"> <button class="button" @click="cant++"> <span class="icon is-small"> <!-- Habría que ver de poner un ícono de + --> </span> <span>+</span> </button> </p> </div> </div> </section> <footer class="modal-card-foot"> <!-- Habría que ver si cambiar el botón cuando al cantidad es 0 --> <button class="button is-success" :disabled="cant <= 0" @click="agregarProducto">Aceptar</button> <button class="button" @click.capture="cerrar">Cancelar</button> </footer> </div> </div> </template> <script> export default { data() { return { producto: null, visible: false, cant: 0 } }, computed: { miga: function(){ return { nombre: this.producto.nombre, href: "#" + this.producto.nombre } } }, methods: { cerrar() { this.cant = 0; this.visible = false; Event.$emit("migas-pop"); }, agregarProducto() { if (this.cant < 0) alert("No se puede agregar cantidades negativas") else if (!Number.isInteger(this.cant)) alert("Las cantidades deben ser números enteros") else { Event.$emit("sync-subpedido", this.cant, this.producto.id); this.cerrar(); } } }, mounted() { Event.$on('producto-seleccionado', (producto) => { this.producto = producto; this.visible = true; Event.$emit("migas-agregar",this.miga); }); } } </script> <style> figure.image.icono { float: right; margin: 4px; } .is-thin-centered { width: 50%; margin-left: auto; margin-right: auto; } </style>