<template>
  <div class="box">
    <div class="columns is-align-items-flex-end">
      <SelectInstitucion
        :idInstitucionPadre="idInstitucion"
        @institucion-seleccionada="
          (nuevaInstitucion) => (idInstitucion = nuevaInstitucion)
        "
        v-if="admin.tipoUsuario.id_tipo_usuario === 2"
      />

      <SelectModulo
        columnSize="is-4"
        :idInstitucion="
          admin.tipoUsuario.id_tipo_usuario === 3
            ? admin.institucion.id_institucion
            : idInstitucion
        "
        :idModuloPadre="idModulo"
        @modulo-seleccionado="(nuevoModulo) => (idModulo = nuevoModulo)"
      />

      <BotonBuscar
        columnSize="is-4"
        :buscar="buscar"
        :disabled="!idModulo || idModulo === modulo.id_modulo"
      />
    </div>

    <div class="columns">
      <InformacionModulo
        :admin="admin"
        :modulo="modulo"
        :updateIsLoading="updateIsLoading"
        :buscar="buscar"
      />

      <AdminModulo
        :admin="admin"
        :modulo="modulo"
        :updateIsLoading="updateIsLoading"
        :buscar="buscar"
      />
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import AdminModulo from '@/components/panel_admin/AdminModulo'
import BotonBuscar from '@/components/botones/BotonBuscar'
import InformacionModulo from '@/components/informacion/InformacionModulo'
import SelectInstitucion from '@/components/selects/SelectInstitucion'
import SelectModulo from '@/components/selects/SelectModulo'

export default {
  components: {
    AdminModulo,
    BotonBuscar,
    InformacionModulo,
    SelectInstitucion,
    SelectModulo,
  },
  props: {
    updateIsLoading: { type: Function, required: true, default: () => {} },
    updateModulo: { type: Function, required: true, default: () => {} },
    admin: { type: Object, required: true },
    modulo: { type: Object, required: true },
  },
  data() {
    return {
      moduloParam: null,
      idInstitucion: 0,
      idModulo: 0,
    }
  },
  methods: {
    buscar() {
      this.moduloParam = parseInt(this.$route.params.modulo)
      if (this.idModulo != this.moduloParam)
        this.$router.push(
          `/admin/administrador/modulos/buscar_modulo/${this.idModulo}`
        )
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/modulo/modulo?id_modulo=${this.idModulo}`,
          this.$getToken.token()
        )
        .then((res) => {
          const modulo = res.data

          if (!this.idInstitucion)
            this.idInstitucion = modulo.institucion.id_institucion
          this.updateModulo(modulo)
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  created() {
    this.moduloParam = parseInt(this.$route.params.modulo)
    if (this.moduloParam) {
      this.idModulo = this.moduloParam
      this.buscar()
    }
  },
}
</script>
