<template>
    <div class="block ml-3 mr-3 is-max-widescreen is-max-desktop">
        <comunes-tabs-secciones :tabs="tabs" :tabInicial="tabActiva"></comunes-tabs-secciones>
        <div class="block pb-6" id="pedidos-comisiones-seccion"
             :class="seccionActiva === 'pedidos-comisiones-seccion' ? 'is-active' : 'is-hidden'">
            <div class="block" id="pedidos-comisiones-tabla-y-dropdown">
                <dropdown-descargar/>
            </div>
        </div>
        <div class="block pb-6" id="canasta-comisiones-seccion"
             :class="seccionActiva === 'canasta-comisiones-seccion' ? 'is-active' : 'is-hidden'">
            <div class="block" id="canasta-comisiones-seccion">
                <article class="message is-warning">
                    <div class="message-header">
                        <p>Formato de la canasta</p>
                    </div>
                    <div class="message-body">
                        <div class="content">
                            La planilla de la canasta tiene que tener el siguiente formato para que la aplicación la lea correctamente:
                            <ul>
                                <li> Los precios deben usar punto y no coma decimal </li>
                                <li> El nombre de las columnas deben ser "Tipo", "Producto", y "Precio" respectivamente </li>
                                <li> Las celdas deben separarse con '|' </li>
                                <li> No puede haber "enters" en ninguna celda </li>
                                <li> El bono de transporte debe tener tipo 'T' </li>
                            </ul>
                            <a class="has-text-info" href="/comisiones/canasta/ejemplo">Planilla de ejemplo.</a>
                            <article class="message is-danger mt-2">
                                <div class="message-body">
                                    <div class="content">
                                        Cuidado! Cargar una nueva canasta elimina todos los pedidos de la aplicación.
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </article>
                <div class="buttons is-right">
                    <canasta-input/>
                </div>
            </div>
        </div>
        <div
            class="block pb-6"
            id="saldos-comisiones-seccion"
            :class="seccionActiva === 'saldos-comisiones-seccion' ? 'is-active' : 'is-hidden'"
        >
            <div class="block" id="saldos-comisiones-seccion">
                <table>
                    <tbody>
                        <tr v-for="gdc in grupos_de_compra">
                            <th>{{ gdc.nombre }}</th>
                            <td>{{ gdc.saldo }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import TabsSecciones from "../comunes/TabsSecciones.vue";
import DropdownDescargar from "./DropdownDescargar.vue";
import CanastaInput from "./CanastaInput.vue";
import { mapActions, mapState } from "vuex";

export default {
    name: "ComisionesBody",
    components: {
        TabsSecciones,
        DropdownDescargar,
        CanastaInput,
    },
    data() {
        return {
            tabs: [
                { id: "pedidos-comisiones", nombre: "Pedidos" },
                { id: "canasta-comisiones", nombre: "Canasta" },
                { id: "saldos-comisiones", nombre: "Saldos" },
            ],
            tabActiva: "pedidos-comisiones",
            seccionActiva: "pedidos-comisiones-seccion",
            archivo: undefined,
        }
    },
    methods: {
        setSeccionActiva(tabId) {
            this.tabActiva = tabId;
            this.seccionActiva = tabId + "-seccion";
        },
        ...mapActions('comisiones', ['getGruposDeCompra']),
    },
    computed: {
        ...mapState('comisiones', [
            'grupos_de_compra',
        ]),
    },
    async mounted() {
        await this.getGruposDeCompra();
    },
}
</script>
