<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
import Dropdown from "../../comunes/Dropdown.vue";

export default {
    name: "BarrioRow",
    components: { Dropdown },
    props: {
        grupo_de_compra: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
            saldoControl: 0,
            inputSaldoInteractuado: false,
            opcionesDescarga: [
                {
                    nombre: "Pedido barrial en csv",
                    href: `/comisiones/pedidos/${this.grupo_de_compra.id}/`
                },
                {
                    nombre: "Notas en csv",
                    href: `/comisiones/pedidos/${this.grupo_de_compra.id}/notas`
                },
                {
                    nombre: "Pedido de ollas en csv",
                    href: `/comisiones/pedidos/${this.grupo_de_compra.id}/ollas`
                }
            ],
        };
    },
    mounted() {
        this.saldoControl = this.grupo_de_compra.saldo;
    },
    watch: {
        lastFetch() {
            this.saldoControl = this.grupo_de_compra.saldo;
        },
    },
    methods: {
        ...mapMutations("ui", ["toggleModalBarrio"]),
        ...mapMutations("comisiones", ["seleccionarGrupoDeCompra"]),
        ...mapActions("ui", ["toast"]),
        ...mapActions("comisiones", ["setSaldo"]),
        async confirmarSaldo() {
            await this.setSaldo({
                gdc_id: this.grupo_de_compra.id,
                saldo: this.saldoControl,
            });
            this.inputSaldoInteractuado = false;
        },
        abrirModalBarrio() {
            this.seleccionarGrupoDeCompra({ grupo_de_compra: this.grupo_de_compra });
            this.toggleModalBarrio();
        },
        descargasBarrio() {
            this.toast({
                mensaje: `Esto debería ser un dropdown para descargar el pedido de ${this.grupo_de_compra.nombre}`
            });
        }
    },
    computed: {
        ...mapState("comisiones", ["lastFetch"]),
        ...mapGetters("comisiones", ["saldo"]),
        saldoModificado() {
            return Number.parseFloat(this.saldo(this.grupo_de_compra.id)) !== Number.parseFloat(this.saldoControl);
        },
    }
}
</script>

<template>
    <tr>
        <th>{{ grupo_de_compra.nombre }}</th>
        <th>{{ grupo_de_compra.region }}</th>
        <td>
            <div class="field has-addons">
                <div class="control is-expanded">
                    <input :id="`barrio-input-${grupo_de_compra.id}`"
                           v-model="saldoControl"
                           class="input is-small"
                           type="number"
                           style="text-align: center"
                           @input="inputSaldoInteractuado = true">
                </div>
                <div class="control">
                    <button :disabled="!(inputSaldoInteractuado && saldoModificado)"
                            class="button is-small is-success ml-1"
                            @click="confirmarSaldo">
                        <span class="icon"><i class="fas fa-check"/></span>
                    </button>
                </div>
            </div>
        </td>
        <td>
            <dropdown :opciones="opcionesDescarga"
                      :placeholder="`Pedido de ${grupo_de_compra.nombre}`"
                      :is-right="false"/>
        </td>
        <td>
            <button class="button"
                    @click="abrirModalBarrio">
                <span>Modificar barrio</span>
                <span class="icon"><i class="fas fa-edit"/></span>
            </button>
        </td>
    </tr>
</template>

<style scoped>
</style>
