<template lang="pug">
  div
    app-menu
    
    
   
        br
        br
        
    .row.my-4
        .col-10.col-xl-9.offset-1.right
            button.btn.btn-danger(v-on:click="$router.push('/')") Salir

        
        .row.my-4
          .col-10.col-xl-11.col-lg-11.col-md-11.offset-2.left
            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}}
          
    
        
    .row
    .col-10.offset-1.left.table-responsive-sm

        table.table.mt-2.table-hover
          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}}
       
      
      
</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>