<script>
import ProductoCantidad from "./ProductoCantidad.vue";
import { mapGetters, mapState } from "vuex";

export default {
    name: "ProductoCard",
    components: { ProductoCantidad },
    props: {
        producto: {
            type: Object,
            required: true
        }
    },
    computed: {
        ...mapState('ui', ["show_chismosa"]),
        ...mapState('pedido', ["aprobado"]),
        ...mapGetters('pedido', ["enChismosa", "cantidad"]),
        fuePedido() {
            return this.enChismosa(this.producto.id);
        },
        cantidadEnChismosa() {
            return this.cantidad(this.producto.id);
        },
        conIconos() {
            return this.producto.economia_solidaria || this.producto.nacional;
        }
    },
}
</script>

<template>
    <div class="box is-flex is-flex-direction-column" style="height:100%">
        <div class="columns is-mobile">
            <div class="column">
                <p class="title is-6">
                    {{ producto.nombre }}
                </p>
            </div>
            <div class="column is-one-quarter has-text-right">
                <p class="has-text-weight-bold has-text-primary block">
                    ${{ producto.precio }}
                </p>
            </div>
        </div>
        <div class="columns mt-auto is-justify-content-left is-mobile">
            <div v-if="conIconos" class="column has-text-left">
                <span>
                    <img v-show="producto.economia_solidaria" height="30px" width="30px" src="/assets/solidaria.png" alt="proveedor de economía solidaria">
                    <img v-show="producto.nacional" height="30px" width="30px" src="/assets/uruguay.png" alt="proveedor nacional"/>
                </span>
            </div>
            <div class="column mt-auto"
                 :class="conIconos ? 'is-three-quarters-mobile is-two-thirds-tablet' : 'is-full'">
                <producto-cantidad
                    v-if="!aprobado"
                    :producto_id="producto.id"
                    :requiere_notas="producto.requiere_notas"
                />
                <div class="has-text-centered mt-2" v-if="fuePedido && aprobado">
                    <p class="subtitle is-7">{{ cantidadEnChismosa }} en chismosa</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@use "../../../../node_modules/bulma/sass/utilities/mixins";

@include mixins.until(mixins.$desktop) {
    .hidden-until-desktop {
        display: none;
    }
}

@include mixins.from(mixins.$desktop) {
    .min-width-from-desktop {
        min-width: 25rem;
    }
    .hidden-from-desktop {
        display: none;
    }
}

@include mixins.from(mixins.$tablet) {
    .hidden-from-tablet {
        display: none;
    }
}

@include mixins.mobile() {
    .is-left-mobile {
        float: left;
    }
}
</style>
