<template>
    <v-sheet>
        <v-alert type="info" outlined dense>
            {{ __('Selectați utilizatorii și departamentele la care aceștia au access') }}
        </v-alert>

        <v-sheet max-height="360" class="overflow-y-auto">
            <v-treeview
                dense
                selectable
                open-all
                :items="tree"
                ref="PermissionTree"
                v-model="selected"
            >
                <template #label="{item}">
                    <div class="text-caption" v-if="item.type == 'departament'">
                        {{item.name}} 
                    </div>

                    <div class="d-flex justify-start align-center" v-else>
                        <user-avatar
                            :user="item"
                        />

                        <v-sheet width="260" class="pl-1 text-truncate">
                            {{item.full_name}} ({{item.email}})

                            
                        </v-sheet>
                        
                        <v-sheet width="70">
                            <v-chip small outlined :color="item.activated == 1 ? 'green' : 'red'">
                                {{ __(item.activated == 1 ? 'Activ' : 'Inactiv')  }}
                            </v-chip>
                        </v-sheet>
                        
                        <account-role
                            v-if="item.role.id"
                            :role="item.role"
                            :app="app"
                            :form="null"
                        />

                        <span v-else class="red--text text-caption">
                            {{ __('Nu are rol') }}
                        </span>
                    </div>
                </template>
            </v-treeview>
        </v-sheet>
    </v-sheet>

</template>

<script>
    export default {
        props: {
            app: {required: true},
            departamente: {required: true},
            accounts: {required: true},
            value: {required: true},
        },

        computed: {

            selected: {
                get: function() {
                    return this.value;
                },

                set: function(selected) {
                    this.$emit('input', selected);
                }
            },

            tree() {
                let r = _.filter(this.accounts, item => item.role && item.role.id == 5);

                r = _.map(r, item => ({

                    ...item.user,
                    activated: item.activated,
                    type: 'user',
                    name: item.user.full_name,
                    role: item.role,
                    children: _.map(this.departamente, el => ({
                        id: item.user.id + '#' + el.id,
                        name: el.departament,
                        type: 'departament',
                    })),
                }));

                r = _.orderBy(r, [item => item.name], ['asc']);

                return r;
            }
        },
        
        name: 'RegistruAccessTree',
    }
</script>