<template lang="pug">
  div
    app-menu
    br
    h1 Registro Ponencia
    .row
      .col-6.offset-2
        br
        .form-group
          input#exampleInputEmail1.form-control(type='text' aria-describedby='emailHelp' v-model="autor" placeholder='Nombre del Autor principal')
        .form-group
          input#exampleInputPassword1.form-control(type='text' v-model="autorsegundo" placeholder='Nombre del segundo autor')
    .row
      .col-8.offset-2.left
        .form-check
          input#exampleRadios1.form-check-input(type='checkbox' name='exampleRadios' v-model="ponencia" checked='')
          label.form-check-label(for='exampleRadios1')
            | Ponencia
        .row(v-if="ponencia")
          .col-8.offset-2
            .form-group
              input#exampleInputEmail1.form-control(type='text' aria-describedby='emailHelp' placeholder='Nombre de la Ponencia' v-model="nombrepon")
            .form-group
              select.custom-select(v-model="mesapon")
                option(value="0" disabled selected) Seleccione la mesa
                option(v-for="mesa in mesas" :value="mesa") {{mesa}}
            .custom-file
              input.custom-file-input(type='file' required=''  @change="previewPonencia"  accept=".doc,.docx")
              label.custom-file-label( ref="ponenciafile" for='validatedCustomFile') Seleccionar Archivo
              small#emailHelp.form-text.text-muted
                | Instrucciones: Subir el archivo resumen de 250 palabras en word de acuerdo a
                | la convocatoria
              .invalid-feedback Example invalid custom file feedback
    .row
      .col-8.offset-2.left
        .form-check
          input#exampleRadios1.form-check-input(type='checkbox' v-model="cartel" name='exampleRadios' value='option1' checked='')
          label.form-check-label(for='exampleRadios1')
            | Cartel
        .row(v-if="cartel")
          .col-8.offset-2
            .form-group
              input#exampleInputEmail1.form-control(type='text' aria-describedby='emailHelp' placeholder='Nombre del Cartel' v-model="nombrecartel")
            .form-group
              select.custom-select(v-model="mesacartel")
                option(value="0" disabled selected) Seleccione la mesa
                option(v-for="mesa in mesas" :value="mesa") {{mesa}}
            .custom-file
              input.custom-file-input(type='file' required='' @change="previewCarta"  accept=".doc,.docx")
              label.custom-file-label( ref="cartelfile" for='validatedCustomFile') Seleccionar Archivo
              small#emailHelp.form-text.text-muted
                | Instrucciones: Subir el archivo resumen de 250 palabras en word de acuerdo a
                | la convocatoria
              .invalid-feedback Example invalid custom file feedback
    .row
      .col-8.offset-2
        br
        button.btn.btn-primary(type='submit' v-on:click="registrar()") Enviar
        br
        br

</template>

<script>
import axios from 'axios'
import Swal from 'sweetalert2'
import webMenu from '../estetica/menu.vue'
import config from '../config/config.js'


export default {
    data() {
        return {
            ponencia: false,
            cartel: false,
            autor: '',
            autorsegundo: '',
            nombrepon: '',
            nombrecartel: '',
            mesacartel: '0',
            mesapon: '0',
            cartelfile: '',
            ponenciafile: '',
            data: {},
            mesas: [
                'Educación inclusiva',
                'Educación y género',
                'Ética, valores y formación socioemocial',
                'Experiencias de innovación e intervención en la educación',
                'Las TIC y las TAC en la educación',
                'Lectura y escritura en la formación académica',
                'Propuestas de transformación curricular',
                'Políticas públicas para la innovación y transformación educativa',
                'Educación ambiental y bioética',
            ],
        }
    },
    methods: {
        previewCarta(event) {
            this.cartelfile = event.target.files[0]
            // eslint-disable-next-line
            console.log(this.cartelfile.name)
            this.$refs.cartelfile.innerText = this.cartelfile.name
        },
        previewPonencia(event) {
            this.ponenciafile = event.target.files[0]
            this.$refs.ponenciafile.innerText = this.ponenciafile.name
        },
        registrar: function() {
            if (this.autor == '' || this.autorsegundo == '') {
                Swal.fire(
                    'Faltan campos por llenar',
                    'Faltan nombres de los autores',
                    'warning'
                )
                return
            }
            if (this.ponencia) {
                if (
                    this.nombrepon == '' ||
                    this.mesapon == '0' ||
                    this.ponenciafile == ''
                ) {
                    Swal.fire({
                        title: 'Faltan campos por llenar de ponencia',
                        icon: 'warning',
                    })
                    return
                }
            }
            if (this.cartel) {
                if (
                    this.nombrecartel == '' ||
                    this.mesacartel == '0' ||
                    this.cartelfile == ''
                ) {
                    Swal.fire({
                        title: 'Faltan campos por llenar de cartel',
                        icon: 'warning',
                    })
                    return
                }
            }
            var formData = new FormData()
            this.data.id_persona = this.$route.params.id
            if (this.ponencia) {
                this.data.ponencia = {}
                this.data.ponencia.autor_principal = this.autor
                this.data.ponencia.segundo_autor = this.autorsegundo
                this.data.ponencia.nombre_trabajo = this.nombrepon
                this.data.ponencia.mesa = this.mesapon

                formData.append('ponencia', JSON.stringify(this.data.ponencia))
                formData.append('ponencia', this.ponenciafile)
            }
            if (this.cartel) {
                this.data.cartel = {}
                this.data.cartel.autor_principal = this.autor
                this.data.cartel.segundo_autor = this.autorsegundo
                this.data.cartel.nombre_trabajo = this.nombrecartel
                this.data.cartel.mesa = this.mesacartel

                formData.append('cartel', JSON.stringify(this.data.cartel))
                formData.append('cartel', this.cartelfile)
            }
            // eslint-disable-next-line
            console.log(this.data)

            formData.append('id_persona', this.$route.params.id)

            // eslint-disable-next-line
            console.log(formData)
            axios
                .post(
                    `${config.api}/registro_ponencia`,
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data',
                        },
                    }
                )
                .then(response => {
                    // eslint-disable-next-line
                    console.log(response)
                    Swal.fire({
                        title: 'Éxito',
                        icon: 'success',
                        text:
                            'Tu registro ha sido exitoso, recuerda consultar las fechas para continuar con el proceso de dictamen y/o asistencia.',
                        confirmButtonText: 'Aceptar',
                        onClose: () => {
                            this.$router.push({
                                path: `/`,
                            })
                        },
                    })
                })
                .catch(function(error) {
                    // eslint-disable-next-line
                    let mensaje;
                    if(error.response.data.msj==undefined)
                      mensaje="Archivo muy extenso";
                    else  
                      mensaje=error.response.data.msj

                    
                    Swal.fire({
                        title: 'Error',
                        text: mensaje,
                        icon: 'error',
                        confirmButtonText: 'Aceptar',
                    })
                })
        },
    },
    components: {
        appMenu: webMenu,
    },
}
</script>

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