<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="Carreras">
        <b-select v-model="idInstitucionCarrera" expanded rounded>
          <option value="" disabled>Selecciona una opción</option>

          <option
            v-for="(c, index) in carreras"
            :key="index"
            :value="c.id_institucion_carrera"
          >
            {{ c.carrera.carrera }}
          </option>
        </b-select>
      </b-field>

      <b-field class="column mb-0 pb-0" label="Programas">
        <b-select v-model="idPrograma" expanded rounded>
          <option value="" disabled>Selecciona una opción</option>

          <option
            v-for="(p, index) in programas"
            :key="index"
            :value="p.id_programa"
          >
            {{ p.programa }}
          </option>
        </b-select>
      </b-field>

      <b-field class="column">
        <b-button
          type="is-info"
          @click="
            $alertsGenericos.imprimirWarning(
              $buefy,
              '¿Estas segur@ de querer asignar este programa a esa carrera?',
              asociarCarreraPrograma
            )
          "
          :disabled="!idInstitucionCarrera || !idPrograma"
          expanded
          rounded
        >
          Crear
        </b-button>
      </b-field>
    </dir>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    admin: { type: Object, require: true },

    updateIsLoading: { type: Function, required: true },
    updateActualizarTabla: { type: Function, required: true },
  },
  data() {
    return {
      carreras: [],
      programas: [],
      idInstitucionCarrera: '',
      idPrograma: '',
    }
  },
  methods: {
    asociarCarreraPrograma() {
      const data = {
        id_institucion_carrera: this.idInstitucionCarrera,
        id_programa: this.idPrograma,
      }

      this.updateIsLoading(true)
      axios
        .post(`${process.env.api}/carrera-programa`, data)
        .then((res) => {
          this.idInstitucionCarrera = ''
          this.idPrograma = ''
          this.updateActualizarTabla(true)
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCarreras() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/institucion-carrera?id_institucion=${this.admin.institucion.id_institucion}`
        )
        .then((res) => {
          this.carreras = res.data
          return this.obtenerProgramas()
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerProgramas() {
      return axios
        .get(`${process.env.api}/institucion-programa`)
        .then((res) => {
          this.programas = res.data
          this.updateIsLoading(false)
        })
    },
  },
  created() {
    this.obtenerCarreras()
  },
}
</script>
