<template>
    <span>
        <v-dialog v-model="mensajeLoading.mostrar" hide-overlay persistent width="600">
            <v-card  color="#449f2a" dark>
                <v-card-text>
                    <p style="color: white; font-size: 18px; ">{{mensajeLoading.dato}}</p>
                    
                    <v-progress-linear indeterminate color="white" class="mb-0"></v-progress-linear>
                </v-card-text>
            </v-card>
        </v-dialog>


        <v-snackbar top v-model="mensajeSnackbar.mostrar" timeout="5000">
            {{mensajeSnackbar.dato}}
            <template v-slot:action="{ attrs }">
                <v-btn color="red" v-bind="attrs" text @click="mensajeSnackbar.mostrar = false">Cerrar</v-btn>
            </template>
        </v-snackbar>

        <v-dialog v-model="alertDialog.mostrar" persistent max-width="900">
            <v-card>
                <v-card-title class="headline"><span v-html="alertDialog.titulo"></span></v-card-title>
                <v-card-text><span v-html="alertDialog.mensaje"></span></v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn v-show="alertDialog.botonTerciario" color="grey darken-1" text @click="alertDialogOcultar(alertDialog.botonTerciario)">{{alertDialog.botonTerciario}}</v-btn>
                    <v-btn v-show="alertDialog.botonSecundario" color="info darken-1" text @click="alertDialogOcultar(alertDialog.botonSecundario)">{{alertDialog.botonSecundario}}</v-btn>
                    <v-btn v-show="alertDialog.botonPrimario" color="success darken-1" text @click="alertDialogOcultar(alertDialog.botonPrimario)">{{alertDialog.botonPrimario}}</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>

    </span>
</template>

<script>

import store from '@/store'

export default {
    name: "LSIMensajes",
    data() {
        return {
            mensajeSnackbar: {dato: '', mostrar: false},
            mensajeLoading: {dato: '', mostrar: false},
            alertDialog: {mensaje: '', titulo: '', mostrar: false}
        }
    },

    methods: {
        alertDialogOcultar(payload) {
            this.alertDialog.mostrar=false
            if (this.alertDialog.callback) {
                this.alertDialog.callback(payload)
            }
        }
    },

    created() {
        store.subscribe((mutation, state) => {
            if (mutation.type==="snackbar/mostrar") {
                this.mensajeSnackbar.dato=state.snackbar.texto
                this.mensajeSnackbar.mostrar=true
            }

            if (mutation.type==="loading/mostrar") {
                this.mensajeLoading.dato=state.loading.texto
                this.mensajeLoading.mostrar=true
            }
            if (mutation.type=="loading/ocultar") {
                this.mensajeLoading.mostrar=false
                this.mensajeLoading.dato=''
            }

            if (mutation.type=="alertDialog/mostrar") {
                //Titulo
                this.alertDialog.titulo=state.alertDialog.titulo //|| "Título"

                //Botones
                this.alertDialog.botonPrimario=state.alertDialog.botonPrimario || "Aceptar"
                this.alertDialog.botonSecundario=state.alertDialog.botonSecundario
                this.alertDialog.botonTerciario=state.alertDialog.botonTerciario

                //Callback
                this.alertDialog.callback=state.alertDialog.callback

                //Mensaje
                if (state.alertDialog.mensaje) {
                    this.alertDialog.mensaje=state.alertDialog.mensaje.replaceAll(";", "<br>")
                } else {
                    this.alertDialog.mensaje="Mensaje"
                }

                //Mostrarlo
                this.alertDialog.mostrar=true
            }

        })        
    },
}
</script>