Vue.component('formulario-paso-1', {
    props: ['paises', 'distribuidor'],
    data: () => ({
        msgError: '',
        nombre: '',
        apellidos: '',
        correo: '',
        pais: 'MEX',
        telefono: '',
        completo: false
    }),
    methods: {
        validarFormulario() {
            var nombre = this.nombre;
            if ((nombre == '') || (nombre.length < 2)) {
                this.msgError = 'El campo "Nombre" debe de contener información válida.';
                this.limpiarMensaje();
                return false;
            }

            var apellidos = this.apellidos;
            if ((apellidos == '') || (apellidos.length < 2)) {
                this.msgError = 'El campo "Apellidos" debe de contener información válida.';
                this.limpiarMensaje();
                return false;
            }

            var correo = this.correo;
            if (correo == '') {
                this.msgError = 'El campo "Correo" no debe de estar vacío.';
                this.limpiarMensaje();
                return false;
            } else if (!this.validarCorreo(correo)) {
                this.msgError = 'El correo registrado debe de ser un correo electrónico válido.';
                this.limpiarMensaje();
                return false;
            }

            var pais = this.pais;
            if (pais == '') {
                this.msgError = 'El campo "País" no debe de estar vacío.';
                this.limpiarMensaje();
                return false;
            }

            var telefono = this.telefono;
            if (telefono == '') {
                this.msgError = 'El campo "Teléfono" no debe de estar vacío.';
                this.limpiarMensaje();
                return false;
            } else {
                if (pais == 'MEX') {
                    if (!this.validarTelefono(telefono)) {
                        this.msgError = 'El teléfono registrado debe de ser un número telefonico valido a 10 digitos.';
                        this.limpiarMensaje();
                        return false;
                    }
                }
            }

            this.enviarDatos();
        },
        limpiarMensaje() {
            var obj = this;
            setTimeout(function() { obj.msgError = ''; }, 4000);
        },
        validarCorreo(correo) {
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(correo);
        },
        validarTelefono: function(telefono) {
            var regla = /[0-9]{10}/;
            return regla.test(telefono);
        },
        enviarDatos() {
            var obj = this;
            this.completo = true;
            axios.post('php/mysql/registro-principal.php', {
                params: {
                    idDistribuidor: obj.distribuidor,
                    nombre: obj.nombre,
                    apellidos: obj.apellidos,
                    correo: obj.correo,
                    pais: obj.pais,
                    telefono: obj.telefono
                }
            }).then(response => {
                var objRespuesta = response.data;
                if (!objRespuesta['boolError']) {
                    window.location = 'registro-parte2.html?&' + obj.pais + '&' + objRespuesta['registro'] + '&' + obj.distribuidor;
                }
                obj.completo = false;
            }).catch(e => {
                console.log(e);
            });
        }
    },
    template: /* template */ `
    <div class="shadow bg-white position-relative">
        <div class="container">
            <form class="formulario-registro">
                <h1 class="titulo-formulario"> Regístrate Gratis </h1>
                <div class="form-row">
                    
                    <div class="form-group">
                        <input type="text" class="form-control" id="nombre" name="nombre" v-model="nombre" placeholder="Nombre (s)">
                    </div>

                    <div class="form-group">
                        <input type="text" class="form-control" id="apellidos" name="apellidos" v-model="apellidos" placeholder="Apellidos">
                    </div>

                    <div class="form-group">
                        <input type="text" class="form-control" id="correo" name="correo" v-model="correo" placeholder="Correo Electrónico">
                    </div>

                    <div class="form-group">
                        <select class="form-control" id="pais" name="pais" v-model="pais">
                            <option v-for="pais in paises" :value="pais.clave"> {{ pais.nombre }} </option>
                        </select>
                    </div>

                    <div class="form-group">
                        <input type="text" class="form-control inputs" id="telefono" name="telefono" v-model="telefono" placeholder="Teléfono">
                    </div>

                    <div class="form-group text-center text-danger bold">
                        <b> {{ msgError }} </b>
                    </div>

                    <div class="form-group col-md-12 text-center w-10" v-if="completo === true">
                        <div class="spinner-grow text-primary" role="status">
                            <span class="sr-only">Registrando...</span>
                        </div>
                        <div class="spinner-grow text-secondary" role="status">
                            <span class="sr-only">Registrando...</span>
                        </div>
                        <div class="spinner-grow text-success" role="status">
                            <span class="sr-only">Registrando...</span>
                        </div>
                        <div class="spinner-grow text-danger" role="status">
                            <span class="sr-only">Registrando...</span>
                        </div>
                        <div class="spinner-grow text-warning" role="status">
                            <span class="sr-only">Registrando...</span>
                        </div>
                        <div class="spinner-grow text-info" role="status">
                            <span class="sr-only">Registrando...</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <button type="button" class="btn btn-block btn-primary boton-formulario" @click="validarFormulario()"> Registrarse </button>
                    </div>

                </div>
            </form>

        </div>
    </div>
    `
});


var app = new Vue({
    el: '#app',
    data: {
        paises: [],
        idDistribuidor: ''
    },
    mounted: function() {

        var obj = this;

        axios.post('php/mysql/data.php', {
            params: {
                tipo: 'Paises'
            }
        }).then(response => {
            var objRespuesta = response.data;
            if (!objRespuesta['boolError']) {
                var strPaises = atob(objRespuesta['strPaises']);
                strPaises = decodeURIComponent(strPaises);
                var objPaises = JSON.parse(strPaises);
                obj.paises = objPaises;
            }
        }).catch(e => {
            console.log(e);
        });

        var URLactual = window.location.href;
        axios.post('php/mysql/valida-distribuidor.php', {
            params: {
                tipo: 'Distribuidor',
                URL: URLactual
            }
        }).then(response => {
            var Respuesta = response.data;
            if (!Respuesta['boolError']) {
                obj.idDistribuidor = Respuesta['idDistribuidor'];
            } else {
                window.location = 'apoyo-covid-19.html';
            }
        }).catch(e => {
            console.log(e);
        });

    }
});