<template>
  <TablaEquipos
    :equipos="equipos"
    :isLoadingTable="isLoadingTable"
    :onPageChange="onPageChange"
    :page="page"
    :total="total"
  />
</template>

<script>
import axios from 'axios'
import TablaEquipos from '@/components/tablas/TablaEquipos'

export default {
  components: { TablaEquipos },
  props: {
    carrito: { type: Object, required: true, default: () => ({}) },
  },
  data() {
    return {
      equipos: [],
      page: 1,
      total: 0,
      isLoadingTable: false,
    }
  },
  methods: {
    obtenerEquipos(page) {
      this.isLoadingTable = true
      axios
        .get(
          `${process.env.api}/equipo/equipos?pagina=${this.page}&id_carrito=${this.carrito.id_carrito}`,
          this.$getToken.token()
        )
        .then(async (res) => {
          this.equipos = res.data[0]
          this.total = res.data[1]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    onPageChange(page) {
      this.page = page
      this.obtenerEquipos()
    },
  },
  created() {
    this.obtenerEquipos()
  },
}
</script>
