<template>
  <section class="mb-5">
    <h3 class="is-size-4 mb-3">Previsualización de los datos</h3>

    <b-table :data="equipos" :per-page="30" paginated hoverable striped>
      <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="numeroSerie"
        label="Número de Serie"
        v-slot="props"
        centered
      >
        <span>{{ props.row.numero_serie }}</span>
      </b-table-column>

      <b-table-column field="equipo" label="Equipo" v-slot="props" centered>
        <span>{{ props.row.equipo }}</span>
      </b-table-column>

      <b-table-column field="tipo" label="Tipo" v-slot="props" centered>
        <span>{{ props.row.carrito.tipoCarrito.tipo_carrito }}</span>
      </b-table-column>

      <b-table-column field="carrito" label="Carrito" v-slot="props" centered>
        <span>{{ props.row.carrito.carrito }}</span>
      </b-table-column>

      <b-table-column field="modulo" label="Módulo" v-slot="props" centered>
        <span>{{ props.row.carrito.modulo.modulo }}</span>
      </b-table-column>
    </b-table>
  </section>
</template>

<script>
export default {
  props: { equipos: { type: Array, required: true } },
}
</script>

<style></style>
