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

export default {
    props: {
        caracteristica: Object
    },
    computed: {
        ...mapState('admin',["grupo_de_compra_id"]),
        ...mapGetters('admin',["getCaracteristica"]),
        habilitada() {
            return this.getCaracteristica(this.caracteristica.id);
        }
    },
    methods: {
        ...mapActions('admin',["toggleCaracteristica"]),
    }
}
</script>

<template>
    <tr>
        <td>{{ caracteristica.nombre }}</td>
        <td>
            <div class="field">
                <input type="checkbox" class="switch is-rounded is-success"
                       :id="'switch-' + caracteristica.id"
                       :checked="habilitada"
                       @change="toggleCaracteristica({ caracteristica_id: caracteristica.id })">
                <label :for="'switch-' + caracteristica.id">
                    <span class="is-hidden-mobile">
                        {{ habilitada ? 'Habilitada' : 'Deshabilitada' }}
                    </span>
                </label>
            </div>
        </td>
    </tr>
</template>

<style scoped></style>