<template>
  <b-field class="column" :class="columnSize" label="Módulo">
    <b-select :loading="isLoading" v-model="modulo" expanded rounded>
      <option :value="null" :disabled="disableDefOption">
        -Selecciona una opción-
      </option>

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

<script>
import axios from 'axios'

export default {
  props: {
    disableDefOption: { typeof: Boolean, required: false, default: true },
    imprimirError: { type: Function, required: true },
    idInstitucion: { typeof: Number, required: true },
    modulo: { typeof: Object, required: true },
    // token: { typeof: Object, required: true },
    columnSize: { typeof: String, required: false, default: '' },
  },
  data() {
    return {
      modulos: [],
      isLoading: false,
    }
  },
  methods: {
    obtenerCatalogoModulo() {
      this.isLoading = true
      axios
        .get(
          `${process.env.api}/modulo/modulos?id_institucion=${idInstitucion}`
          // this.token
        )
        .then((res) => {
          this.modulos = res.data
          this.isLoading = false
        })
        .catch((err) => {
          this.isLoading = false
          this.imprimirError(err)
        })
    },
  },
  watch: {
    idInstitucion() {
      this.obtenerCatalogoModulo()
    },
  },
}
</script>
