<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
            v-if="menu.visible"
            tile
            flat
            :width="width"
            :disabled="disabled"
        >
            <v-card-title class="pa-2">
                {{ __('Detalii trimitere') }}
            </v-card-title>

            <v-divider></v-divider>

            <v-card-text class="d-flex justify-space-between align-center">
                <div class="font-weight-bold text-body-2 primary--text">
                    {{ __('Număr trimitere: :number', {number: trimitere.number}) }}
                </div>

                <div class="font-weight-bold text-body-2 primary--text">
                    {{ __('Data trimitere: :date', {date: ToDate(trimitere.date)}) }}
                </div>

                <div class="font-weight-bold text-body-2 primary--text">
                    {{ __('Efectuată de: :full_name', {full_name: trimitere.createdby ? trimitere.createdby.full_name : '-'}) }}
                </div>
            </v-card-text>

            <v-divider></v-divider>

            <div class="font-weight-bold text-body-2 primary--text pa-2">
                {{ __('Cursuri trimise') }}
            </div>

            <v-card
                tile
                flat
                :loading="! ready || this.app.dataSession.Cursuri.processing"
                :max-height="0.6 * height"
                class="overflow-y-auto"
            >
                <v-card-text class="pa-2">
                    <v-sheet 
                        v-for="(curs, index) in cursuri"
                        :key="'curs-' + index"
                        outlined
                        width="45%"
                        class="float-left pa-2 mb-2 mr-1"
                    >
                        <v-sheet height="50" class="font-weight-bold">
                            {{curs.name}}
                        </v-sheet>

                        <div class="text-caption d-flex justify-space-between">
                            <span>
                                {{curs.category ? curs.category.name : '&nbsp;'}}
                            </span>

                            <span>
                                {{curs.tip || '&nbsp;'}}
                            </span>
                        </div>

                        <div v-if="trimitere.tip_curs == 'onsite'" class="d-flex justify-space-between text-caption">
                            <div>
                                {{trimitere.location}}
                            </div>

                            <div class="text-right">
                                {{ ToDate(trimitere.data_curs) }},
                                {{ __('Ora :h, Durata :d ore', {h: trimitere.ora_curs, d: trimitere.durata_curs}) }}
                            </div>
                        </div>
                    </v-sheet>
                </v-card-text>
            </v-card>

            <div class="font-weight-bold text-body-2 primary--text pa-2">
                {{ __('Clienți și utilizatori') }}
            </div>

            <v-card
                :max-height="0.6 * height"
                :loading="! ready"
                tile
                flat
                class="overflow-y-auto"
            >
                <v-card-text 
                    v-if="ready"
                    class="pa-2"
                >
                    <share-details-menu-customer 
                        v-for="(customer, index) in customers"
                        :key="'customer-' + index"
                        :customer="customer"
                        :usersids="trimitere.customers[customer.id]"
                        :users="users"
                        class="mb-2"
                    />
                </v-card-text>
            </v-card>

            <v-divider></v-divider>

            <v-card-actions>
                <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: () => ({
            ready: false,
        }),

        computed: {
            trimitere() {
                return this.menu.share;
            },

            cursuriids() {
                let r = [];

                _.each(this.app.dataSession.Sharedetails.items, item => {
                    let curs_id = item.sended_document_id;

                    let exists = _.find(r, el => el == curs_id);

                    if( ! exists )
                    {
                        r.push(curs_id);
                    }
                });

                return r;
            },

            cursuri() {
                return _.orderBy(this.app.dataSession.Cursuri.items, [item => item.name], ['asc']);
            },

            customersids() {
                let r = [];

                _.each(this.app.dataSession.Sharedetails.items, item => {
                    let customer_id = item.customer_id;

                    let exists = _.find(r, el => el == customer_id);

                    if( ! exists )
                    {
                        r.push(customer_id);
                    }
                });

                return r;
            },

            customers() {
                return _.orderBy(this.app.dataSession.Customers.items, [item => item.name], ['asc']);
            },

            usersids() {
                let r = [];

                _.each(this.app.dataSession.Sharedetails.items, item => {
                    let user_id = item.assigned_to;

                    let exists = _.find(r, el => el == user_id);

                    if( ! exists )
                    {
                        r.push(user_id);
                    }
                });

                return r;
            },

            users() {
                return this.app.dataSession.Users.items;
            },
        },

        watch: {
            'menu.visible': function() {
                if(this.menu.visible)
                {
                    this.LoadTrimitereDetails();
                }
                else
                {
                    this.app.dataSession.Sharedetails.response = null;
                    this.app.dataSession.Cursuri.response = null;
                    this.app.dataSession.Customers.response = null;
                    this.app.dataSession.Users.response = null;
                }
            }
        },

        methods: {
            LoadTrimitereDetails() {

                this.ready = false;

                this.app.dataSession.Sharedetails.GetByTrimitereId(this.trimitere.id);

                let i = setInterval( () => {
                    if(! this.app.dataSession.Sharedetails.processing)
                    {
                        clearInterval(i);
     
                        this.app.dataSession.Cursuri.GetByIds(this.cursuriids);

                        this.app.dataSession.Customers.GetByIds(this.customersids);

                        this.app.dataSession.Users.GetByIds(this.usersids);

                        let j = setInterval( () => {

                            if(! this.app.dataSession.Customers.processing && ! this.app.dataSession.Users.processing)
                            {
                                clearInterval(j);
                                this.ready = true;
                            }
                            
                        }, 350);
                    }
                }, 350);
            },

            OnClickCancel() {
                this.menu.visible = false;
            }
        },

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

        name: 'ShareDetailsMenu'
    }
</script>