<template>
  <b-field
    class="mb-0 pb-0"
    label="Módulo"
    :class="column ? `column ${columnSize}` : ''"
  >
    <b-select
      icon="store"
      :loading="isLoadingSelect"
      v-model="idModulo"
      expanded
      rounded
    >
      <option v-if="!idInstitucion" disabled>Selecciona una institución</option>

      <option :disabled="deshabilitarOptVacia" :value="0" v-else>
        Selecciona una opción
      </option>

      <option v-for="(m, index) in modulos" :key="index" :value="m.id_modulo">
        {{ m.modulo }}
      </option>
    </b-select>
  </b-field>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    activos: { typeof: Boolean, required: false, default: false },
    column: { type: Boolean, required: false, default: true },
    deshabilitarOptVacia: { typeof: Boolean, required: false, default: true },
    idInstitucion: { type: Number, required: true, default: 0 },
    idModuloPadre: { type: Number, required: true, default: 0 },
    columnSize: { typeof: String, required: false, default: '' },
  },
  data: () => {
    return {
      modulos: [],
      isLoadingSelect: false,
      idModulo: 0,
    }
  },
  methods: {
    obtenerModulos() {
      this.isLoadingSelect = true
      this.modulos = []
      axios
        .get(
          `${process.env.api}/modulo/modulos?id_institucion=${this.idInstitucion}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.modulos = res.data
          this.$emit('catalogo-modulos', this.modulos)
          this.isLoadingSelect = false
        })
        .catch((err) => {
          this.isLoadingSelect = false
        })
    },
    obtenerModulosActivos() {
      axios
        .get(
          `${process.env.api}/modulo/modulos-activos?id_institucion=${this.idInstitucion}`
        )
        .then((res) => {
          this.modulos = res.data
          this.$emit('catalogo-modulos', this.modulos)
          this.isLoadingSelect = false
        })
        .catch((err) => {
          this.isLoadingSelect = false
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
  },
  watch: {
    idInstitucion(nuevoIdInstitucion) {
      if (nuevoIdInstitucion) {
        if (this.activos) this.obtenerModulosActivos()
        else this.obtenerModulos()
      }
    },
    idModulo(moduloSeleccionado) {
      this.$emit('modulo-seleccionado', moduloSeleccionado)
    },
    idModuloPadre(nuevoModulo) {
      this.idModulo = nuevoModulo
    },
  },
  created() {
    if (this.idModuloPadre) this.idModulo = this.idModuloPadre
    if (this.idInstitucion) {
      if (this.activos) this.obtenerModulosActivos()
      else this.obtenerModulos()
    }
  },
}
</script>

<style scoped></style>
