<template>
    <v-card tile flat :width="app.width">

        <cs-centered-alert
            v-if="loading"
            :height="app.height"
            :width="app.width"
            message="Se încarcă..."
        >
            <v-progress-circular
                indeterminate
                color="orange darken-1"
            >
            </v-progress-circular>
        </cs-centered-alert>
        

        <template v-else>
            <v-card tile flat :width="app.width">
                
                <v-card-title class="pa-0">
                    {{  __('Dashboard utilizator. :name', {name: Utilizatori.Users.active.full_name}) }} 
                </v-card-title>

                <v-breadcrumbs 
                    :items="app.menus.Userdashboardbreadcrumbs.getOptions" 
                    class="pa-0 ma-0"
                >
                    <template v-slot:divider>
                        <v-icon>mdi-dots-vertical</v-icon>
                    </template>
                </v-breadcrumbs>
                

                <v-card tile flat :disabled="Utilizatori.Menus.visible || Utilizatori.Forms.visible">
                    <v-sheet class="d-flex">

                        <v-sheet :width="Utilizatori.Layout.sidebar.width">
                            <user-table-record 
                                :app="app"
                                :user=" Utilizatori.Users.active"
                                class="mb-2"
                            />

                            <cs-btn 
                                icon="mdi-pencil"
                                caption="Editează"
                                tooltip="Editează datele despre utilizator"
                                color="primary"
                                outlined
                                @click="OnClickUpdate"
                            />
                        </v-sheet>

                        <v-sheet :width="'calc(100% - ' + Utilizatori.Layout.sidebar.width + 'px)'" class="ml-2">

                            <user-roles-detailed-list 
                                :app="app"
                                :user=" Utilizatori.Users.active"
                            />

                        </v-sheet>
                    </v-sheet>
                </v-card>

                <div v-for="(menu, index) in Utilizatori.Menus.menus" :key="'menu-' + index">
                    <component 
                        v-if="menu.visible"
                        :is="menu.component" 
                        :menu="menu" 
                        :app="app"
                    >
                    </component>
                </div>

                <div v-for="(item, index) in Utilizatori.Forms.items" :key="'form-' + index">
                    <component 
                        v-if="app.forms[item.name].menu.visible"
                        :is="item.component" 
                        :form="app.forms[item.name]" 
                        :app="app"
                    >
                    </component>
                </div>

                <right-menu 
                    v-for="(menukey, index) in Utilizatori.Rightmenus.items" :key="'rightmenu-' + index"
                    :menu="app.menus[menukey]"
                />

            </v-card>

        </template>
    </v-card>
</template>

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

        computed: {

            loading() {

                let dataSessions = ['Users', 'Roles', 'Customers', 'Permissions'];

                let r = false;
                
                _.each(dataSessions, item => {

                    if(this.app.dataSession[item].request_count < 1)
                    {
                        r = true;
                    }

                    if(this.app.dataSession[item].progressing)
                    {
                        r = true;
                    }

                })

                return r;
               
            }
        },

        methods: {

            LoadResources() {
                this.app.AddClassesByContext(require.context('./../../Classes', true, /\.class.js$/i));
                this.app.AddDataProvidersByContext(require.context('./../../DataSessions', true, /\.dataprovider.js$/i));
                this.app.AddDatatablesByContext(require.context('./../../Datatables', true, /\.datatable.js$/i));
                this.app.AddFormProvidersByContext(require.context('./../../FormProviders', true, /\.formprovider.js$/i));                
                this.app.AddFormsByContext(require.context('./../../Forms', true, /\.form.js$/i));
                this.app.AddFilterFormsByContext(require.context('./../../Filterforms', true, /\.filterform.js$/i));
                this.app.AddMenusByContext(require.context('./../../Toolbars', true, /\.toolbar.js$/i));
                this.app.AddMenusByContext(require.context('./../../Menus', true, /\.menu.js$/i));
                this.app.AddMenusByContext(require.context('./../../Breadcrumbs', true, /\.breadcrumbs.js$/i));
                this.app.AddRequestsByContext(require.context('./../../Requests', true, /\.request.js$/i));
            },

            OnClickUpdate(e) {
                this.Utilizatori.Forms.Show('Users', e, 'update', this.Utilizatori.Users.active);
            }
        },

        
        created() {
            this.LoadResources();

            this.app.dataSession.Permissions.GetRootPermissions();
            this.app.dataSession.Users.GetById(this.Utilizatori.user_id);
            this.app.dataSession.Roles.GetByType('b2b');

            this.app.dataSession.Customers.Post();   
            
            this.Utilizatori.Forms.Init();
        },

        components: {
            CsCenteredAlert: require('@CsVueComp/sheets/CsCenteredAlert').default,
            RightMenu: require('@CsVueComp/menus/rightmenu/RightMenu').default,
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'Index',
    }
</script>