<template>
    <v-card tile flat :height="cardHeight" :width="width" outlined color="grey lighten-1">
        <v-card-title class="px-1 pt-1 pb-0">
            <span class="text-caption">
                {{  __('Permisiuni :name', {name: user.full_name}) }} <span v-if="$env == 'local'">#{{ user.id }}</span>
            </span>
        </v-card-title>

        <v-card-title class="px-1 pt-0 pb-1" v-if="customer.id">
            <span class="text-caption">
                {{ customer.name }} <span v-if="$env == 'local'">#{{ customer.id }}</span>
            </span>
        </v-card-title>
        
        <v-sheet :height="cardHeight ? cardHeight - 50 : null" class="overflow-y-auto overflow-x-hidden">
            
            <v-alert v-if="! customer.id" type="error" dense outlined class="ma-2">
                <span class="text-caption">
                    {{ __('Nu este asociat client la acest rol.') }}
                </span>
            </v-alert>

            <cs-permissions-tree v-else
                :permissions="permissions"
                :values="accountpermissions"
                :selectedcolor="role.color"
                @input="OnInput"
            />

        </v-sheet>

    </v-card>
</template>

<script>

    import Saveaccountpermissions from './Requests/Saveaccountpermissions';

    export default {
        props: {
            /**
             * Toate permisiunile definite in sistem
             */
            permissions: {required: true},

            user: {required: true},
            role: {required: true},
            customer: {required: true},
            account: {required: true},

            width: {default: 400},
            height: {default: 600},
        },

        data: () => ({
            t: null,
        }),

        computed: {

            cardHeight() {
                if( ! this.customer.id )
                {
                    return null;
                }
                return this.height ? this.height :  this.width * 1.618033;
            },

            accountpermissions() {
                return {
                    ...this.role.permissions,
                    ...this.account.permissions,
                }
            },
        },

        methods: {
            SavePermissions(permissions) {

                if(this.t)
                {
                    clearTimeout(this.t);
                }

                this.t = setTimeout( () => {   
                    
                    new Saveaccountpermissions()
                        .ResetData()
                        .SetData({
                            account_id: this.account.id,
                            permissions,
                        })
                        .Request([
                            response => {
                            }
                        ]);

                }, 350);
            },

            OnInput(permissions) {
                this.SavePermissions(permissions);
            },
        
        },

    
        name: 'CsCustomerAccountPermissions'
    }
</script>