<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">
                {{ __('Upload registru') }}
            </v-card-title>

            <v-divider></v-divider>

            <v-card-text>
                <v-alert type="warning" class="text-body-2" outlined>
                    {{ __('Descărcați de aici structura fișierului.') }}

                    <div class="text-caption">
                        <v-icon small color="warning">
                            mdi-arrow-right
                        </v-icon>
                        {{__('Coloana status se completează cu public sau protected')}}
                    </div>

                    <div class="text-caption">
                        <v-icon small color="warning">
                            mdi-arrow-right
                        </v-icon>
                        {{__('Coloana departament se completează scriind exact numele departamentului existent în lista departamentelor companiei.')}}
                    </div>

                    <div class="text-caption mb-3">
                        <v-icon small color="warning">
                            mdi-arrow-right
                        </v-icon>
                        {{__('Coloanele de tip opțiune se completează cu numele opțiunii alese sau se lasă liber.')}}
                    </div>

                    <cs-btn
                        icon="mdi-download"
                        :small="true"
                        caption="Descarcă"
                        color="warning darken-2"
                        outlined
                        tooltip="Descărcați fișierul care trebuie completat"
                        @click="OnClickDownload"
                    />
                </v-alert>
                
                <v-file-input
                    dense
                    :label="__('Selectați fișierul')"
                    v-model="file"
                >
                </v-file-input>
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
                <cs-btn 
                    caption="Atașează"
                    icon="mdi-content-save"
                    color="primary"
                    otlined
                    :loading="app.requests.Registruupload.processing"
                    :disabled="! file || app.requests.Registruupload.processing"
                    @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: () => ({
            file: null,
            filename: null,
        }),

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

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

        },

        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;
                }
            }
        },

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

            OnClickSave() {
                this.app.requests.Registruupload.ResetData().SetData({
                    file: this.file,
                    id: this.activeRegistru.id,
                }).Request([
                    response => {
              
                        this.app.dataSession.Registrelemele.GetByCustomerIdAndRegistruId(this.app.payload.customer_id, this.app.payload.registru_id);
                        let i = setInterval( () => {

                            if(! this.app.dataSession.Registrelemele.processing )
                            {
                                clearInterval(i);

                                let item = _.find(this.app.dataSession.Registrelemele.items, item => item.id == this.controller.activeRegistru.id);
                                this.app.classes.Customerregistru.activeRegistru = item;

                                this.OnClickCancel();
                            }
                        }, 350);
                                        
                    }
                ])
            },

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

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

        name: 'UploadFileMenu'
    }
</script>