

<template>
    <v-card tile flat :width="app.width" :height="app.height" class="overflow-x-auto overflow-y-hidden">
        <v-card-title class="px-0 py-1">

            <user-avatar :user="user"/>
            
            <span class="ml-2">
                {{ __('Dashboard utilizator :name', {name: user.full_name}) }}
            </span>

            <v-spacer></v-spacer>
            
            <popup-menu 
                :item="headermenu"
                :closeOnContent="true"
            />
        </v-card-title>

        <v-card-text class="pa-0">

            <v-tabs
                background-color="bg-dark-blue"
                centered
                dark
                icons-and-text
                v-model="controller.currentTab"
            >
                <v-tabs-slider></v-tabs-slider>
                <v-tab
                    v-for="(tab, index) in controller.tabs"
                    :key="'tab-' + index" 
                    :href="'#tab-' + (1 + index)"
                    class="text-no-transform"
                >
                    {{ tab.caption }}
                </v-tab>
            </v-tabs>

            <v-tabs-items v-model="controller.currentTab">
                <v-tab-item
                    v-for="(tab, index) in controller.tabs"
                    :key="'tab-' + index" 
                    :value="'tab-' + (1 + index)"
                >
                    <component
                        :is="tab.component"
                        :app="app"
                        :height="app.height - 114"
                        :user="user"
                        :customers="customers.customersPluckById"
                        :customerpersons="customerpersons"
                        :usercustomers="usercustomers"
                        :allowActions="true"
                    >
                    </component>
                </v-tab-item>
            </v-tabs-items>
        </v-card-text>
    </v-card>
</template>

<script>
    export default {
        props: {
            app: {required: true},
        },

        computed: {

            user() {
                return this.app.dataSession.Users.user;
            },

            customers() {
                return this.app.dataSession.Customers;
            },

            customerpersons() {
                return this.app.dataSession.Customerpersons.items;
            },

            usercustomers() {
                return this.app.dataSession.Usercustomers.items;
            },

            controller() {
                return this.app.classes.Controller;
            },

            headermenu() {
                return this.app.menus.Headermenu;
            },
        },

        components: {
            PopupMenu: require('@CsVueComp/menus/popupmenu/PopupMenu').default,
        },

        name: 'UserDashboardPage',
    }
</script>