<template>
    <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>


    <v-card v-else tile flat class="" :width="app.width" :height="app.height" :loading="loading" :disabled="loading">
        <v-card tile flat v-if="controller.customer && controller.registru" 
            :disabled="app.forms.Registrelemele.visible ||
                app.forms.Registrelemelerow.visible ||
                controller.downloadmenu.visible ||
                controller.uploadmenu.visible ||
                controller.changerowstatus.visible || 
                controller.changerowstare.visible ||
                controller.deleterows.visible ||
                controller.registrucopy.visible ||
                controller.rowfilesmenu.visible ||
                controller.accessmenu.visible"
        >
            <v-card-title class="px-0 py-1">
                {{ controller.customer.name }}. {{ __(controller.registru.name) }}
            </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="d-flex" :width="app.width" :height="app.height - 61">

                <v-card tile flat outlined class="mr-1 overflow-hidden" :width="leftWidth" :height="app.height - 61">
                    <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)">
                            <cs-btn 
                                v-if="app.Can('customer-registre.registre.create')"
                                icon="mdi-plus"
                                :small="false"
                                :xsmall="true"
                                :tooltip="__('Creează un registru nou')"
                                @click="OnClickShowInsert"
                            />

                            {{ __('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-registers-list 
                        :app="app"
                        :items="registrelemele"
                        :height="app.height - 96"
                        :disabled="controller.collapsed"
                    />
                </v-card>

                <v-card tile flat outlined class="" :height="app.height - 61" :width="'calc(100% - ' + leftWidth + 'px)'">
                    <v-sheet class="pa-2" v-if="! controller.activeRegistru">
                        <v-alert outlined dense type="info">
                            <span class="text-body-2">
                                {{ __('Selectați un registru') }}
                            </span>
                        </v-alert>
                    </v-sheet>
                    
                    <template v-else>
                        <v-sheet class="pa-1 d-flex align-center">
                            <div class="text-caption" color="indigo darken-2">
                                {{ __('Registrul') }}:
                                <span class="font-weight-medium">
                                    {{ controller.activeRegistru.number }} - {{ToDate(controller.activeRegistru.date)}}
                                </span>
                            </div>

                            <cs-toolbar :toolbar="app.menus.Rows">
                            </cs-toolbar>
                        </v-sheet>

                        <v-divider></v-divider>

                        <v-card tile flat>

                            <customer-register-table 
                                v-if="!! controller.activeRegistru && !! controller.activeRegistru.columns && controller.activeRegistru.columns.length > 0"
                                :app="app"
                                :registru="controller.registru"
                                :customerregistru="controller.activeRegistru"
                                :height="app.height - 120"
                            />
                        
                            <v-alert v-else type="warning" class="ma-2" outlined rounded="lg">
                                {{ __('Registrul nu are definite structura coloanelor.') }}
                            </v-alert>
                        </v-card>
                    </template>
                </v-card>
            </v-card>
        </v-card>

        <customer-register-form-menu 
            v-if="app.forms.Registrelemele.visible"
            :app="app"
            :form="app.forms.Registrelemele"
        />

        <customer-register-copy 
            v-if="controller.registrucopy.visible"
            :app="app"
            :menu="controller.registrucopy"
        />

        <customer-register-row-form-menu 
            :app="app"
            :form="app.forms.Registrelemelerow"
        />

        <customer-register-download-menu 
            :app="app"
            :menu="controller.downloadmenu"
        />

        <customer-register-upload-menu 
            :app="app"
            :menu="controller.uploadmenu"
        />

        <customer-register-access-menu 
            :app="app"
            :menu="controller.accessmenu"
        />

        <change-row-status 
            v-if="controller.changerowstatus.visible"
            :app="app"
            :menu="controller.changerowstatus"
        />

        <change-row-stare 
            v-if="controller.changerowstare.visible"
            :app="app"
            :menu="controller.changerowstare"
        />

        <delete-rows
            v-if="controller.deleterows.visible"
            :app="app"
            :menu="controller.deleterows"
        />

        <row-files-menu
            v-if="controller.rowfilesmenu.visible"
            :app="app"
            :menu="controller.rowfilesmenu"
        />

        <right-menu 
            :menu="app.menus.Registrurowrightmenu"
        />

    </v-card>
</template>

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

        computed: {
            leftWidth() {
                if(this.controller.collapsed)
                {
                    return 60;
                }
                return 280;
            },

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

            loading()  {
                let r = false;
                _.each(['Customers', 'Registre', 'Departamente', 'Allcustomers', 'Registrelemele', 'Accounts'], item => {
                    if(this.app.dataSession[item].processing && (this.app.dataSession[item].request_count < 1))
                    {
                        r = true;
                    }
                })
                return r;
            },

            registrelemele() {
                let r = _.orderBy(this.app.dataSession.Registrelemele.items, [item => item.date, item => item.number], ['desc', 'desc']);

                return r;
            }
        },

        methods: {
            
            OnClickShowInsert(e) {
                this.app.forms.Registrelemele.menu.visible = false;
                
                this.$nextTick( () => {
                    this.app.forms.Registrelemele.menu.visible = true;
                    this.app.forms.Registrelemele.menu.x = e.clientX;
                    this.app.forms.Registrelemele.menu.y = e.clientY;
                    this.app.forms.Registrelemele.Show(null, 'insert', null);

                    this.app.forms.Registrelemele.formprovider.activeRecord.customer_id = this.controller.customer.id;
                    this.app.forms.Registrelemele.formprovider.activeRecord.register_id = this.controller.registru.id;
                    this.app.forms.Registrelemele.formprovider.activeRecord.columns = this.controller.registru.columns;
                    this.app.forms.Registrelemele.formprovider.activeRecord.props = {
                        registru: this.controller.registru,
                    };
                    this.app.forms.Registrelemele.formprovider.activeRecord.date = this.Now();

                });
            },

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

            LoadData() {
                this.app.dataSession.Customers.GetById(this.app.payload.customer_id);
                this.app.dataSession.Allcustomers.Get();
                this.app.dataSession.Registre.GetById(this.app.payload.registru_id);
                this.app.dataSession.Departamente.GetByCustomerId(this.app.payload.customer_id);
                this.app.dataSession.Registrelemele.GetByCustomerIdAndRegistruId(this.app.payload.customer_id, this.app.payload.registru_id);
                this.app.dataSession.Accounts.GetByCustomerId(this.app.payload.customer_id);
            }
        },

        created() {
            this.LoadResources();

            this.app.forms.Registrelemele.SetFormProvider(this.app.formproviders.Registrelemele);
            this.app.forms.Registrelemelecopy.SetFormProvider(this.app.formproviders.Registrelemelecopy);
            this.app.forms.Registrelemelerow.SetFormProvider(this.app.formproviders.Registrelemelerow);
            this.app.forms.Departamente.SetFormProvider(this.app.formproviders.Departamente);

            _.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: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
            RightMenu: require('@CsVueComp/menus/rightmenu/RightMenu').default,
            CsToolbar: require('@CsVueComp/menus/toolbar/CsToolbar').default,
            CsCenteredAlert: require('@CsVueComp/sheets/CsCenteredAlert').default,
        },

        name: 'Index',
    }
</script>