<template>
  <div>
    <BuscarModulo
      :admin="admin"
      :modulo="modulo"
      :updateIsLoading="updateIsLoading"
      :updateModulo="updateModulo"
    />

    <TablaCarritos
      :operador="admin"
      :carritos="carritos"
      :isLoadingTable="isLoadingTable"
    />
  </div>
</template>

<script>
import axios from 'axios'
import BuscarModulo from '@/components/buscar/BuscarModulo'
import TablaCarritos from '@/components/operador/TablaCarritos'

export default {
  components: { BuscarModulo, TablaCarritos },
  props: {
    admin: { type: Object, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      modulo: { institucion: {} },
      carritos: [],
      isLoadingTable: false,
    }
  },
  methods: {
    updateModulo(valorObject) {
      this.modulo = valorObject
      this.obtenerCarritos()
    },
    obtenerCarritos() {
      this.isLoadingTable = true
      axios
        .get(
          `${process.env.api}/carrito/carritos?pagina=1&id_institucion=${this.admin.institucion.id_institucion}&id_modulo=${this.modulo.id_modulo}`,
          this.$getToken.token()
        )
        .then(async (res) => {
          this.carritos = res.data[0]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
}
</script>
