<template>
    <v-card tile flat :width="app.width" :height="app.height">
        <v-card-title class="px-0 pt-0 pb-1" v-if="!! controller.customer">
            <v-sheet class="mr-2">
                {{controller.customer.name}}
            </v-sheet>

            <cs-btn 
                caption="Centralizatoare"
                outlined
                :icon="'centralizatoare' == currentComponent ? 'mdi-check' : null"
                :color="'centralizatoare' == currentComponent ? 'primary' : null"
                class="ml-2"
                @click="OnClickCentralizatoare"
            />

            <cs-btn 
                v-for="(option, index) in controller.options"
                :key="'option-' + index"
                :caption="option.caption"
                :icon="option.component == currentComponent ? 'mdi-check' : null"
                :color="option.component == currentComponent ? 'primary' : null"
                outlined
                class="ml-2"

                @click="controller.currentComponent = option.component"
            />
        </v-card-title>

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

        <template v-if="currentComponent != 'centralizatoare'">
            <component 
                :is="currentComponent"
                :app="app"
                :width="app.width"
                :height="app.height - 57"
            >
            </component>
        </template>
    </v-card>
</template>

<script>

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

    export default {
        props: {
            app: {require: true},
        },

        computed: {
            controller() {
                return this.app.classes.Analizagap;
            },

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

        methods: {

            OnClickCentralizatoare() {
                const url = this.$url + 'customer-analiza-gap/' + this.controller.customer_id + '/centralizatoare';
                return Redirect(url);
            },

            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() {
            },

            InitForms() {
            },

            InitFiltering() {
            },

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

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

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        mixins: [
            require('VUEMIX/Index/IndexPage'),
        ],

        name: 'Index',
    }
</script>