<template>
  <b-table
    :data="carritos"
    :loading="isLoadingTable"
    :selected.sync="selectedCarrito"
    :row-class="(row, index) => 'pointer'"
    class="mb-6"
    show-detail-icon
    paginated
    detailed
  >
    <b-table-column field="carrito" label="Carrito" v-slot="props" centered>
      <span>{{ props.row.carrito }}</span>
    </b-table-column>

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

    <b-table-column field="tipo" label="Tipo" v-slot="props" centered>
      <span>{{ props.row.tipoCarrito.tipo_carrito }}</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.activo)">{{
        props.row.activo ? 'Activo' : 'Inactivo'
      }}</span>
    </b-table-column>

    <template #detail="props">
      <TablaEquiCarritos :equipo="props.row" />
    </template>
  </b-table>
</template>

<script>
import TablaEquiCarritos from '@/components/operador/TablaEquiCarritos'

export default {
  components: { TablaEquiCarritos },
  props: {
    operador: { type: Object, required: true },
    carritos: { type: Array, required: true },
    isLoadingTable: { type: Boolean, required: true },
  },
  data() {
    return {
      selectedCarrito: {},
    }
  },
  methods: {
    choooseTag(activo) {
      const style = {
        false: 'is-danger',
        true: 'is-success',
      }
      return style[activo]
    },
  },
  watch: {
    selectedCarrito() {
      this.$router.push({
        path:
          '/operador/carritos/buscar_carrito/' +
          this.selectedCarrito.id_carrito,
      })
    },
  },
}
</script>

<style>
.pointer {
  cursor: pointer;
}
</style>
