<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"
        :style="{
            'max-width': '100%',
        }"
    >
        <v-card
            tile
            flat
            :width="app.width"
            :disabled="disabled"
        >
            <v-card-title>
                {{ __('Previzualizare fișier') }}. <span v-if="cursfile">{{cursfile.file_original_name}}</span>
            </v-card-title>

            <v-divider></v-divider>

            <v-sheet
                :height="app.height"
                class="overflow-y-auto"
                v-if="cursfile"
            >
                <v-card-text class="pa-1">
                    <iframe 
                        :style="{
                            width:'100%',
                            height: (app.height) + 'px',
                            border: 'none !important',
                        }" 
                        :src="src"
                    >
                    </iframe>
                </v-card-text>
            </v-sheet>

            <v-divider></v-divider>

            <v-card-actions>

                <cs-btn 
                    caption="Download"
                    icon="mdi-download"
                    color="primary"
                    outlined
                    tooltip="Confirmă download-ul fișierului"
                    :loading="false"
                    @click="OnClickDownload"
                />

                <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: 400},
            height: {default: null},
            disabled: {default: false},

            microsoftSrc: {default: 'https://view.officeapps.live.com/op/embed.aspx?src=[url]'},
            googleSrc: {default: 'https://docs.google.com/gview?url=[url]&embedded=true'},
        },

        computed: {
            cursfile() {
                return this.menu.customerfile;
            },

            src() {
                let r = this.cursfile.file_original_extension != 'pdf' ? this.microsoftSrc : this.googleSrc;
                return _.replace(r, '[url]', this.cursfile.url)
            },
        },

        watch: {
            'menu.visible': function() {
                if(! this.menu.visible)
                {
                    this.menu.customerfile = null;
                }
            }
        },


        methods: {
            OnClickDownload(e) {
                let file_id = this.cursfile.id 
                let url = this.app.url + 'customer-cursuri/' + this.app.payload.customer_id  + '/download-file/' + file_id;
                window.open(url);
            },

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

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

        name: 'PreviewCursMenu'
    }
</script>