<template>
    <v-card tile flat :width="width" :height="height">
        <v-card tile flat class="transparent d-flex" :width="app.width" :height="height">

            <v-card tile flat outlined class="mr-1 overflow-x-hidden" :width="leftWidth" :height="height"
                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="height" :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>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            width: {default: null},
            height: {default: null},
        },

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

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

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

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

        name: 'AnalizaGapRaport',
    }
</script>