<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">

            <v-card-title class="bg-dark-blue white--text text-body-1 py-2">
                {{ __('Export registru') }}
            </v-card-title>

            <v-divider></v-divider>

            <v-card-text v-if="!! activeRegistru && !! activeRegistru.props"> 
                <v-alert type="info" outlined>
                    {{ __('Sunteți sigur că doriți descărcarea registului :name, numarul :numar din :data?', {
                        name: activeRegistru.props.registru.name,
                        numar: activeRegistru.number,
                        data: activeRegistru.date,
                    }) }}
                </v-alert>
   
                <v-text-field 
                    dense
                    hideDetails
                    outlined
                    disabled
                    :label="__('Nume fișier')"
                    v-model="filename"
                />

                <v-row dense class="mt-3">
                    <v-col cols="12">
                        <div>
                            {{__('Selectați departamentele de exportat')}} 
                            <cs-btn 
                                caption="Toate"
                                outlined
                                :disabled="departamente_ids.length == departamente.length"
                                @click="CheckAll"
                            />

                            <cs-btn 
                                caption="Niciunul"
                                outlined
                                :disabled="departamente_ids.length == 0"
                                @click="departamente_ids = []"
                            />
                        </div>

                        <v-checkbox
                            v-for="(option, index) in departamente"
                            :key="'option-' + index"
                            dense
                            hide-details
                            outlined
                            class="mt-0"
                            :value="option.id"
                            :label="option.name"
                            v-model="departamente_ids"
                        >
                        </v-checkbox>
                    </v-col>
                </v-row>
            </v-card-text>

            <v-divider></v-divider>
            
            <v-card-actions>
                <cs-btn 
                    caption="Descarcă"
                    icon="mdi-download"
                    color="primary"
                    outlined
                    tooltip="Confirmă descărcarea"
                    :loading="app.requests.Registrudownload.processing"
                    :disabled="app.requests.Registrudownload.processing || departamente_ids.length == 0"
                    @click="OnClickSave"
                />

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

<script>
    const CreateDownloadLink = require('@CsFunc/global/Redirect');
    const Slugify = require('slugify');

    export default {
        props: {
            app: {required: true},
            menu: {required: true},
            width: {default: 600},
            height: {default: null},
        },

        data: () => ({
            filename: null,
            departamente_ids: [],
        }),

        computed: {
            controller() {
                return this.app.classes.Customerregistru;
            },

            activeRegistru() {
                return this.controller.activeRegistru;
            },

            departamente() {
                let r = this.app.dataSession.Departamente.items;

                r =  _.orderBy(r, item => item.departament);

                return _.map(r, item => ({
                    id: item.id,
                    name: item.departament,
                }));
            },
        },

        watch: {
            'menu.visible': function(visible) {
                if( visible )
                {
                    let filename = Slugify(this.controller.customer.name + '-' + this.activeRegistru.props.registru.name, {locale: this.$locale}).toLowerCase();
                     
                    filename += ('-' + this.controller.activeRegistru.number + '-' + this.controller.activeRegistru.date + '.xlsx');

                    this.filename = filename;

                    this.CheckAll();
                }
            }
        },

        methods: {
            CheckAll() {
                this.departamente_ids = _.map(this.departamente, item => item.id);
            },

            OnClickSave() {
                this.app.requests.Registrudownload.ResetData().SetData(
                    {
                        id: this.activeRegistru.id,
                        filename: this.filename,
                        juststructure: 0,
                        departamente_ids: this.departamente_ids
                    }
                ).Request([
                    response => {
                        CreateDownloadLink(response.payload);
                        this.OnClickCancel();
                    }
                ])
            },

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

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

        name: 'CustomerRegisterDownloadMenu'
    }
</script>