<template>
  <div>
    <b-table
      :data="equipos"
      :total="total"
      :loading="isLoadingTable"
      @page-change="onPageChange"
      :current-page="page"
      :per-page="15"
      :selected.sync="selectedEquipo"
      :row-class="(row, index) => 'pointer'"
      class="mb-6"
      hoverable
      striped
      backend-pagination
      paginated
    >
      <b-table-column field="equipo" label="Equipo" v-slot="props" centered>
        <span>
          {{ props.row.equipo }}
        </span>
      </b-table-column>

      <b-table-column
        field="numeroInventario"
        label="Número de inventario"
        v-slot="props"
        centered
      >
        <span>
          {{ props.row.numero_inventario }}
        </span>
      </b-table-column>

      <b-table-column field="status" label="Status" v-slot="props" centered>
        <span
          class="is-size-6 tag"
          :class="choooseTag(props.row.status.id_status)"
        >
          {{ props.row.status.status }}
        </span>
      </b-table-column>
    </b-table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: { equipo: { type: Object, require: true } },
  data() {
    return {
      isLoadingTable: false,
      equipos: [],
      selectedEquipo: {},
      total: 0,
      page: 1,
    }
  },
  methods: {
    onPageChange(page) {
      this.page = page
      this.obtenerEquipos(this.equipo.id_carrito)
    },
    choooseTag(idStatus) {
      const style = {
        1: 'is-info',
        2: 'is-link',
        3: 'is-primary',
        4: 'is-success',
        5: 'is-warning',
        6: 'is-danger',
        7: 'is-black',
      }
      return style[idStatus]
    },
    obtenerEquipos(idCarrito) {
      this.isLoadingTable = true
      axios
        .get(
          `${process.env.api}/equipo/equipos?pagina=${this.page}&id_carrito=${idCarrito}`
        )
        .then((res) => {
          this.total = res.data[1]
          this.equipos = res.data[0]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.imprimirError(err.response.data)
        })
    },
  },
  created() {
    this.obtenerEquipos(this.equipo.id_carrito)
  },
}
</script>
