<template>
  <div v-loading="loading" class="preview-wrapper">
    <el-tabs tab-position="right" type="card">
      <el-tab-pane v-for="file in fileList" :key="file.Id" :label="file.FileName">

        <iframe
          v-if="file.Type.indexOf('jpg') !== -1 || file.Type.indexOf('png') !== -1"
          frameborder="0"
          :src="file.FullFilePath"
          width="100%"
          height="100%"
        />
        <!-- <div v-else-if="file.Type.indexOf('pdf') !== -1" class="embedbox" style="width:100%;height:100%" @contextmenu.native.stop.prevent="handlePaste($event)">
          <embed id="embed" ref="embed" :src="`/api/${file.FullFilePath}`" type="" style="width: 100%; height: 100%" @contextmenu.native.stop.prevent="handlePaste($event)">
          <div class="toolbox" />
        </div> -->
        <!-- <embed v-else-if="file.Type.indexOf('pdf') !== -1" :src="file.FullFilePath" style="width: 100%; height: 100%"> -->
        <!-- <iframe v-else-if="file.Type.indexOf('pdf') !== -1" :src="file.FullFilePath+'#toolbar=0'" width="100%" height="100%" frameborder="0" /> -->
        <!-- <iframe v-else-if="file.Type.indexOf('pdf') !== -1" :src="`/api/${file.FullFilePath}`" width="100%" height="100%" frameborder="0" /> -->
        <iframe v-else-if="file.Type.indexOf('pdf') !== -1" :src="`/static/pdfjs/web/viewer.html?file=${file.FullFilePath}`" width="100%" height="100%" frameborder="0" />
        <videoPlayer v-else-if="!~~file.Type.indexOf('MP4')" :video-src="file.FullFilePath" style="width: 100%;height: 100%;" />
        <div v-else>
          {{ $t('common:message:downloadFile') }}
          <el-link type="primary" @click="downLoadFile(file.FullFilePath)">{{ $t('common:button:download') }}</el-link>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getNoneDicomStudyFileList } from '@/api/trials'
import videoPlayer from '@/components/videoPlayer'

export default {
  name: 'PreviewFiles',
  components: { videoPlayer },
  props: {
    noneDicomId: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      default() { return {} }
    }
  },
  data() {
    return {
      fileType: '',
      fileUrl: '',
      loading: false,
      fileList: []
    }
  },
  mounted() {
    this.getFileList()
  },
  methods: {
    handlePaste(event) {
      event.preventDefault()
      return false
    },
    getFileList() {
      this.loading = true
      getNoneDicomStudyFileList(this.noneDicomId).then(res => {
        this.fileList = res.Result
        this.fileList.forEach(file => {
          const fileName = file.FileName
          file.Type = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
        })
        if (this.data.VideoName) {
          this.fileList.push({ FileName: this.data.VideoName, FullFilePath: this.data.VideoUrl, Type: 'MP4' })
        }
        this.loading = false

        setTimeout(() => {
          document.getElementById('embed').contentDocument.oncontextmenu = function() {
            return false
          }
        }, 200)
      }).catch(() => { this.loading = false })
    },
    downLoadFile(filePath) {
      if (!filePath) return
      window.open(filePath, '_blank')
    }
  }
}
</script>
<style lang="scss">
.preview-wrapper{
  height: 100%;
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }
  .el-tabs{
    display: flex;
    flex-direction: row !important;
    width: 100%;
    height: 100%;
    .el-tabs__header{
      margin-right: 10px !important;
      height: 100% !important;
      width: 300px;
      border: 2px solid #E4E7ED;
     overflow: auto;
    }
    .el-tabs__content{
      flex: 1;
      height: 100%;
      .el-tab-pane{
        height: 100%;
      }
    }
  }
  .embedbox{
    // transform: translate(30px,-50px);
    position: relative;
    width: 100%;
    height: 100%;
    .toolbox{
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
      height: 50px;
      background-color: #323639;
    }
  }

}
</style>
