<template>
    <v-chip 
        small 
        outlined
        :class="{
            clickable : true,
        }"
        @click="ShowCustomersWorkForm"
    >
        {{ user.user_customers_count }}
    </v-chip>
</template>

<script>
    // {{ user.role.slug == 'operator' ? user.user_customers_count : '-' }}
    import UsercustomersDataProvider from 'APPS/Dataproviders/User/Customers/Usercustomers';

    export default {

        props: {
            user: {required: true},
            app: {required: true},
            form: {required: true},
        },

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

        methods: {
            ShowCustomersWorkForm(e) {
                if(this.form) //  (this.user.role.slug == 'operator')
                {                    
                    this.form.visible = false;
                    this.form.left = 0;
                    this.form.top = 0;

                    this.form.user = {...this.user};

                    this.usercustomersdataprovider.GetByUserId(this.form.user.id);

                    let i = setInterval( () => {
                        if( ! this.usercustomersdataprovider.processing )
                        {
                            clearInterval(i);

                            this.$nextTick(() => {
                                
                                this.form.formprovider.SetFormCaption('update', this.user.full_name + '. Editare clienți atașați');

                                this.form.visible = true;

                                this.form.formprovider.Reset().SetAction('update').SetActiveRecord({
                                    ...this.form.formprovider.blankRecord,
                                    user_id: this.user.id,
                                    customers_ids: _.map(this.usercustomersdataprovider.items, item => item.customer_id),
                                });

                                this.form.formprovider.oldRecord = null;
                            })
                        }
                    }, 400);
                }
            }
        },

        created() {
            this.usercustomersdataprovider = new UsercustomersDataProvider(this.app);
        },
        
        name: 'TeamCustomersWork',
    }
</script>