<template>
  <div class="box">
    <dir class="columns is-align-items-flex-end pl-0 pb-4">
      <b-field class="column mb-0 pb-0" label="Nombre del módulo">
        <b-input
          type="text"
          icon="storefront-outline"
          placeholder="Nombre del módulo"
          v-model="nombreModulo"
          rounded
          @keyup.enter.native="
            $alertsGenericos.imprimirWarning(
              $buefy,
              '¿Esta segur@ de querer crear este módulo?',
              crearModulo
            )
          "
        />
      </b-field>

      <b-button
        type="is-info"
        class="column"
        @click="
          $alertsGenericos.imprimirWarning(
            $buefy,
            '¿Esta segur@ de querer crear este módulo?',
            crearModulo
          )
        "
        :disabled="!nombreModulo"
        expanded
        rounded
      >
        Crear
      </b-button>
    </dir>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    institucion: { type: Object, required: true },
    updateActualizarTabla: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      nombreModulo: '',
    }
  },
  methods: {
    crearModulo() {
      if (this.nombreModulo) {
        let data = {
          id_institucion: this.institucion.id_institucion,
          modulo: this.nombreModulo,
        }

        this.updateIsLoading(true)
        axios
          .post(`${process.env.api}/modulo`, data, this.$getToken.token())
          .then((res) => {
            this.nombreModulo = ''
            this.updateIsLoading(false)
            this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
            this.updateActualizarTabla(true)
          })
          .catch((err) => {
            this.updateIsLoading(false)
            this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
          })
      }
    },
  },
}
</script>
