<template>
  <div class="preview-wrapper">
    <div class="left-wrapper">
      <div v-for="item in nonDicomStudyList" :key="item.Id">
        <div class="study-info">
          <h4>{{ `${item.CodeView} (Modality: ${item.Modality})` }}</h4>
        </div>
        <ul>
          <li v-for="file in item.NoneDicomStudyFileList" :key="file.Id">
            <el-button plain style="width:100%;text-align:left;" @click="preview(file)">{{ file.FileName }}</el-button>
          </li>
        </ul>
      </div>
    </div>
    <div class="right-wrapper">
      <iframe
        v-if="fileInfo.currentFileType === 0"
        frameborder="0"
        :src="fileInfo.currentFilePath"
        width="100%"
        height="100%"
      />
      <!-- <embed v-else-if="fileInfo.currentFileType === 1" :src="fileInfo.currentFilePath" style="width: 100%; height: 100%"> -->
      <!-- <iframe v-else-if="fileInfo.currentFileType === 1" :src="fileInfo.currentFilePath+'#toolbar=0'" width="100%" height="100%" frameborder="0" /> -->
      <iframe v-else-if="fileInfo.currentFileType === 1" :src="`/static/pdfjs/web/viewer.html?file=${OSSclientConfig.basePath}${fileInfo.currentFilePath}`" width="100%" height="100%" frameborder="0" />
      <videoPlayer v-else-if="fileInfo.currentFileType === 3" :video-src="fileInfo.currentFilePath" style="width: 100%;height: 100%;" />
      <div v-else-if="fileInfo.currentFileType === 2">
        {{ $t('common:message:downloadFile') }}
        <el-link type="primary" @click="downLoadFile(fileInfo.currentFilePath)">
          {{ $t('common:button:download') }}
        </el-link>
      </div>
    </div>
  </div>
</template>
<script>
import videoPlayer from '@/components/videoPlayer'

export default {
  name: 'PreviewFiles',
  components: { videoPlayer },
  props: {
    nonDicomStudyList: {
      type: Array,
      default() { return [] }
    }
  },
  data() {
    return {
      fileInfo: {
        currentFilePath: '',
        currentFileType: null // 0:图片；1：pdf; 2:其他
      },
      isShow: false
    }
  },
  mounted() {
    this.initPage()
  },
  methods: {
    initPage() {
      this.nonDicomStudyList.forEach(v => {
        if (v.VideoName) {
          v.NoneDicomStudyFileList.push({
            FullFilePath: v.VideoUrl,
            FileName: v.VideoName
          })
        }
      })
      const study = this.nonDicomStudyList.find(item => item.NoneDicomStudyFileList.length > 0)
      if (study !== undefined) {
        this.preview(study.NoneDicomStudyFileList[0])
      }
    },
    downLoadFile(filePath) {
      if (!filePath) return
      window.open(filePath, '_blank')
    },
    preview(file) {
      this.$set(this.fileInfo, 'currentFileType', this.getFileType(file.FileName))
      this.$set(this.fileInfo, 'currentFilePath', file.FullFilePath)
      console.log(this.fileInfo)
    },
    getFileType(fileName) {
      if (!fileName) return null
      const fn = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
      if (fn.indexOf('jpg') !== -1 || fn.indexOf('png') !== -1) {
        return 0
      } else if (fn.indexOf('pdf') !== -1) {
        return 1
      } else if (!~fn.indexOf('mp4')) {
        return 3
      } else {
        return 2
      }
    }
  }
}
</script>
<style lang="scss">
.preview-wrapper{
  height: 100%;
  display: flex;
  flex-direction: row !important;
  width: 100%;
  height: 100%;
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }
  .left-wrapper{
    margin-right: 10px;
    height: 100%;
    width: 300px;
    border: 1px solid #ddd;
    overflow: auto;
    .study-info{
      background-color: #eee;
      padding: 2px;
      h4{
        padding-left: 5px;
      }
    }
    ul{
      list-style: none;
      margin: 0px;
      padding: 2px;
      border: 1px solid #ddd;
      li{
        padding: 2px 0px;
      }
    }
  }
  .right-wrapper{
    flex: 1;
    height: 100%;
    padding: 5px;
    border: 1px solid #ddd;
  }

}
</style>
