<template>
    <div class="application">
        <prime-message v-for="message of messages" :severity="message.severity" :key="message.content"
                       style="margin: 0">
            {{ message.content }}
        </prime-message>

        <prime-toast style="width: 95vw; margin: auto"/>

        <transition name="fade" mode="out-in">
            <jarch-template-main v-if="isUserLogged"
                                 :initialsSystem="$t('label.siglaSistema')"
                                 :descriptionSystem="$t('label.descricaoSistema')"
                                 login="wagneresa" nameUser="Wagner Araujo" :logoMenu="logoMenu" :menu="menu"
                                 effect="slide">
            </jarch-template-main>
            <jarch-login v-else initials-system="GCPR" description-system="Contas Pagar/Receber" initials-company="WESA"
                         name-company="WESA Informática LTDA" :background-url="backgroundUrl" :captcha="false"
                         @onClickSignin="botaoLogin" @onClickForgot="esqueciSenha">
                <img class="img-responsive-login" src="@/assets/images/logo-login.png"/>
            </jarch-login>
        </transition>
    </div>
</template>

<script>
import JarchTemplateMain from "./template";
// import '../assets/css/style.css'
import JarchLogin from "./login/Login";
import {mapState, mapActions} from 'vuex'
import backgroundUrl from '../assets/images/image-login.jpg'
import logoMenu from '../assets/images/logo-menu.png'
import PrimeMessage from 'primevue/message';
import PrimeToast from 'primevue/toast'

export default {
    name: 'Aplication',
    components: {
        PrimeMessage,
        PrimeToast,
        JarchLogin,
        JarchTemplateMain
    },
    props: {
        initialsSystem: {type: String, required: true},
        descriptionSystem: {type: String, required: true},
    },
    data() {
        return {
            user: {login: '', password: ''},
            backgroundUrl,
            logoMenu,
            menu: [
                {
                    id: 'cadastro', name: 'Cadastro', collapse: true,
                    menu: [
                        {id: 'banco', name: 'Banco', path: '/banco/list'},
                        {id: 'centroCusto', name: 'Centro Custo', path: "/centroCusto/list"},
                        {id: 'contaCaixa', name: 'Conta Caixa', path: "/contaCaixa/list"},
                        {id: 'pessoa', name: 'Pessoa', path: "/pessoa/list"},
                        {id: 'usuario', name: 'Usuário', path: "/usuario/list"},
                        {id: 'parametro', name: 'Parâmetro', path: "/parametro/dados"},
                    ]
                },
                {
                    id: 'lancamento', name: 'Lançamento', collapse: true,
                    menu: [
                        {id: 'contaPagar', name: 'Conta Pagar', path: "/lancamento/list/pagar"},
                        {id: 'contaReceber', name: 'Conta Receber', path: "/lancamento/list/receber"},
                    ]
                },
                {
                    id: 'relatorio', name: 'Relatório', collapse: true,
                    menu: [
                        {id: 'relatorioContaPagar', name: 'Conta Pagar'},
                        {id: 'relatorioContaReceber', name: 'Conta Receber'}
                    ]
                }
            ]
        }
    },
    computed: mapState(['isUserLogged', 'messages']),
    methods: {
        ...mapActions(['setToken', 'setLogin', 'setMessages']),
        botaoLogin(login, password) {
            this.user.login = login
            this.user.password = password
            this.$http.post('/login', this.user
            ).then(res => {
                const data = res.data
                this.setToken(data)
                this.$emit('onAuthenticationSucess', data)
                this.setLogin(true)
            }).catch(() => {
                this.$emit('onAuthenticationFailed', this.user)
                // this.setMessages({
                //         severity: 'error',
                //         content: 'Login ou senha inválido',
                // })

                this.$toast.add({
                    severity: 'error',
                    summary: this.$t('label.authentication'),
                    detail: this.$t('message.loginUserInvalid'),
                    life: 5000
                });
            })
        },
        esqueciSenha(login) {
            console.log(`Esqueci a senha do login ${login}`)
        }
    },
}
</script>

<style>

html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden !important;
}

body {
    width: 100%;
    height: 100%;

    display: flex;
    align-content: center;
    justify-content: center;

    background-color: #edf0f5;

    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 90%;
}

.application {
    background-size: 100% 100%;
    /*width: 420px;*/
    margin: auto;

    height: 100vh;
    width: 100vw;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .2s ease;
}

</style>
