<template>
  <b-table
    class="pb-6"
    :data="instituciones"
    :loading="isLoadingTable"
    :per-page="25"
    :row-class="(row, index) => 'pointer'"
    :selected.sync="institucionSeleccionada"
    :total="total"
    backend-pagination
    hoverable
    paginated
    striped
  >
    <b-table-column
      field="institucion"
      label="Institución"
      v-slot="props"
      centered
    >
      <p>{{ props.row.institucion }}</p>
    </b-table-column>

    <b-table-column field="status" 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="responsable"
      label="Responsable"
      v-slot="props"
      centered
    >
      <p>{{ props.row.responsable }}</p>
    </b-table-column>

    <b-table-column field="correo" label="Correo" v-slot="props" centered>
      <p>{{ props.row.correo }}</p>
    </b-table-column>

    <b-table-column field="dominio" label="Dominio" v-slot="props" centered>
      <p>{{ props.row.dominio }}</p>
    </b-table-column>
  </b-table>
</template>

<script>
export default {
  props: {
    instituciones: { type: Array, required: true, default: () => [] },
    isLoadingTable: { type: Boolean, required: true, default: false },
    total: { type: Number, required: true, default: 0 },
  },
  data() {
    return { institucionSeleccionada: {} }
  },
  watch: {
    institucionSeleccionada() {
      this.$router.push(
        `/admin/configuracion/instituciones/buscar_institucion/${this.institucionSeleccionada.id_institucion}`
      )
    },
  },
}
</script>

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