<template>
    <v-card tile flat class="mx-auto overflow-x-auto overflow-y-hidden" :height="app.height" :width="app.width">
        
        <v-card-title class="pa-0">
            <v-sheet class="d-flex">
                <customer-logo 
                    :app="app"
                    :customer="customer"
                    :form="null"
                />

                <div class="ml-2">
                    {{ customer.name }}. {{ __('Dashboard') }}
                </div>
            </v-sheet>
        </v-card-title>

        <v-card-title class="pa-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>

        <v-sheet :width="app.width" :height="app.height - 72" class="overflow-auto d-flex">

            <dashboard-columns-container 
                :app="app"
                :customer="customer"
                :dashboardItems="dashboardItems"
                :dashboardColumns="dashboardColumns"
                :width="(app.platform == 'admin' ? 0.80 : 1)* app.width"
                :height="app.height - 72"
            /> 

            <dashboard-customer-profile 
                v-if="app.platform == 'admin'"
                :app="app"
                :customer="customer"
                :width="0.20 * app.width"
                :height="app.height - 72"
            />
        </v-sheet>
    </v-card>
</template>

<script>
    const Redirect = require('@CsFunc/global/Redirect');

    export default {
        props: {
            app: {required: true},
            customer: {required: true},
            dashboardItems:  {required: true},
            dashboardColumns: {default: () => [1, 2, 3, 4]},
        },

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

        methods: {
            ApplyDashboardUserSettings() {
                let code = this.app.platform + '-' + this.customer.id + '-customer-dashboard';

                if(_.has(this.app.user.my_settings, code) )
                {
                    _.each(this.app.user.my_settings[code], (el, item_id) => {
                        let item = _.find(this.dashboardItems, element => element.id == item_id);
                        if( !! item )
                        {
                            item.column_no = el.column_no;
                            item.order_no = el.order_no;
                        }
                    })
                }
            },

            ApplyProfileDashboardUserSettings() {
                let code = this.app.platform + '-' + this.customer.id + '-customer-profile-dashboard';

                if(_.has(this.app.user.my_settings, code) )
                {
                   
                    _.each(this.app.user.my_settings[code], (el, index) => {
                        let item = _.find(this.app.menus.Profileitems.options, element => element.id == el.id);
                        if( !! item )
                        {
                            item.order_no = el.order_no;
                        }
                    })
                }
            },
        },

        created() {
            this.ApplyDashboardUserSettings();
            this.ApplyProfileDashboardUserSettings();
        },

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

        name: 'CustomerDashboardPage',
    }

</script>