<template>
    <v-card
        tile
        flat
        :loading="customersdataprovider.processing"
        :disabled="customersdataprovider.processing"
        :height="height"
        :class="{
            'overflow-y-auto' : !! height,
        }"
    >
        <v-treeview
            dense
            selectable
            open-all
            :disabled="disabled"
            selection-type="leaf"
            :items="[{id: -1, name: __('Selectați clienții'), children: items}]"
            ref="CustomersTree"
            v-model="selected"
        >
            <template #label="{item}">
                <div class="text-caption d-flex align-center justify-space-between mb-1">

                    <v-sheet width="calc(100% - 44px)" :class="{
                        'red--text': item.status == 'inactive'
                    }">
                        {{item.name}}
                    </v-sheet>

                    <template v-if="item.id > 0">
                        <v-sheet width="44">
                            <customer-status 
                                :customer="item"
                                :app="null"
                                :form="null"
                            />
                        </v-sheet>
                    </template>
                </div>
            </template>
        </v-treeview>
    </v-card>
</template>

<script>
    import CustomersDataProvider from 'APPS/Dataproviders/Customers/Customers';

    export default {

        props: {
            value: {default: () => []},
            disabled: {default: false},
            height: {default: 480},
            app: {required: true},
        },

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

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

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

            items() {
                return this.customersdataprovider.items;
            }
        },

        methods: {
            OpenAllNodes() {
                let i = setInterval( () => {
                    if( ! this.customersdataprovider.processing )
                    {
                        clearInterval(i);
                        this.$refs.CustomersTree.updateAll(true);
                        this.selected = [...this.value];
                    }
                }, 400)
            }
        },

        created() {
            this.customersdataprovider = new CustomersDataProvider(this.app);
            this.customersdataprovider.Get();
            this.OpenAllNodes();
        },

        name: 'TeamCustomersWorkTree',
    }
</script>