<template>
    <v-card tile flat outlined :height="height" :loading="loading" :disabled="loading">
        <v-card-title class="pa-1">
            {{ __('Client :name', {name: customer.name}) }}
            
            <v-spacer></v-spacer>

            <v-menu
                v-if="app.platform == 'admin'"
                bottom
                :close-on-click="true"
            >
                <template v-slot:activator="{ on, attrs }">
                    <v-btn
                        color="primary"
                        dark
                        small
                        v-bind="attrs"
                        v-on="on"
                        class="text-no-transform"
                    >
                        {{ customer.name }}

                        <account-role 
                            v-if="!! account"
                            :role="account.role"
                            :form="null"
                            :app="app"
                            class="ml-2"
                        />
                        
                    </v-btn>
                </template>

                <v-list>
                    <v-list-item
                        v-for="(item, index) in localaccounts"
                        :key="'account-' + index"
                        class="clickable"
                        @click="OnClickAccount(item)"
                    >
                        <v-list-item-title class="d-flex justify-space-between align-center">
                            {{ item.customer.name }}

                            <account-role 
                                :role="item.role"
                                :form="null"
                                :app="app"
                                class="ml-2"
                            />
                        </v-list-item-title>
                    </v-list-item>
                </v-list>
            </v-menu>
        </v-card-title>

        <v-divider></v-divider>

        <v-sheet
            :height="height - 43"
            class="overflow-y-auto"
        >
            <user-dashboard-tabs 
                :app="app"
                :user="user"
                :menu="tabs"
                :account="account"
                :height="height - 43"
            />
        </v-sheet>

        
    </v-card>
</template>


<script>
    /**
     * user.permissions
     * user.role
     * user.my_settings
     * user.roles
     * user.customers 
     *      + la ce customeri sunt eu printre cei care au conturi: customers-persons
     *      + (Pe asa nu ma pot baza);
     * 
     * Utilizator platforma b2b
     * Are conturi si roluri la diferiti clienti
     * Are permisiuni
     */
    const Redirect = require('@CsFunc/global/Redirect');

    export default {
        props: {
            app: {required: true},
            user: {required: true},
            height: {default: null},
            customer: {required: true},
        },

        data: () => ({
            localaccounts: [],
        }),

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

            loading() {
                return this.app.dataSession.Accounts.processing;
            },

            accounts() {
                return this.app.dataSession.Accounts.items;
            },

            account() {
                return _.find(this.accounts, item => item.user_id == this.user.id && item.customer_id == this.customer.id);
            },

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

        methods: {
            OnClickAccount(account) {
                let url = this.$url + 'utilizator-dashboard/accounts/' + this.user.id + '/' + account.customer_id;
                return Redirect(url);
            }
        },

        created() {
            this.app.dataSession.Accounts.GetByUserId(this.user.id);
            let i = setInterval( () => {
                if(! this.app.dataSession.Accounts.processing )
                {
                    clearInterval(i);
                    this.localaccounts = [...this.app.dataSession.Accounts.items];
                }
            }, 400)
        },

        name: 'AccountDashboardItems',
    }
</script>