<template>
  <div>
    <BuscarInstitucion
      :admin="admin"
      :updateIsLoading="updateIsLoading"
      :updateInstitucion="updateInstitucion"
      :institucion="institucion"
    />

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

<script>
import axios from 'axios'
import BuscarInstitucion from '@/components/buscar/BuscarInstitucion'
import TablaAdmins from '@/components/tablas/TablaAdmins'

export default {
  components: { BuscarInstitucion, TablaAdmins },
  props: {
    admin: { type: Object, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      admins: [],
      isLoadingTable: false,
      page: 1,
      total: 0,
      institucion: {},
      lastSearch: {},
    }
  },
  methods: {
    updateInstitucion(institucion) {
      this.institucion = institucion
    },
    onPageChange(page) {
      this.page = page
      this.obtenerAdmins()
    },
    obtenerAdmins() {
      this.isLoadingTable = true
      if (this.institucion.id_institucion != this.lastSearch.idInstitucion) {
        this.page = 1
        this.lastSearch.idInstitucion = this.institucion.id_institucion
      }
      axios
        .get(
          `${process.env.api}/operador/operadores?pagina=${this.page}&id_tipo_usuario=3&id_institucion=${this.institucion.id_institucion}`,
          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)
        })
    },
  },
  watch: {
    institucion() {
      if (this.institucion.id_institucion) this.obtenerAdmins()
    },
  },
  created() {},
}
</script>
