﻿<template>
    <ul uk-tab>
        <li v-if="header" class="uk-disabled"><a>{{ header }}</a></li>
        <li v-for="(tab,index) in tabs" :class="{'uk-active': currentTab === index}" @click="changeTab(index)"><a href="#">{{ tab.title }}</a></li>
    </ul>
    <div v-if="loading" class="uk-padding-small uk-text-center">
        <div uk-spinner></div>
    </div>    
    <div v-for="(tab,index) in tabs" :id="containerId + '-tab-'+index" v-show="currentTab === index">

    </div>
</template>

<script>
    Component(['@general/spinner'], function (spinner) {       
        var visitor = this.$visitor;
        return {
            components: {
                spinner
            },
            data: function () {
                return {
                    containerId: 'tab-container-' + Math.trunc(Math.random() * 100000),
                    currentTab: -1,
                    loading: false
                }
            },
            methods: {
                async loadComponent(n, d, i) {                    
                    tabComponent = await LoadVueComponent(n, d);
                    app = Vue.createApp(tabComponent);
                    app.config.globalProperties.$visitor = visitor;
                    this.loading = false;
                    app.mount('#' + this.containerId + '-tab-' + i);
                },
                async changeTab(index) {
                    if (this.currentTab === index) {
                        return;
                    }
                    this.currentTab = index;
                    var self = this;
                    self.loading = true;
                    var tab = self.tabs[index];
                    if (tab.mounted) {
                        self.loading = false;
                        return;
                    }
                    tab.mounted = true;
                    var tabComponent = undefined;
                    if (tab.loadedComponent) {
                        tabComponent = tab.loadedComponent;
                    }
                    else if (typeof tab.component === 'string') {
                        if (tab.component.indexOf('@') === 0) {
                            if (tab.params instanceof Function) {
                                if (tab.loadedParams) {
                                    self.loadComponent.apply(self, [tab.component.substring(1), tab.loadedParams, index]);

                                }
                                else {
                                    tab.params(function (d) {
                                        tab.loadedParams = d;
                                        self.loadComponent.apply(self, [tab.component.substring(1), d, index]);
                                    })
                                }
                            }
                            else {
                                self.loadComponent.apply(self, [tab.component.substring(1), tab.params, index]);                      
                            }                            
                        } else {
                            self.loadComponent.apply(self, [tab.component.substring(1), d, index]);
                        }
                    } else {
                        tabComponent = tab.component;
                        app = Vue.createApp(tabComponent);
                        app.config.globalProperties.$visitor = visitor;
                        self.loading = false;
                        app.mount('#' + self.containerId + '-tab-' + index);
                    }
                }
            },
            mounted: function () {
                if (this.tabs.length > 0) {
                    this.changeTab(0);
                }
            },
            props: {
                tabs: Array,
                header: String
            }
        }
    });
</script>