<template>
    <div>
        <el-dialog title="查看文件" :visible="true" width="1200px" append-to-body :close-on-click-modal="false" 
            @close="handleClose()" :modal="false">
            <div class="dialog-content dialog-file">
                <div class="pt-8 flex-row flex-row-center m-16">
                    <div v-if="this.fileDialog.filelist.length > 1" class="previous-file text-center" @click="previousClick">
                        <span><i class="el-icon-arrow-left f48 f-weight600 "></i></span>
                    </div>
                    <div class="show-file">
                        <img v-if="fileType == 'image'" :src="`${fileObj.fullUrl}`" />
                        <video v-else-if="fileType == 'video'"  width="100%" height="100%" :src="`${fileObj.fullUrl}`" preload="auto" autoplay="autoplay"
                            controls="" controlsList="nodownload noremote footbar"></video>
                        <iframe v-else :src="`${fileObj.fullUrl}`" frameborder="0" width="100%" height="100%"></iframe>
                        
                    </div>
                    <div v-if="this.fileDialog.filelist.length > 1" class="next-file text-center" @click="nextClick">
                        <span><i class="el-icon-arrow-right f48 f-weight600"></i></span>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">关闭</el-button>
            </span>
        </el-dialog>

       
    </div>
</template>
<script>
import api from "@/services/caseManagement";
    export default {
        components: {
            videoPreview: () => import('@/components/videoPreview.vue'),//查看视频文件
        },
        props: {
            fileDialog: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        data() {
            return {
                CurrentPosition:0,//当前位置
                fileObj:{},
                fileType:''

            };
        },
        mounted () {
            if(this.fileDialog.showfile.fullUrl == undefined){
                this.fileDialog.showfile.fullUrl = this.fileDialog.showfile.url
            }
            this.fileObj = this.fileDialog.showfile
            this.fileDialog.filelist.forEach((item,index) =>{
                if(item.url == this.fileDialog.showfile.url){
                    this.CurrentPosition = index
                }
            })
            this.getShowFileType(this.fileObj.url)
            
        },
        methods: {
            getShowFileType(url){
                if(this.$util.getFileType(url) === 'image') {
                    // 如果是图片，直接显示图片
                    this.fileType = 'image'
                }
                else if(this.$util.getFileType(url) === 'video') {
                    // 如果是图片，直接显示图片
                    this.fileType = 'video'
                }
                else if(this.$util.getFileType(url) === 'audio') {
                    // 如果是图片，直接显示图片
                    this.fileType = 'video'
                }
                else
                {
                    this.fileType = 'other'
                }
            },
            previousClick(){
                let nextCurrent = this.CurrentPosition-1;
                if(this.fileDialog.filelist[nextCurrent]!=undefined)
                {
                    this.fileObj = this.fileDialog.filelist[nextCurrent]
                    this.CurrentPosition = nextCurrent

                    this.getShowFileType(this.fileObj.url)
                }
                else
                {
                    this.$message.warning(`已经是第一个了！`)
                    return
                }
            },
            nextClick(){
                let nextCurrent = this.CurrentPosition+1;
                if(this.fileDialog.filelist[nextCurrent]!=undefined)
                {
                    this.fileObj = this.fileDialog.filelist[nextCurrent]
                    this.CurrentPosition = nextCurrent

                    this.getShowFileType(this.fileObj.url)
                }
                else
                {
                    this.$message.warning(`已经是最后一个了！`)
                    return
                }
            },
            handleClose() {
                this.$emit('update:fileDialog', null)
            },
        }
    };
</script>

<style scoped lang="scss">
.dialog-file{
    min-height: 500px;
    .previous-file{width: 50px;margin-right: 10px; background-color: #F7F8FA;line-height: 650px;}
    .next-file{width: 50px;margin-left: 10px; background-color: #F7F8FA;line-height: 650px;}
    .show-file{
        width: calc(100% - 120px);height: 700px;
        text-align: center;
    line-height: 650px;
        img{max-height: 100%; max-width: 100%;}
    }
    
}
</style>