<template>
  <b-table
    class="pb-6"
    :data="modulos"
    :loading="isLoadingTable"
    :row-class="
      (row, index) =>
        operador.tipoUsuario.id_tipo_usuario > 2 ? 'pointer' : ''
    "
    :selected.sync="moduloSeleccionado"
    detailed
    hoverable
    show-detail-icon
    striped
  >
    <b-table-column
      field="institucion"
      label="Institución"
      v-slot="props"
      centered
      v-if="operador.tipoUsuario.id_tipo_usuario === 2"
    >
      <p>{{ props.row.institucion.institucion }}</p>
    </b-table-column>

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

    <b-table-column field="activo" label="Status" v-slot="props" centered>
      <p
        class="is-size-6 tag"
        :class="props.row.activo ? 'is-success' : 'is-danger'"
      >
        {{ props.row.activo ? 'Activo' : 'Inactivo' }}
      </p>
    </b-table-column>

    <b-table-column
      field="reporte"
      label="Descargar reporte de desactivación"
      v-slot="props"
      centered
      v-if="operador.tipoUsuario.id_tipo_usuario === 2"
    >
      <BotonReporteMotivosModulo :modulo="props.row"/>
    </b-table-column>

    <template #detail="props">
      <CarritosModulo :modulo="props.row" :operador="operador" />
    </template>
  </b-table>
</template>

<script>
import CarritosModulo from '@/components/tablas/CarritosModulo'
import BotonReporteMotivosModulo from '@/components/botones/BotonReporteMotivosModulo'

export default {
  components: { BotonReporteMotivosModulo, CarritosModulo },
  props: {
    modulos: { type: Array, required: true, default: () => [] },
    isLoadingTable: { type: Boolean, required: true, default: false },
    operador: { type: Object, required: true, default: () => ({}) },
  },
  data() {
    return { moduloSeleccionado: {} }
  },
  watch: {
    moduloSeleccionado() {
      if (this.operador.tipoUsuario.id_tipo_usuario > 2)
        this.$router.push(
          `/admin/administrador/modulos/buscar_modulo/${this.moduloSeleccionado.id_modulo}`
        )
    },
  },
}
</script>

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