<template>
  <div>
    <b-table :data="data">
      <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
        <p>
          {{ props.row.institucionCarrera.carrera.carrera }}
        </p>
      </b-table-column>

      <b-table-column field="programa" label="Programa" v-slot="props" centered>
        <p>
          {{ props.row.programa.programa }}
        </p>
      </b-table-column>

      <b-table-column field="eliminar" label="Eliminar" v-slot="props" centered>
        <b-field>
          <b-button
            type="is-danger"
            @click="eliminarCarreraPrograma(props.row.id_carrera_programa)"
          >
            <b-icon icon="delete" size="is-small" />
          </b-button>
        </b-field>
      </b-table-column>
    </b-table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    admin: { type: Object, require: true },
    updateIsLoading: { type: Function, required: true },
    actualizarTabla: { type: Boolean, required: true },
    updateActualizarTabla: { type: Function, required: true },
  },
  data() {
    return {
      data: [],
    }
  },
  methods: {
    eliminarCarreraPrograma(id_carrera_programa) {
      const data = {
        id_carrera_programa: id_carrera_programa,
      }

      this.updateIsLoading(true)
      axios
        .delete(
          `${process.env.api}/carrera-programa`,
          this.$getToken.tokenDelete(data)
        )
        .then((res) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
          this.obtenerCarrerasProgramas()
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
          this.updateIsLoading(false)
        })
    },
    obtenerCarrerasProgramas() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/carrera-programa?id_institucion=${this.admin.institucion.id_institucion}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.data = res.data
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  watch: {
    actualizarTabla() {
      if (this.actualizarTabla) {
        this.obtenerCarrerasProgramas()
        this.updateActualizarTabla(false)
      }
    },
  },
  created() {
    this.obtenerCarrerasProgramas()
  },
}
</script>
