<template>
    <div>
        <v-sheet
            v-if="! item.is_image"
            class="d-flex align-center justify-center"
            :height="height"
            width="100%"
        >
            <iframe 
                :style="{
                    width:'100%',
                    height: height + 'px',
                    border: 'none !important',
                    outline: 'none !important',
                }" 
                :src="src"
            >
            </iframe>
        </v-sheet>
    
        <v-sheet
            class="d-flex align-center justify-center"
            :height="height"
            v-else
            width="100%"
        >
            <v-img
                :src="item.file.url"
                contain
                :height="imageHeight"
                class="mx-auto"
            >
            </v-img>
        </v-sheet>
    </div>
</template>

<script>

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

        computed: {
            activeFile() {
                return this.file.file;
            },

            src() {
                let r = this.item.is_office ? this.microsoftSrc : this.googleSrc;
                return _.replace(r, '[url]', this.item.file.url)
            },

            imageHeight() {
                let h = 1000000;

                if( !! this.item.file.file_height )
                {
                    h = this.item.file.file_height;
                }

                if(this.height < h)
                {
                    h = this.height;
                }

                return h;
            }
        },

        name: 'PreviewFile',
    }

</script>