<template>
    <v-card tile flat :color="role.color" outlined>

        <v-card-title class="px-1 py-0 white--text">
            
            {{ role.name  }}

            <template v-if="role.type == 'b2b'">
                <span v-if="role.pivot.customer_id">
                    . {{  Utilizatori.Customers.customers[role.pivot.customer_id] }} 
                    <span v-if="$env == 'local'">#{{ role.pivot.customer_id }}</span>
                </span>

                <span class="pl-2" v-else>
                    <cs-icon-tooltip 
                        message="Nu este asociat client la acest rol"
                    />
                </span>
            </template>

            <v-spacer></v-spacer>
            
            <user-roles-detailed-list-item-menu 
                :app="app"
                :role="role"
            />

        </v-card-title>

        <v-sheet>
            <v-card-text class="pa-1">
                
                <v-sheet class="d-flex flex-wrap">

                    <template v-if="role.type == 'admin'">

                        <cs-user-status 
                            :user="user"
                            class="mr-2"
                            @click:update-status="app.classes.Utilizatori.Menus.Show('updatestatus', $event, {user, role})"
                        />

                        <cs-user-permissions 
                            :permissions="systempermissions"
                            :user="user"
                            :role="role"
                        />
                    </template>

                    <template v-else>

                        <v-alert v-if="! role.pivot.customer_id" type="error" dense outlined class="ma-2" width="100%">
                            <span class="text-caption">
                                {{ __('Nu este asociat client la acest rol.') }}
                            </span>
                        </v-alert>
                        

                        <v-sheet v-else-if="loading" class="d-flex justify-center mt-3" width="100%">
                            <v-progress-circular indeterminate color="orange darken-3">

                            </v-progress-circular>
                        </v-sheet>

                        <template v-else>
                            
                            <v-alert v-if="! account" type="error" dense outlined class="ma-2" width="100%">
                                <span class="text-caption">
                                    {{ __('Ceva nu este regulă cu acest cont de client. Nu am găsit înregistrare corespunzătoare în conturile clientului.') }}
                                    <span v-if="$env == 'local'">
                                        {{  unique }}
                                    </span>
                                </span>
                            </v-alert>

                        
                            <template v-else>

                                <cs-customer-account-status 
                                    :user="user"
                                    :role="role"
                                    :customer="{
                                        id: role.pivot.customer_id,
                                        name: role.pivot.customer_id ? Utilizatori.Customers.customers[role.pivot.customer_id] : null,
                                    }"
                                    :account="account"
                                    class="mr-2 mb-2"
                                    @click:update-status="app.classes.Utilizatori.Menus.Show('updateaccountstatus', $event, {user, role, account, customer: {
                                        id: role.pivot.customer_id,
                                        name: role.pivot.customer_id ? Utilizatori.Customers.customers[role.pivot.customer_id] : null,
                                    }})"
                                />

                                <cs-customer-account-permissions 
                                    :permissions="systempermissions"
                                    :user="user"
                                    :role="role"
                                    :account="account"
                                    :customer="{
                                        id: role.pivot.customer_id,
                                        name: role.pivot.customer_id ? Utilizatori.Customers.customers[role.pivot.customer_id] : null,
                                    }"
                                    class="mr-2 mb-2"
                                />

                                <template v-for="(foldertype, index) in Utilizatori.Foldersaccess.foldertypes">

                                    <dec-customer-account-folders-visibility 
                                        :key="'foldertype-' + index"
                                        :user="user"
                                        :role="role"
                                        :account="account"
                                        :foldertype="foldertype"
                                        :customer="{
                                            id: role.pivot.customer_id,
                                            name: role.pivot.customer_id ? Utilizatori.Customers.customers[role.pivot.customer_id] : null,
                                        }"
                                        class="mr-2 mb-2"
                                    />

                                </template>
                            </template>

                        </template>

                    </template>
                </v-sheet>

            </v-card-text>
        </v-sheet>

    </v-card>
</template>

<script>

    import Accounts from 'APP/~USERS/utilizatori-platforma/DataSessions/Accounts/Accounts';

    export default {
        props: {
            app: {required: true},
            role: {required: true},
            user: {required: true},
        },

        data: () => ({

            dp: null,
        }),

        computed: {
            unique() {
                if( ! this.role.pivot.customer_id )
                {
                    return null;
                }

                return this.role.pivot.customer_id + '#' + this.user.id + '#' + this.role.id;
            },

            loading() {
                return this.dp.processing || this.dp.request_count < 1;
            },

            account() {
                if(this.dp.items.length == 1)
                {
                    return this.dp.items[0];
                }
                return null;
            },
        },

        watch: {
            unique: function(unique, oldunique) {
                this.LoadAccount();
            }
        },

        methods: {
            LoadAccount() {
                if(this.role.pivot.customer_id)
                {
                    console.log('Load account(' + this.user.id + ', ' +  this.role.pivot.customer_id + ', ' + this.role.id + ')');
                    this.dp.GetByUserIdAndCustomerIdAndRoleId(this.user.id, this.role.pivot.customer_id, this.role.id);
                }
            }
        },

        created() {
            this.dp = new Accounts(this.app);

            this.LoadAccount();
        },

        name: 'UserRolesDetailedListItem',
    }
</script>