<!-- components/Test.vue -->
<template>
    <div>
        <b-alert
                :show="dismissCountDown"
                dismissible
                variant="warning"
                @dismissed="dismissCountDown=0"
                @dismiss-count-down="countDownChanged"
        >
            This alert will dismiss after {{ dismissCountDown }} seconds...
        </b-alert>
        <b-button @click="showAlert" variant="info" class="m-1">
            Show alert with count-down timer
        </b-button>
        <h1>Toller Test</h1>
        <span>{{ $socket.connected ? 'Connected' : 'Disconnected' }}</span>
        <button v-if="$socket.connected" @click="disconnectWebsocket">Disconnect</button>
        <button v-else="$socket.connected" @click="connectWebsocket">Connect</button>
        <p>
            <button v-if="$socket.connected" @click="sendWsMessage('Tolle Test Nachricht')">Send Message</button>
        </p>


    </div>
</template>

<script>

    import {EventBus} from '@/utils';

    export default {
        data() {
            return {
                email: '',
                dismissSecs: 5,
                dismissCountDown: 0,

            };
        },
        methods: {
            changeLocale(locale) {
                this.$i18n.locale = locale;
                // Vue.$moment.locale(locale);
            },
            sendWsMessage(msg) {
                this.$socket.client.emit('my_event', msg);
            },
            connectWebsocket() {
                this.$socket.client.connect();
            },
            disconnectWebsocket() {
                this.$socket.client.disconnect();
            },
            countDownChanged(dismissCountDown) {
                this.dismissCountDown = dismissCountDown;
            },
            showAlert() {
                this.dismissCountDown = this.dismissSecs;
            },
        },
        mounted() {
            this.$socket.client.on('my_response', function(msg) {
            });
            this.$socket.client.on('server_event', function(msg) {
            });
            this.$socket.client.on('connect', function(msg) {
            });

            // this.$socket.$unsubscribe('even_name');

        },
        beforeDestroy() {
            EventBus.$off('failedLoadingProfile');
        },
        computed: {
            profile() {
                return this.$store.state.profile;
            },
            access_token() {
                return this.$store.state.access_token;
            },
        },
    };
</script>

<style lang="scss">
    .error-msg {
        color: red;
        font-weight: bold;
    }

    .lang-btn {
        padding: 15px;
        border: 2px solid green;
        font-size: 18px;
        margin: 15px;
    }
</style>
