<template>
    <v-card
        outlined
        rounded
        class="mb-2"
    >
        <v-card-title class="py-1 primary--text">
            <cs-btn 
                icon="mdi-delete"
                tooltip="Dezasociază toții utilizatorii"
                color="red"
                outlined
                @click="OnClickShowDeleteAll"
            /> 
            
            <span class="text-body-2 pl-3">
                {{ customer.name }} 
            </span>

            <v-spacer></v-spacer>
            
            <v-sheet color="red rounded px-1 mx-1">
                <div class="text-caption white--text font-weight-bold">
                    {{__('Nu au început: :x', {x:count_sended})}}
                </div>
            </v-sheet>

            <v-sheet color="orange rounded px-1 mx-1">
                <div class="text-caption white--text font-weight-bold">
                    {{__('Au început: :x', {x: count_started})}}
                </div>
            </v-sheet>
            
            <v-sheet color="green rounded px-1 mx-1">
                <div class="text-caption white--text font-weight-bold">
                    {{__('Au finalizat: :x', {x: count_done})}}
                </div>
            </v-sheet>
        </v-card-title>

        <v-card-text class="pa-1">

            <v-simple-table dense>
                <template v-slot:default>
                    <thead>
                        <tr>
                            <th class="text-left">
                                {{__('Utilizator') }}
                            </th>

                            <th class="text-left">
                                {{__('Număr trimitere') }}
                            </th>
                            <th class="text-left">
                                {{__('Data') }}
                            </th>
                            <th class="text-left">
                                {{__('Trimis de') }}
                            </th>
                            <th class="text-left">
                                {{__('Interval de efectuare') }}
                            </th>
                            <th class="text-left">
                                {{__('Status') }}
                            </th>

                            <th class="text-left">
                                {{__('Finalizat la data') }}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="(item, index) in users"
                            :key="('item-' + index)"
                        >
                            <td>
                                <cs-btn 
                                    icon="mdi-delete"
                                    tooltip="Dezasociază utlizatorul"
                                    color="red"
                                    @click="OnClickShowDeleteUser($event, item)"
                                /> 
                                    
                                <span class="pl-3">{{ item.user.full_name }}</span>
                                
                            </td>

                            <td style="width:80px">{{ item.trimitere.number }}</td>
                            <td>{{ ToDate(item.trimitere.date) }}</td>
                            <td>{{item.createdby.full_name }}</td>
                            <td>
                                <curs-perioada-completare 
                                    :showLabel="false"
                                    :trimitere="item.trimitere"
                                />
                            </td>
                            <td>
                                <curs-status
                                    :usercurs="item"
                                />
                            </td>
                            <td>
                                {{ ToDate(item.done_at) }}
                            </td>

                        </tr>
                    </tbody>
                </template>
            </v-simple-table>

            
        </v-card-text>

    </v-card>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            customer: {required: true},
        },

        computed: {
            users() {
                let r = _.filter(this.app.dataSession.Customercursuriuser.items, item => item.customer_id == this.customer.id);
                return r;
            },

            count_sended() {
                let r = _.filter(this.app.dataSession.Customercursuriuser.items, item => item.customer_id == this.customer.id && item.status == 'sended');
                return r.length;
            },

            count_started() {
                let r = _.filter(this.app.dataSession.Customercursuriuser.items, item => item.customer_id == this.customer.id && item.status == 'started');
                return r.length;
            },

            count_done() {
                let r = _.filter(this.app.dataSession.Customercursuriuser.items, item => item.customer_id == this.customer.id && item.status == 'done');
                return r.length;
            }
        },

        methods: {
            OnClickShowDeleteAll(e) {
                this.app.classes.Accescurs.desasociereclientmenu.visible = false;

                this.$nextTick( () => {
                    
                    this.app.classes.Accescurs.desasociereclientmenu.x = e.clientX;
                    this.app.classes.Accescurs.desasociereclientmenu.y = e.clientY;
                    this.app.classes.Accescurs.desasociereclientmenu.payload = {
                        customer_id: this.customer.id,
                        curs_id: this.app.payload.curs_id,
                    };
                    this.app.classes.Accescurs.desasociereclientmenu.visible = true;
                });
            },

            OnClickShowDeleteUser(e, item) {
                this.app.classes.Accescurs.desasociereusermenu.visible = false;

                this.$nextTick( () => {
                    
                    this.app.classes.Accescurs.desasociereusermenu.x = e.clientX;
                    this.app.classes.Accescurs.desasociereusermenu.y = e.clientY;
                    this.app.classes.Accescurs.desasociereusermenu.payload = {
                        customer_id: this.customer.id,
                        curs_id: this.app.payload.curs_id,
                        user_id: item.user_id,
                        trimitere_id: item.trimitere_id,
                    };
                    this.app.classes.Accescurs.desasociereusermenu.visible = true;
                });
            },
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'CursAccessCustomerItem',
    }
</script>