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


            <v-card-title>
                {{ __('Fișiere atașate rândului') }}
            </v-card-title>

            <v-divider></v-divider>

            <template v-if="mode != 'preview'">
                <v-card-text class="my-2">

                    <v-card height="400" class="overflow-y-auto overflow-x-hidden" :disabled="!! currentitem" tile flat>

                        <v-alert v-if="files.length == 0" type="info" outlined>
                            {{  __('Nu sunt fișiere atașate') }}
                        </v-alert>

                        <v-sheet v-for="(item, index) in files" :key="'item-' + index" class="d-flex justify-space-between align-center text-caption"
                            style="border-bottom:1px solid #BBBBBB"
                        >

                            <v-sheet width="25" class="text-right">
                                #{{ 1 + index }}.
                            </v-sheet>
                            
                            <v-sheet class="text-left" width="calc(100% - 125px)">
                                <span class="px-2">
                                    {{ item.file.file_original_name }}
                                </span>
                            </v-sheet>


                            <v-sheet width="100">
                                
                                <cs-btn 
                                    :small="false"
                                    :xsmall="true"
                                    icon="mdi-file"
                                    color="primary"
                                    tooltip="Previzualizează fișierul"
                                    @click="OnClickPreview(item)"
                                />

                                <cs-btn 
                                    :small="false"
                                    :xsmall="true"
                                    icon="mdi-download"
                                    color="primary"
                                    tooltip="Descarcă fișierul"
                                    @click="OnClickDownload(item)"
                                />

                                <cs-btn 
                                    :small="false"
                                    :xsmall="true"
                                    icon="mdi-delete"
                                    color="red"
                                    tooltip="Șterge fișierul"
                                    @click="OnClickDeleteFile(item)"
                                />

                            </v-sheet>



                        </v-sheet>
                    </v-card>
                </v-card-text>

                <v-divider></v-divider>

                <v-card-text class="my-2">
                    <v-row dense>
                        <v-col cols="12" v-if="mode == 'insert'">
                            <v-sheet class="d-flex justify-space-between align-center">
                                <v-file-input
                                    dense
                                    :label="__('Selectați fișierul de atașat')"
                                    v-model="file"
                                    class="pr-2"
                                >
                                </v-file-input>

                                <cs-btn 
                                    icon="mdi-upload"
                                    color="primary"
                                    small
                                    :disabled="! file"
                                    tooltip="Confirmă adăugarea fișierului"
                                    @click="OnClickUpload"
                                />
                            </v-sheet>
                        </v-col>

                        <v-col cols="12" v-if="mode == 'delete'">
                            <v-alert type="error" outlined>
                                {{  __('Sunteți sigur că doriți ștergerea fișierului :name?', {name: currentitem.file.file_original_name})  }}

                                <cs-btn 
                                    icon="mdi-delete"
                                    color="red"
                                    caption="Șterge"
                                    outlined
                                    tooltip="Confirma ștergerea"
                                    @click="DoDelete"
                                />

                                <cs-btn 
                                    caption="Renunță"
                                    icon="mdi-close"
                                    outlined
                                    @click="OnClickCancelAction"
                                />
                            </v-alert>
                        </v-col>
                    </v-row>
                </v-card-text>

                <v-divider></v-divider>

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

            <template v-else>

                <v-card-text>
                    <preview-file 
                        :height="0.85 * app.height"
                        :item="currentitem"
                    />
                </v-card-text>

                <v-divider></v-divider>

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

        </v-card>
    </v-menu>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            menu: {required: true},
        },

        data: () => ({
            file: null,

            files: [],

            mode: 'insert',
            currentitem: null,
        }),

        methods: {

            OnClickPreview(item) {
                this.mode = 'preview';

                this.currentitem = {...item};
            },

            OnClickDownload(item) {
                let file_id = item.id 
                let url = this.app.url + 'customers-registers-rows/download-file/' + file_id;
                window.open(url);
            },

            DoDelete() {

                this.app.requests.Rowdeletefile.ResetData().SetData(
                    {
                        id: this.currentitem.id,
                    }
                ).Request([
                    response => {


                        this.LoadFiles();
                        this.OnClickCancelAction();
                        
                    }
                ])
            },

            OnClickDeleteFile(item) {

                this.mode = 'delete';

                this.currentitem = {...item};

            },

            OnClickCancelAction() {
                this.mode = 'insert';
                this.currentitem = null;
            },

            OnClickUpload() {

                this.app.requests.Rowuploadfile.ResetData().SetData(
                    {
                        row_id: this.menu.row_id,
                        file: this.file,
                    }
                ).Request([
                    response => {

                        this.file = null;
                        this.LoadFiles();
                        
                    }
                ])
            },

            LoadFiles() {
                this.app.requests.Rowloadfiles.ResetData().SetData(
                    {
                        row_id: this.menu.row_id,
                    }
                ).Request([
                    response => {

                       this.files = response.payload.files;
                        
                    }
                ])
            },

            OnClickCancel() {
                

                let registru = {...this.app.classes.Customerregistru.activeRegistru};
                
                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 == registru.id);
                        this.app.classes.Customerregistru.activeRegistru = item;

                        this.file = null;
                        this.files = [];
                        this.menu.visible = false;
                    }
                }, 350);
            }
        },

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

        created() {
            this.LoadFiles();
        },

        name: 'RowFilesMenu',
    }
</script>