<template>
    <div class="container-fluid px-xl-5 mt-3">
        <div class="row">
            <div class="col-xl-8 offset-xl-2">
                <!--qr-code :text="qr_url" color="#000" bg-color="#fff" error-level="H" class="qr-code"></qr-code-->
                <h3 class="text-center">Events</h3>
                <!--p>{{ events }}</p-->
                <ul>
                    <li v-for="event in events" :key="event.id">
                        {{ event.slug }}
                    </li>
                </ul>
                <h3 class="text-center">Items</h3>
                <!--p>{{ loadedItems }}</p-->
                <ul>
                    <li v-for="item in loadedItems" :key="item.id">
                        {{ item.description }}
                    </li>
                </ul>
                <h3 class="text-center">Boxes</h3>
                <!--p>{{ loadedBoxes }}</p-->
                <ul>
                    <li v-for="box in loadedBoxes" :key="box.id">
                        {{ box.name }}
                    </li>
                </ul>
                <h3 class="text-center">Mails</h3>
                <!--p>{{ mails }}</p-->
                <ul>
                    <li v-for="mail in mails" :key="mail.id">
                        {{ mail.id }}
                    </li>
                </ul>
                <h3 class="text-center">Issues</h3>
                <!--p>{{ issues }}</p-->
                <ul>
                    <li v-for="issue in issues" :key="issue.id">
                        {{ issue.id }}
                    </li>
                </ul>
                <h3 class="text-center">System Events</h3>
                <!--p>{{ systemEvents }}</p-->
                <ul>
                    <li v-for="systemEvent in systemEvents" :key="systemEvent.id">
                        {{ systemEvent.id }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import {mapActions, mapState} from 'vuex';
import Table from '@/components/Table';
import Events from "@/views/Events.vue";

export default {
    name: 'Debug',
    components: {Events, Table},
    computed: {
        ...mapState(['events', 'loadedItems', 'loadedBoxes', 'mails', 'issues', 'systemEvents']),
        qr_url() {
            return window.location.href;
        }
    },
    methods: {
        ...mapActions(['changeEvent', 'loadMails', 'loadIssues', 'loadSystemEvents']),

    },
    mounted() {
        this.loadMails();
        this.loadIssues();
        this.loadSystemEvents();
    }
};
</script>

<style>
.qr-code img {
    border: #fff solid 7px
}
</style>