<template>
    <v-menu
        v-model="menu.visible"
        :position-x="menu.x"
        :position-y="menu.y"
        absolute
        offset-y
        :close-on-content-click="false"
        :close-on-click="false"
    >
        <v-card
            tile
            flat
            :width="width"
            :disabled="disabled"
        >
            <v-card-title>
                {{ __('Desasociere cursuri') }}
            </v-card-title>

            <v-divider></v-divider>

            <template v-if="cursuritree.length > 0">

                <div class="pa-2 info--text d-flex align-center">
                    <v-icon class="info--text mr-1">
                        mdi-information-outline
                    </v-icon>
                    {{ __('Selectați utilizatorii pe care doriți să-i desasociați de la cursurile corespunzătoare.') }}
                </div>

                <v-sheet
                    :height="height"
                    class="overflow-y-auto"
                >
                    <v-card-text class="pa-2">
                        <v-treeview
                            dense
                            selectable
                            open-all
                            selection-type="leaf"
                            :items="cursuritree"
                            ref="CursurTree"
                            v-model="selected"
                        >
                            <template #label="{item}">
                                <div class="text-caption d-flex align-center mb-1">
                                    <template v-if="item.type == 'trimitere'">
                                        <div class="font-weight-bold primary--text">
                                            {{ item.name }}
                                        </div>
                                        <v-chip class="ml-3">
                                            {{ item.number }} / {{ToDate(item.date)}} / {{item.sender}}
                                        </v-chip>
                                    </template>
                                    <template v-else>
                                        <div>
                                            {{item.name}}
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </v-treeview>
                    </v-card-text>
                </v-sheet>

            </template>

            <v-card-text v-else>
                <v-alert type="info">
                    {{ __('Nu este niciun utilizator care să poată fi desasociat.') }}
                </v-alert>
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
                <cs-btn 
                    caption="Desasociază"
                    icon="mdi-minus"
                    color="red"
                    outlined
                    tooltip="Desasociază utilizatorii selectați"
                    :loading="app.requests.Desasocierecursuri.processing"
                    :disabled="selected.length == 0"
                    @click="OnClickDesasociaza"
                />

                <v-spacer></v-spacer>

                <cs-btn 
                    caption="Renunță"
                    icon="mdi-close"
                    @click="OnClickCancel"
                />
            </v-card-actions>
        </v-card>
    </v-menu>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            menu: {required: true},
            width: {default: 800},
            height: {default: 460},
            disabled: {default: false},
        },

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

        computed: {
            cursuritree() {
                let r = _.map(this.app.dataSession.Cursuriatasate.items, item => {
                    
                    return {
                        id: item.id,
                        name: item.curs.name,
                        type: 'trimitere',
                        number: item.trimitere_number,
                        date: item.trimitere_date,
                        sender: item.trimitere_sended_by,
                        children: _.map(item.cursusers, cursuser => {

                            return {
                                id: cursuser.id,
                                type: 'user',
                                name: cursuser.user.full_name,
                            };
                        }),
                    }

                });

                r =_.filter(r, item => item.children.length > 0);

                return r;
            }
        },

        watch: {
            'menu.visible': function() {
                if(this.menu.visible)
                {
                    this.selected = [];
                }
            }
        },

        methods: {
            OnClickDesasociaza(e) {
                this.app.requests.Desasocierecursuri.ResetData().SetData({
                    ids: this.selected,
                    customer_id: this.app.payload.customer_id,
                }).Request([
                    response => {
                        this.OnClickCancel();
                    }
                ]);
            },

            OnClickCancel() {
                this.menu.visible = false;
                this.app.dataSession.Cursuriatasate.GetByCustomerId(this.app.payload.customer_id);
            }
        },

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

        name: 'DesasociereCursuriMenu'
    }
</script>