<template>
    <v-menu
        v-model="menu.visible"
        :position-x="menu.x"
        :position-y="menu.y"
        absolute
        offset-y
        right
        :close-on-content-click="false"
        :close-on-click="false"
    >

        <v-card
            :width="width"
            :height="height"
        >
            <v-card-title>
                {{ __('Download fișiere selectate') }}
                <v-spacer></v-spacer>

                <cs-btn 
                    icon="mdi-close"
                    :click="() => menu.visible = false"
                />
            </v-card-title>

            <v-card-text>
                <cs-info-alert 
                    icon="mdi-help-circle-outline"
                    color="primary"
                    :message="__('Sunteți sigur că vreți să descărcați cele :x fișier(e) selectate?', {
                        x: selectedFiles.length,
                    })"
                />
            </v-card-text>
   
            <v-divider></v-divider>

            <v-card-actions>
                <cs-btn 
                    color="bg-dark-blue"
                    caption="Descarcă"
                    icon="mdi-download"
                    outlined
                    :click="OnClickDownload"
                    :disabled="app.dataSession.Files.processing"
                />

                <v-spacer></v-spacer>
                
                <cs-btn-cancel 
                    :click="() => menu.visible = false"
                />
            </v-card-actions>
        </v-card>
                
    </v-menu>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            menu: {required: true},
            width: {default: 420},
            height: {default: null},
            // customer: {required: true},
        },

        data: () => ({
            interval: null,
            index: null,
        }),

        computed: {
            uploader() {
                return this.app.classes.Customeruploader;
            },

            customer() {
                return this.uploader.customer;
            },
            
            selectedFiles() {
                return this.uploader.selectedFilesManager.selectedFiles;
            },

        },

        methods: {

            DownloadFiles(files) {
                this.index = 0;
                this.interval = setInterval(
                    () => this.DownloadFile(files), 
                    1000,
                );
            },

            DownloadFile(files) {
                if(this.index == files.length)
                {
                    clearInterval(this.interval);
                    this.menu.visible = false;
                    this.uploader.selectedFilesManager.selectedFiles = [];
                }
                else
                {
                    this.ProcessFile(files[this.index]);
                    this.index++;
                }
            },

            ProcessFile(file) {
                let iframe = document.createElement('iframe');
                let url = this.app.url + 'customer-documents/download/' + this.customer.id + '/' + file.id;
                
                iframe.style.visibility = 'collapse';
                document.body.append(iframe);

                iframe.contentDocument.write(
                    '<form action=' + url + ' method="GET"></form>'
                );
                
                iframe.contentDocument.forms[0].submit();

                setTimeout(() => iframe.remove(), 2000);
            },

            OnClickDownload() {
                let files = [];
                _.each(this.selectedFiles, file_id => {

                    let file =_.find(this.app.dataSession.Files.items, item => item.id == file_id);

                    files.push({
                        id: file.id,
                        url: file.url,
                        name: file.file_original_name,
                    });
                });

                this.DownloadFiles(files);
            },
                
        },

        created() {
            this.app.dataSession.Files.Get();
        },

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

        name: 'FilesDownloadMenu',
    }
</script>