<template>
    <v-card
    
        tile
        flat
        :height="height"
        class="overflow-y-auto"
    >
        <v-card-text>
            <v-treeview
                dense
                selectable
                open-all
                :disabled="disabled"
                selection-type="leaf"
                :items="[{id: -1, type: 'customer', name: __('Selectați și utilizatorii'), children: tree}]"
                ref="AccountsTree"
                v-model="selected"
            >
                <template #label="{item}">
                    
                    <div class="text-caption d-flex align-center justify-space-between mb-1">
                        <div v-if="item.type == 'customer'">
                            {{ item.name }}
                        </div>
                        <template v-else>
                            <div>
                                {{item.full_name}}
                            </div>

                        </template>
                    </div>
                </template>
            </v-treeview>
        </v-card-text>

        <v-card-actions>

            <cs-btn
                color="primary"
                small
                :caption=" __('Înapoi') "
                @click="$emit('prev-step')"
            />
        
        </v-card-actions>
    </v-card>

</template>

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

        data: () => ({
            disabled: false,
            selected: [],
            tree: [],
        }),

        watch: {
            accounts: function() {
                this.CreateTree();
            },

            selected: function() {
                this.$emit('select-accounts', this.selected);
            }
        },

        methods: {
            CreateTree() {
                let r = [..._.filter(this.accounts, item => item.activated == 1)];
                r = _.map(r, item => item.user);
                r = _.orderBy(r, [item => item.full_name], ['asc']);
                this.tree = r;

                setTimeout( () => {
                    this.$refs.AccountsTree.updateAll(true);
                }, 300);
            }
        },

        created() {
            this.CreateTree();
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },
        
        name: 'CursAsigneazaConturi',
    }
</script>