<template>
    <div>
        <v-card
            tile
            flat
            :height="app.height"
            :width="app.width"
            class="mx-auto overflow-x-auto overflow-y-hidden"
            :disabled="pageDisabled"
        >  
            <v-card-title class="px-1 py-0">
                <image-icon 
                    :src="app.url + 'imgs/blue-icons/person.png'"
                />

                {{ __('Conturi clienți') }}

                <v-spacer></v-spacer>
                
                <cs-quick-search 
                    :dataprovider="dataprovider" 
                    class="mr-2"
                />

                <cs-records-count 
                    :dataprovider="dataprovider"
                    field="itemsCount"
                >
                    <cs-btn-reload 
                        :dataprovider="dataprovider" 
                    />
                </cs-records-count>
            </v-card-title>

            <v-card-title class="px-1 py-0">
                <v-breadcrumbs :items="breadcrumbs" class="pa-1">
                    <template v-slot:divider>
                        <v-icon>mdi-dots-vertical</v-icon>
                    </template>
                </v-breadcrumbs>
            </v-card-title>

            <cs-toolbar 
                :toolbar="toolbar"
            >
                <v-sheet 
                    v-if="activeRecord "
                    max-width="200"
                    class="transparent text-truncate text-dark-blue font-weight-bold"
                >
                    {{ activeRecord.user.full_name  }} - {{ activeRecord.customer.name }}
                </v-sheet>
            </cs-toolbar>
            

            <v-sheet
                :height="app.height - 124"
                :width="app.width"
            >
                <customer-persons-datatable 
                    :app="app"
                    :dataprovider="dataprovider"
                    :height="app.height  - 124"
                    :width="app.width"
                />
            </v-sheet>
        </v-card>

        <customer-account-form-menu 
            :app="app"
            :form="form"
            :customers="customers"
            :users="users"
            :departamente="departamente"
            @show-user-insert-form="OnShowUserInsertForm"
        />

        <user-form-menu 
            :app="app"
        />
        
        <customer-persons-filter-menu 
            :app="app"
        />

    </div>
</template>

<script>
    /**
     * 44, 22, 48
     */
    export default {
        props: {
            app: {required: true},
        },

        computed: {
            breadcrumbs() {
                return this.app.classes.Controller.breadcrumbs();
            },

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

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

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

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

            departamente() {
                return this.app.dataSession.Departments.items;
            },

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

            toolbar() {
                return this.app.menus.Customerpersonstoolbar;
            },

            form() {
                return this.app.forms.Customerpersons;
            },

            userform() {
                return this.app.forms.Users;
            },

            pageDisabled() {
                return this.controller.pageDisabled;
            }
        },

        methods: {
            OnShowUserInsertForm(e) {
                this.userform.menu = {
                    visible: true,
                    x: e.x - 280,
                    y: e.y - 300,
                };

                this.userform.target = 'record';
                
                this.userform.Show(null, 'insert', {
                    ...this.userform.formprovider.blankRecord,
                    type: 'b2b'
                });  
            }
        },
        
        components: {
            ImageIcon: require('@CsVueComp/helpers/images/ImageIcon').default,
            CsRecordsCount: require('@CsVueComp/dataprovider/CsRecordsCount').default,
            CsQuickSearch: require('@CsVueComp/dataprovider/CsQuickSearch').default,
            CsBtnReload: require('@CsVueComp/buttons/CsBtnReload').default,
            CsToolbar: require('@CsVueComp/menus/toolbar/CsToolbar').default,
        },
        
        name: 'CustomerPersonsPage',
    }
</script>