<template>
  <section>
    <h3 class="is-size-4 mb-3">Buscar Admin</h3>

    <div class="columns mb-5 is-align-items-flex-end">
      <InstitucionSelect
        :disableDefOption="false"
        :imprimirError="imprimirError"
        :updateIdInstitucion="updateIdInstitucion"
        :idInstitucion="search.idInstitucion"
        :columnSize="'is-3'"
      />

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

      <b-field class="column is-3">
        <b-button type="is-success" @click="obtenerAdmins()" expanded rounded>
          Buscar
        </b-button>
      </b-field>
    </div>

    <b-table
      :data="data"
      :total="total"
      :current-page="page"
      :per-page="25"
      :loading="isLoadingTable"
      @page-change="onPageChange"
      class="mb-6"
      backend-pagination
      hoverable
      paginated
      striped
    >
      <b-table-column field="operador" label="Operador" v-slot="props" centered>
        <span>{{ props.row.institucion.institucion }}</span>
      </b-table-column>

      <b-table-column field="operador" label="Operador" v-slot="props" centered>
        <span>{{ props.row.operador }}</span>
      </b-table-column>

      <b-table-column field="activo" label="Status" v-slot="props" centered>
        <ActivarDesactivar
          :admin="admin"
          :imprimirMensaje="imprimirMensaje"
          :imprimirWarning="imprimirWarning"
          :imprimirError="imprimirError"
          :operador="props.row"
          :updateActualizarTabla="updateActualizarTabla"
          :updateIsLoading="updateIsLoading"
        />
      </b-table-column>

      <b-table-column
        field="password"
        label="Cambiar Contraseña"
        v-slot="props"
        centered
      >
        <UpdatePassword
          :admin="admin"
          :imprimirMensaje="imprimirMensaje"
          :imprimirWarning="imprimirWarning"
          :imprimirError="imprimirError"
          :operador="props.row"
          :updateIsLoading="updateIsLoading"
          v-if="props.row.activo"
        />
      </b-table-column>
    </b-table>
  </section>
</template>

<script>
import axios from 'axios'
import ActivarDesactivar from '@/components/admin/ActivarDesactivar'
import InstitucionSelect from '@/components/admin/InstitucionSelect'
import UpdatePassword from '@/components/admin/UpdatePassword'

export default {
  components: { ActivarDesactivar, InstitucionSelect, UpdatePassword },
  props: {
    actualizarTabla: { type: Boolean, required: true },
    imprimirError: { type: Function, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    updateActualizarTabla: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
    admin: { type: Object, required: true },
  },
  data() {
    return {
      data: [],
      isLoadingTable: false,
      page: 1,
      total: 0,
      lastSearch: {},
      search: { idInstitucion: 0 },
    }
  },
  methods: {
    updateIdInstitucion(idInstitucion) {
      this.search.idInstitucion = idInstitucion
    },
    onPageChange(page) {
      this.page = page
      this.obtenerAdmins()
    },
    obtenerAdmins() {
      let data = ''

      console.log(this.lastSearch)
      console.log('hola')
      this.isLoadingTable = true
      if (
        this.search.operador != this.lastSearch.operador ||
        this.search.idInstitucion != this.lastSearch.idInstitucion
      ) {
        this.page = 1
        this.lastSearch.operador = this.search.operador
        this.lastSearch.idInstitucion = this.search.idInstitucion
      }
      if (this.search.operador) data = `&operador=${this.search.operador}`
      if (this.search.idInstitucion)
        data = `&id_institucion=${this.search.idInstitucion}`
      axios
        .get(
          `${process.env.api}/operador/operadores?pagina=${this.page}&id_tipo_usuario=3${data}`
        )
        .then((res) => {
          this.data = res.data[0]
          this.total = res.data[1]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.imprimirError(err.response.data)
        })
    },
  },
  watch: {
    actualizarTabla() {
      if (this.actualizarTabla) {
        this.obtenerAdmins()
        this.updateActualizarTabla(false)
      }
    },
  },
  created() {
    if (this.admin.tipoUsuario.id_tipo_usuario === 2) this.obtenerAdmins()
  },
}
</script>

<style></style>
