<template lang="pug">
  div
    app-menu
    .row
      .col-8.offset-2.left
        br
        br
        .row
          .col-6
            h5 Usuario : {{`${data.persona[0].nombre}  ${data.persona[0].apellido_p}  ${data.persona[0].apellido_m} `}}
            p Correo : {{data.persona[0].correo_electronico}}
            p Comunidad : {{data.persona[0].comunidad}}
            p Situacion Academica : {{data.persona[0].situacion_academica}}
          .col-6.right
            button.btn.btn-danger(v-on:click="$router.push('/')") Salir
        br
        br
        table.table
          thead
            tr
              td Tipo
              td Nombre del Trabajo
              td Nombre Autor
              td Nombre Segundo Autor
          tbody
            tr(v-for="i in data.trabajo")
              td {{i.tipo_trabajo}}
              td {{i.nombre_trabajo}}
              td {{i.autor_principal}}
              td {{i.segundo_autor}}
        br
        br
</template>

<script>
import webMenu from '../estetica/menu.vue'
import axios from 'axios'
import config from '../config/config.js'
export default {
    data() {
        return {
            data: '',
        }
    },
    methods: {
        info: function() {
            axios
                .get(
                    `${config.api}/traer_persona?id_persona=${this.$route.params.id}`
                )
                .then(res => {
                    // eslint-disable-next-line
                    console.log(res.data.data)
                    this.data = res.data.data
                })
                .catch(error => {
                    // eslint-disable-next-line
                    console.log(error)
                })
        },
    },
    created: function() {
        this.info()
    },
    components: {
        appMenu: webMenu,
    },
}
</script>

<style>
.left {
    text-align: left;
}
.right {
    text-align: right;
}
</style>