<template>
    <div>
        <header-mini />
        <login-bar v-if="usuarioNoLogeado" />
        <nav-bar />

        <div class="container fondoBlanco pedidos">
            <h2 class="pedidos__titulo">Mis pedidos</h2>
            <br>
            <br>
            <div v-if="usuarioNoLogeado" class="pedidos__usuario-no-logeado">
                ¡Ups! Parece que no iniciaste sesión.<br>
                Inicia sesión y controla fácilmente tus pedidos y entregas a domicilio. <br>
                <br>
                <div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
                    <router-link to="/iniciar-sesion/" id="botonRegistro" class="boton">
                        Registrarse
                    </router-link>
                    <router-link to="/iniciar-sesion/" id="botonInicioSesion" class="boton">
                        Iniciar Sesion
                    </router-link>
                    <br/>
                    <br/>
                    <br/>
                </div>
            </div>
            <div v-else>
                <pedido v-for="pedido in pedidos"/>
            </div>
        </div>

        <mi-footer />
    </div>
</template>

<script>
    import HeaderMini from '../components/headerMini'
    import NavBar from '../components/navBar'
    import LoginBar from '../components/navBarInicioSesion'
    import MiFooter from '../components/mi-footer'
    import Pedido from '../components/pedido'
    import conexion from '../variables';

    export default {
        name: "MiPedido",
        data: function () {
            return {
                usuario: window.usuarioActual[0],
                pedidos: []
            }
        },
        components: {
            'header-mini': HeaderMini,
            'nav-bar': NavBar,
            'login-bar': LoginBar,
            'mi-footer': MiFooter,
            'pedido': Pedido
        },
        computed: {
            usuarioNoLogeado: function () {
                return !this.usuario.logged;
            }
        },
        methods: {
            obtenerPedidos: function () {
                let vm = this;
                const usuarioLogueado = !this.usuario.logged;
                return new Promise((resolve, reject) => {
                    if ( usuarioLogueado ) {
                        reject("Usuario no logeado.");
                        return;
                    }

                    const xhr = new XMLHttpRequest();
                    xhr.open("POST",`${conexion}/pedidos/actual`);
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    xhr.onload = () => {
                        console.log(`Esta es mi respuesta we :3\n${xhr.responseText}`);
                        resolve(xhr.responseText);
                    };

                    xhr.send(`USER_ID=${vm.usuario["USER_ID"]}`);
                });
            }
        },
        created: function () {
            let vm = this;
            this.obtenerPedidos()
                .then(response => {
                    while (vm.pedidos.pop() !== 0);

                    const data = JSON.parse(response);
                    for (item of data) {
                        vm.pedidos.push(item);
                    }
                })
                .catch(reason => console.log(`Obtener pedidos desde el servidor rechazado. Razón: ${reason}`));
        }
    }
</script>

<style scoped lang="sass">
.pedidos__titulo
    text-align: center
    font:
        size: xx-large
        weight: bold
        family: Muli, "Open Sans", sans-serif
    margin: 10px 0

.pedidos__usuario-no-logeado
    font-size: x-large
    text-align: center

.pedidos
</style>