<template>
  <div>
    <CrearCarrerasProgramas
      :obtenerCarrerasProgramas="obtenerCarrerasProgramas"
      :updateIsLoading="updateIsLoading"
      :idInstitucion="idInstitucion"
    />

    <TablaCarrerasProgramas
      :carrerasProgramas="carrerasProgramas"
      :isLoadingTable="isLoadingTable"
      :obtenerCarrerasProgramas="obtenerCarrerasProgramas"
      :updateIsLoading="updateIsLoading"
      :total="carrerasProgramas.length"
    />
  </div>
</template>

<script>
import axios from 'axios'
import CrearCarrerasProgramas from '@/components/crear/CrearCarreraPrograma'
import TablaCarrerasProgramas from '@/components/tablas/TablaCarrerasProgramas'

export default {
  components: { CrearCarrerasProgramas, TablaCarrerasProgramas },
  props: {
    updateIsLoading: { type: Function, required: true },
    idInstitucion: { type: Number, required: true, default: false },
  },
  data() {
    return {
      carrerasProgramas: [],
      isLoadingTable: false,
    }
  },
  methods: {
    obtenerCarrerasProgramas() {
      this.isLoadingTable = true
      return axios
        .get(
          `${process.env.api}/carrera-programa?id_institucion=${this.idInstitucion}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.carrerasProgramas = res.data
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
  },
  created() {
    this.obtenerCarrerasProgramas()
  },
}
</script>
