<template>
  <section class="mb-6">
    <h3 class="is-size-4 mb-3">Crear Software</h3>

    <div class="box">
      <div class="columns is-align-items-flex-end pl-0 pb-4">
        <b-field class="column mb-0 pb-0" label="Software">
          <b-input
            placeholder="Nombre del software"
            type="text"
            @keyup.enter.native="warning()"
            v-model="programa"
            rounded
          />
        </b-field>

        <BotonCrear :disabled="!programa" :crear="warning" />
      </div>

      <b-collapse
        animation="slide"
        aria-id="contentIdForA11y3"
        class="card"
        v-model="activo"
      >
        <template #trigger>
          <div
            aria-controls="contentIdForA11y3"
            class="card-header"
            role="button"
            :aria-expanded="activo"
          >
            <p class="card-header-title">Tabla de software</p>

            <a class="card-header-icon">
              <b-icon :icon="activo ? 'menu-down' : 'menu-up'" />
            </a>
          </div>
        </template>

        <TablaOpcionesCreadas
          v-if="activo"
          :data="programas"
          :columnaPrograma="true"
        />
      </b-collapse>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
import BotonCrear from '@/components/botones/BotonCrear'
import TablaOpcionesCreadas from '@/components/admin/TablaOpcionesCreadas'

export default {
  components: { BotonCrear, TablaOpcionesCreadas },
  props: {
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      activo: false,
      programas: [],
      programa: '',
    }
  },
  methods: {
    obtenerCatalogoProgramas() {
      axios
        .get(`${process.env.api}/institucion-programa/`, this.$getToken.token())
        .then((res) => {
          this.programas = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    crearPrograma() {
      const data = {
        programa: this.programa,
      }

      this.updateIsLoading(true)
      axios
        .post(
          `${process.env.api}/institucion-programa/`,
          data,
          this.$getToken.token()
        )
        .then((res) => {
          this.programa = ''
          this.obtenerCatalogoProgramas()
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    warning() {
      if (this.programa)
        this.$alertsGenericos.imprimirWarning(
          this.$buefy,
          '¿Esta segur@ de querer crear este software?',
          this.crearPrograma
        )
    },
  },
  created() {
    this.obtenerCatalogoProgramas()
  },
}
</script>
