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

export default {
    props: {
        parametro: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
            control: this.parametro.valor,
        };
    },
    computed: {
        hayCambios() {
            return this.control !== this.parametro.valor;
        }
    },
    methods: {
        ...mapActions("comisiones", ["cambiarParametro"]),
        modificar() {
            this.cambiarParametro({
                parametro_id: this.parametro.id,
                valor: this.control,
            });
        }
    }
}
</script>

<template>
    <tr>
        <td>{{ parametro.nombre }}</td>
        <td>
            <div class="field">
                <input :type="parametro.tipo"
                       :id="'input-' + parametro.id"
                       v-model="control"
                       class="has-text-right">
            </div>
        </td>
        <td class="has-text-centered">
            <div class="control">
                <button class="button is-small is-success"
                        @click="modificar"
                        :disabled="!hayCambios">
                        <span class="icon">
                            <i class="fas fa-check"></i>
                        </span>
                </button>
            </div>
        </td>
        <td class="has-text-centered">
            <div class="control">
                <button class="button is-small is-danger"
                        @click="control = parametro.valor"
                        :disabled="!hayCambios">
                        <span class="icon">
                            <i class="fa fa-undo" aria-hidden="true"></i>
                        </span>
                </button>
            </div>
        </td>
    </tr>
</template>

<style scoped>

</style>
