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

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

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

    <b-field label="Clave de programa:">
      <b-select v-model="programaSeleccionado" 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>

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

<script>
import axios from 'axios'

export default {
  data() {
    return {
      admin: {},
      idResponsable: null,
      correo: '',
      nombre: '',
      programas: [],
      programa: {},
      programaSeleccionado: '',
      token: {},
    }
  },
  methods: {
    getLocalhostInfo() {
      this.admin.idUsuario = localStorage.getItem('idUsuario')
      this.admin.idTipoUsuario = Number(localStorage.getItem('idTipoUsuario'))
      this.admin.tipoUsuario = localStorage.getItem('tipoUsuario')
      this.token = {
        headers: {
          token: localStorage.getItem('token'),
        },
      }
      this.idResponsable = localStorage.getItem('idResponsable')
      this.correo = localStorage.getItem('correo')
      this.nombre = localStorage.getItem('nombreResponsable')
    },
    obtenerProgramas() {
      axios
        .get(
          `${process.env.api}/programa/programas_admin?idUsuario=${this.idResponsable}`,
          this.token
        )
        .then((res) => {
          this.programas = res.data
        })
        .catch((err) => {
          this.error(err.response.data.message)
        })
    },
    imprimirError(err) {
      this.$buefy.dialog.alert({
        title: 'Error',
        message: err.message,
        type: 'is-danger',
        hasIcon: true,
        icon: 'alert-circle',
        ariaRole: 'alertdialog',
        ariaModal: true,
      })
      if (err.err === 'token error') {
        localStorage.clear()
        this.$router.push('/')
      }
    },
  },
  watch: {
    programaSeleccionado() {
      this.programa = this.programas[this.programaSeleccionado]
    },
  },
  created() {
    this.getLocalhostInfo()
    if (this.admin.idTipoUsuario === 1) {
      this.obtenerProgramas()
    }
  },
}
</script>

<style scoped></style>
