<template>
  <div>
    <h3 class="title">Información del responsable</h3>

    <b-field label="Nombre:">
      <p class="input">{{ responsable.nombre }}</p>
    </b-field>

    <b-field label="Correo:">
      <p class="input">{{ responsable.usuario }}</p>
    </b-field>

    <b-field label="Clave de programa:">
      <b-select v-model="programaSelected" expanded>
        <option value="" disabled>Elija una clave de programa:</option>
        <option v-for="(p, i) in programas" :key="i" :value="i">
          {{ p.clavePrograma }}
        </option>
      </b-select>
    </b-field>

    <b-field label="Institucion:">
      <p class="input">{{ programa.institucion }}</p>
    </b-field>

    <b-field label="Dependencia:">
      <p class="input">{{ programa.dependencia }}</p>
    </b-field>

    <b-field label="Programa:">
      <p class="input">{{ programa.programa }}</p>
    </b-field>

    <b-button
      type="is-link"
      class="my-5"
      tag="router-link"
      to="/admin/responsables/infoResponsable/modificar"
    >
      Editar información
    </b-button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      idResponsable: null,
      responsable: {},
      programas: [],
      programa: {},
      programaSelected: '',
    }
  },
  props: {
    admin: { type: Object, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  methods: {
    obtenerResponsable() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/usuario/responsable?idUsuario=${this.idResponsable}`,
          this.admin.token
        )
        .then((res) => {
          this.responsable = res.data
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.error(err.response.data.message)
        })
    },
    obtenerProgramas() {
      axios
        .get(
          `${process.env.api}/programa/programas_admin?idUsuario=${this.idResponsable}`,
          this.admin.token
        )
        .then((res) => {
          this.programas = res.data
        })
        .catch((err) => {
          this.error(err.response.data.message)
        })
    },
  },
  watch: {
    programaSelected() {
      this.programa = this.programas[this.programaSelected]
    },
  },
  created() {
    this.idResponsable = localStorage.getItem('idResponsable')
    if (this.admin.idTipoUsuario === 1 && this.idResponsable) {
      this.obtenerResponsable()
      this.obtenerProgramas()
    }
  },
}
</script>

<style scoped></style>
