<template>
    <div class="height_100">
        <div class="header">
            <div style="color:black">{{ FileName }}</div>
            <div>
                <el-link style="font-size: 16px" @click="downLoadFile"><i class="fa el-icon-download"></i><span style="margin-left:10px">下载</span></el-link>
            </div>
        </div>
        <div style="display:flex;justify-content: center;height: calc(100% - 30px);">
            <div v-if="isPicture == 0"  v-loading="loadLoading" style="width:100%">
                <iframe id="checkIframe" :src="FileUrl" frameborder="0" width="100%" :height="height"></iframe>
            </div>
            <el-image v-else :src="FileUrl" width="100%" :preview-src-list="srcList"></el-image>
        </div>
        
    </div>
</template>
<script>
import { downLoad2 } from '@/utils'
export default {
    data() {
        return {
            loadLoading:true,
            FileName:'',
            height:document.documentElement.clientHeight - 200,
            srcList:[],
        }
    },
    computed:{
        row(){
            return JSON.parse(this.$route.query.row);
        },
        FileUrl(){
            return this.$route.query.FileUrl
        },
        isPicture(){
            return this.$route.query.isPicture
        },
        reportId(){
            return this.$route.query.reportId
        }
    },
    mounted(){
        // this.FileName = this.row.name?this.row.name+'.'+this.row.suffix:this.row.fileName
      this.FileName = this.row.originalName
        if(this.isPicture == 1){
            this.srcList = [this.FileUrl]
        }else{
            var that = this
            this.$nextTick(()=>{
                var a = document.getElementById('checkIframe')
                a.onload = function() {
                    that.loadLoading = false
                };
                if(a.contentDocument.readyState == 'complete'){
                    that.loadLoading = false
                }
            })
        }
        
    },
  methods: {
    downLoadFile(){ 
        var href = ''
        href =  this.$commonJS.checkViewer(this.row.guid)
        const anchor = document.createElement('a');
        const fileName = 'download';
        if ('download' in anchor) {
          anchor.href = href;
          anchor.setAttribute("download", fileName);
          anchor.className = "download-js-link";
          anchor.innerHTML = "downloading...";
          anchor.style.display = "none";
          document.body.appendChild(anchor);
          setTimeout(function () {
            anchor.click();
            document.body.removeChild(anchor);
          }, 66);
          return true;
        }
    },
      

    },
}
</script>
<style lang="scss" scoped>
    .header{
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>