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

export default {
    name: "SaldoRow",
    props: {
        grupo_de_compra: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
            saldoControl: 0,
            inputSaldoInteractuado: false,
        };
    },
    mounted() {
        this.saldoControl = this.grupo_de_compra.saldo;
    },
    watch: {
        lastFetch() {
            this.saldoControl = this.grupo_de_compra.saldo;
        },
    },
    methods: {
        ...mapActions("comisiones", ["setSaldo"]),
        async confirmarSaldo() {
            await this.setSaldo({
                gdc_id: this.grupo_de_compra.id,
                saldo: this.saldoControl,
            });
            this.inputSaldoInteractuado = false;
        },
    },
    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>
        <td>
            <input :id="`saldo-input-${grupo_de_compra.id}`"
                   v-model="saldoControl"
                   class="input is-small"
                   type="number"
                   style="text-align: center"
                   @input="inputSaldoInteractuado = true">
        </td>
        <td>
            <button :disabled="!(inputSaldoInteractuado && saldoModificado)"
                    class="button is-small is-success ml-1"
                    @click="confirmarSaldo">
                <span class="icon">
                    <i class="fas fa-check"/>
                </span>
            </button>
        </td>
    </tr>
</template>

<style scoped>

</style>
