<template>
  <div class="preview-wrapper">
    <iframe v-if="fileType.indexOf('jpg') !== -1 || fileType.indexOf('png') !== -1" frameborder="0" :src="filePath"
      width="100%" height="100%" />
    <!-- <embed v-else-if="fileType.indexOf('pdf') !== -1" :src="filePath+'#toolbar=0'" style="width: 100%; height: 100%"> -->
    <!-- <iframe v-else-if="fileType.indexOf('pdf') !== -1" :src="filePath+'#toolbar=0'" width="100%" height="100%" frameborder="0" /> -->
    <iframe v-else-if="fileType.indexOf('pdf') !== -1"
      :src="`/static/pdfjs/web/viewer.html?file=${isLocal ? window.location.origin : OSSclientConfig.basePath}${filePath}?userName=${currentUser}&COMPANY=${COMPANY}`"
      width="100%" height="100%" frameborder="0" crossorigin="anonymous" />
    <!--    <pdf-->
    <!--      v-else-if="fileType.indexOf('pdf') !== -1"-->
    <!--      :src="`/static/pdfjs/web/viewer.html?file=${filePath}`">-->
    <!--    </pdf>-->
    <video :src="`${isLocal ? window.location.origin : OSSclientConfig.basePath}${filePath}`"
      style="width: 100%;height: 99%;" autoplay controls controlsList="nodownload"
      v-else-if="fileType.indexOf('mp4') !== -1"></video>
    <iframe v-else
      :src="`/static/onlyOffice/viewer.html?url=${isLocal ? window.location.origin : OSSclientConfig.basePath}${filePath}?onlyOffice_url=${onlyOffice_url}&type=${fileType}&title=${title}&documentType=${documentType}&userName=${currentUser}`"
      width="100%" height="100%" frameborder="0" crossorigin="anonymous" />
    <!-- <div v-else>
      {{ $t('common:message:downloadFile') }}
      <el-link type="primary" @click="downLoadFile">{{ $t('common:button:download') }}</el-link>
    </div> -->
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import DOCUMENTTYPE from "@/utils/onlyOffice_type.js"
export default {
  name: 'PreviewFile',
  computed: {
    ...mapGetters(['name'])
  },
  props: {
    filePath: {
      type: String,
      required: true
    },
    fileType: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    isLocal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentUser: zzSessionStorage.getItem('userName'),
      COMPANY: process.env.VUE_APP_COMPANY_NAME,
      onlyOffice_url: process.env.VUE_APP_ONLYOFFICE_URL,
      window,
    }
  },
  computed: {
    documentType() {
      return DOCUMENTTYPE[`.${this.fileType}`]
    }
  },
  mounted() {
    // document.querySelector('iframe').attachEvent('onload', () => {
    //   document.querySelector('iframe').contentDocument.oncontextmenu = function() {
    //     console.log('本站禁止此操作')
    //     return false
    //   }
    // })
  },
  methods: {
    // 下载文件
    downLoadFile() {
      if (!this.filePath) return
      window.open(this.filePath, '_blank')
    }
  }
}
</script>
<style lang="scss">
.preview-wrapper {
  height: 100%;
  width: 100%;
  padding: 10px;

  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }

}
</style>
