<template>
  <div>
    <h3 class="is-size-4 mb-3">Todos los administradores</h3>

    <div class="columns mb-5 is-align-items-flex-end">
      <SelectInstitucion
        columnSize="is-3"
        :deshabilitarOptVacia="false"
        :institucionPadre="institucion"
        @institucion-seleccionada="
          (nuevaInstitucion) => (institucion = nuevaInstitucion)
        "
      />

      <b-field class="column is-3 mb-0 pb-0" label="Usuario administrador">
        <b-input
          icon="account"
          placeholder="Usuario administrador"
          type="text"
          @keyup.enter.native="obtenerAdmins()"
          v-model="operador"
          rounded
        />
      </b-field>

      <BotonBuscar
        columnSize="is-3"
        :buscar="obtenerAdmins"
        :disabled="institucion.id_institucion || operador ? false : true"
      />
    </div>

    <TablaAdmins
      :admins="admins"
      :isLoadingTable="isLoadingTable"
      :obtenerAdmins="obtenerAdmins"
      :onPageChange="onPageChange"
      :total="total"
      :page="page"
      columnaActivo
      columnaInstitucion
    />
  </div>
</template>

<script>
import axios from 'axios'
import BotonBuscar from '@/components/botones/BotonBuscar'
import SelectInstitucion from '@/components/selects/SelectInstitucion'
import TablaAdmins from '@/components/tablas/TablaAdmins'

export default {
  components: { BotonBuscar, SelectInstitucion, TablaAdmins },
  props: {
    actualizarTabla: { type: Boolean, required: true },
    updateIsLoading: { type: Function, required: true },
    updateActualizarTabla: { type: Function, required: true },
  },
  data() {
    return {
      admins: [],
      isLoadingTable: false,
      page: 1,
      total: 0,
      institucion: {},
      lastSearch: {},
      operador: '',
    }
  },
  methods: {
    obtenerAdmins() {
      let data = ''

      this.isLoadingTable = true
      if (
        this.institucion.id_institucion != this.lastSearch.idInstitucion ||
        this.operador != this.lastSearch.operador
      ) {
        this.page = 1
        this.lastSearch.idInstitucion = this.institucion.id_institucion
        this.lastSearch.operador = this.operador
      }
      if (this.institucion.id_institucion)
        data += `&id_institucion=${this.institucion.id_institucion}`
      if (this.operador) data += `&operador=${this.operador}`
      axios
        .get(
          `${process.env.api}/operador/operadores?pagina=${this.page}&id_tipo_usuario=3${data}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.admins = res.data[0]
          this.total = res.data[1]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    onPageChange(page) {
      this.page = page
      this.obtenerAdmins()
    },
    updateInstitucion(institucion) {
      this.institucion = institucion
    },
  },
  watch: {
    actualizarTabla() {
      if (this.actualizarTabla) {
        this.obtenerAdmins()
        this.updateActualizarTabla(false)
      }
    },
  },
  created() {
    this.obtenerAdmins()
  },
}
</script>
