<template>
  <div class="container">
    <b-button class="boton is-info my-5" @click="$router.push('./')">
      Regresar
    </b-button>
    <p class="is-size-2 mb-4">Información del responsable</p>
    <p class="is-size-4 mb-4">Nombre: {{responsable.nombre}}</p>
    <p class="is-size-4 mb-4">Correo: {{responsable.correo}}</p>
    <p class="is-size-4">Programa: </p>
    <b-select
      v-model="selected"
      placeholder="Elija un programa">
        <option
          v-for="programa in programas"
          v-bind:key="programa.id"
          :value="programa">
          {{ programa.programa }}
        </option>
    </b-select>
    <p class="is-size-4 mb-4">Institución: {{selected.institucion}}</p>
    <p class="is-size-4 mb-4">Dependencia:  {{selected.dependencia}}</p>
    <p class="is-size-4 mb-4">Clave:  {{selected.clave}}</p>
    <b-button class="boton is-info my-5" @click="$router.push('./')">
      Regresar
    </b-button>
    <b-button class="boton is-info my-5" @click="$router.push('./infoResponsable/editar')">
      Editar información
    </b-button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      idResponsable: localStorage.getItem('idResponsable'),
      responsable: {
        nombre: 'Marco',
        correo: 'marco@gmail.com'
      },
      programas: [
        { id: 1, programa: 'programa 1', institucion: 'institucion falsa 1', dependencia: 'dependencia falsa 1', clave: 101 },
        { id: 2, programa: 'programa 2', institucion: 'institucion falsa 2', dependencia: 'dependencia falsa 2', clave: 102 },
        { id: 3, programa: 'programa 3', institucion: 'institucion falsa 3', dependencia: 'dependencia falsa 3', clave: 103 }
      ],
      selected: {}
    }
  },
  methods: {
    obtenerDatos () {
      return axios
        .get(
          // aun no hay back
          `${process.env.api}/servicio/admin?idResponsable=${this.idResponsable}`//,
          // this.token
        )
        .then(res => {
          this.responsable = res.data
          this.programas = res.data.programas
        })
        .catch(err => {
          this.error()
          console.log(err.response)
        })
    },
    error () {
      this.$buefy.dialog.alert({
        title: 'Error',
        message: 'Ha ocurrido un <b>error</b>, inténtalo de nuevo más tarde',
        type: 'is-danger',
        hasIcon: true,
        icon: 'times-circle',
        iconPack: 'fa',
        ariaRole: 'alertdialog',
        ariaModal: true
      })
    }
  }
}
</script>
