<template>
    <v-card
        tile
        flat
        :height="height"
        :loading="customersManager.dataprovider.processing || dataprovider.processing"
        :disabled="customersManager.dataprovider.processing || dataprovider.processing"
        :class="{
            'overflow-y-auto': !! height
        }"
    >
        <v-card-text>
            <v-treeview
                dense
                selectable
                open-all
                :disabled="false"
                selection-type="leaf"
                :items="[{id: -1, name: __('Selectați clienții'), children: customersManager.dataprovider.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-text>
    </v-card>
</template>

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

    export default {
        props: {
            height: {default: null},
            app: {required: true},
            user: {required: true},
        },

        data: () => ({
            customersManager: {
                dataprovider: null,
            },

            selected: [],

            t: null,
        }),


        computed: {
            // selected: {
            //     get: function() {
            //         return _.map(this.userscustomers, item => item.customer_id);
            //     },

            //     set: function(customers_ids) {
            //         console.log('SET', customers_ids);
            //     }
            // },

            dataprovider() {
                return this.app.dataSession.Usercustomers;
            },

            userscustomers() {
                return this.dataprovider.orderedByCustomer;
            }
        },

        watch: {
            selected: function() {
                if(this.t)
                {
                    clearTimeout(this.t);
                }

                this.t = setTimeout( () => {
                    this.app.requests.UsercustomersSave.ResetData().SetData({
                        user_id: this.user.id,
                        customers_ids: this.selected
                    }).Request([
                        response => {
                        }
                    ])
                }, 500);
                
            }
        },

        created() {
            this.customersManager.dataprovider = new CustomersDataprovider(this.app);
            this.customersManager.dataprovider.Get();

            this.dataprovider.GetByUserId(this.user.id);

            let i = setInterval( () => {
                if( ! this.customersManager.dataprovider.processing && ! this.dataprovider.processing)
                {
                    clearInterval(i);
                    this.$refs.CustomersTree.updateAll(true);
                    this.selected = [..._.map(this.userscustomers, item => item.customer_id)];
                }
            }, 350)
        },

        name: 'UserCustomersWorkList',
    }
</script>