<template>
    <v-card tile flat class="transparent"
        :width="app.width"
        :height="app.height"
        :loading="loading"
        :disabled="loading"
    >
        <v-card tile flat class="transparent"
            :width="app.width"
            :height="app.height"
            v-if="controller.customer"
        >
            <v-card-title class="pa-0">
                <image-icon 
                    :src="app.url + 'imgs/icons/registre.png'"
                />

                <v-sheet class="d-flex align-center transparent">
                    <customer-logo 
                        :app="app"
                        :customer="controller.customer"
                        :form="null"
                    />
                    
                    <v-sheet class="ml-2 text-truncate transparent">
                        {{ controller.customer.name }}. {{ __('Registre') }}
                    </v-sheet>
                </v-sheet>

            </v-card-title>

            <v-breadcrumbs :items="app.menus.Registredashboardbreadcrumbs.getOptions" class="pa-0">
                <template v-slot:divider>
                    <v-icon>mdi-dots-vertical</v-icon>
                </template>
            </v-breadcrumbs>
            
            <v-card tile flat class="transparent d-flex" :width="app.width" :height="app.height - 57">

                <v-card tile flat outlined class="mr-1 overflow-x-hidden" :width="leftWidth" :height="app.height - 57"
                    v-if="app.platform != 'b2b'"
                >
                    <v-sheet class="d-flex justify-space-between align-center pa-1">

                        <v-sheet class="text-body-2 font-weight-bold text-truncate" width="calc(100% - 40px)">
                            {{ __('Asociere registre') }}
                        </v-sheet>

                        <cs-btn
                            :icon="controller.collapsed ? 'mdi-chevron-right' : 'mdi-chevron-left'"
                            :xsmall="true"
                            :small="false"
                            :tooltip="controller.collapsed ? 'Extinde' : 'Restrange'"
                            :disabled="false"
                            @click="OnClickCollapse"
                        >
                        </cs-btn>
                    </v-sheet>

                    <v-divider></v-divider>
                    
                    <customer-registre-asociate 
                        :app="app"
                        :customer="controller.customer"
                        :registre="app.dataSession.Registre.items"
                        :registreasociate="app.dataSession.Registreasociate.items"
                        :disabled="controller.collapsed"
                    />
                </v-card>

                <v-card tile flat outlined class="overflow-y-auto" :height="app.height - 57" :width="'calc(100% - ' + leftWidth + 'px)'">
                    
                    <registre-dashboard-navigator 
                        :height="null"
                        :app="app"
                        :customer="controller.customer"
                        :registre="app.dataSession.Registre.items"
                        :registreasociate="app.dataSession.Registreasociate.items"
                    />

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

</template>

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

        computed: {

            leftWidth() {
                if(this.app.platform == 'b2b')
                {
                    return 0;
                }
                if(this.controller.collapsed)
                {
                    return 60;
                }
                return 280;
            },

            loading() {
                let r = false;
                _.each(['Customers', 'Registre', 'Registreasociate'], item => {
                    if(this.app.dataSession[item].processing)
                    {
                        r = true;
                    }
                })
                return r;
            },

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

        methods: {
            OnClickCollapse() {
                this.controller.collapsed = ! this.controller.collapsed;
            },

            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));
            },

            InitDatatable() {
            },

            LoadData() {
                this.app.dataSession.Customers.GetById(this.controller.customer_id);
                this.app.dataSession.Registre.GetByType('registre');
                this.app.dataSession.Registreasociate.GetByCustomerId(this.controller.customer_id);
            }
        },

        created() {
            this.LoadResources();
            this.InitDatatable();

            _.each(this.app.menus.Registredashboardbreadcrumbs.options, item => {
                let caption = _.isFunction(item.caption) ? item.caption() : item.caption;
                caption = this.__(caption);
                item.caption = () => caption;
            })

            this.LoadData();
        },

        components: {
            CustomerLogo: require('VUECOMP/VIEWS/Attributes/Customers/CustomerLogo').default,
            ImageIcon: require('@CsVueComp/helpers/images/ImageIcon').default,
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'Index',
    }
</script>