<script>
import TablaBarrios from "./TablaBarrios.vue";
import DropdownDescargar from "../DropdownDescargar.vue";
import ModalBarrio from "./ModalBarrio.vue";
import { mapActions, mapMutations, mapState } from "vuex";
import Dropdown from "../../comunes/Dropdown.vue";
import comisiones from "../../../store/modules/comisiones";

export default {
    name: "BarriosSeccion",
    components: { Dropdown, DropdownDescargar, TablaBarrios, ModalBarrio },
    data() {
        return {
            opcionesDescarga: [
                {
                    nombre: "Pedidos por barrio en csv",
                    href: "/comisiones/pedidos"
                },
                {
                    nombre: "Notas por barrio en csv",
                    href: "/comisiones/pedidos/notas"
                },
                {
                    nombre: "Pedidos por barrio en pdf",
                    href: "/comisiones/pedidos/pdf"
                },
                {
                    nombre: "Pedidos de ollas en csv",
                    href: "/comisiones/pedidos/ollas"
                },
            ],
        };
    },
    computed: {
        ...mapState("comisiones", ["grupo_de_compra_actual", "grupo_de_compra_nuevo"])
    },
    methods: {
        ...mapMutations("ui", ["toggleModalBarrio"]),
        ...mapMutations("comisiones", ["grupoDeCompraNuevo"]),
        modalNuevoBarrio() {
            this.grupoDeCompraNuevo();
            this.toggleModalBarrio();
        }
    }
}
</script>

<template>
    <div>
        <modal-barrio v-if="grupo_de_compra_actual || grupo_de_compra_nuevo"/>
        <div class="is-flex is-justify-content-space-between mb-3">
            <button class="button" @click="modalNuevoBarrio">
                <span class="icon"><i class="fa fa-plus-circle"/></span>
                <span>Agregar barrio</span>
            </button>
            <dropdown :opciones="opcionesDescarga" placeholder="Descargar planillas" :is-right="false"/>
        </div>
        <tabla-barrios/>
    </div>
</template>

<style scoped>
</style>
