<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    append-to-body
    custom-class="new-edition-dialog"
    top="5vh"
    width="85%"
    @closed="closed"
    @open="open"
  >
    <div
      v-loading="loading"
      :element-loading-text="
        `${dictionaryEscape('wjlx', fileType)}加载中，请耐心等待...`
      "
      class="preview-container"
      element-loading-background="rgba(0, 0, 0, 1)"
    >
      <template v-if="fileUrl">
        <VideoPreview
          v-if="fileType === '1'"
          :file-url="fileUrl"
          @onError="fileOnError"
          @onLoad="fileOnLoad"
        />
        <PdfPreview
          v-if="fileType === '2'"
          :file-url="fileUrl"
          @onError="fileOnError"
          @onLoad="fileOnLoad"
        />
        <ImagePreview
          v-if="fileType === '3'"
          :file-url="fileUrl"
          @onError="fileOnError"
          @onLoad="fileOnLoad"
        />
      </template>
    </div>
  </el-dialog>
</template>

<script>
import {onlinePreview} from '@/api/systemInterface'
import PdfPreview from './components/PdfPreview.vue'
import VideoPreview from './components/VideoPreview.vue'
import ImagePreview from './components/ImagePreview.vue'
import {dictionaryEscape} from '@/utils/dictionary'

export default {
  name: 'PreviewFileDialog',
  components: {ImagePreview, VideoPreview, PdfPreview},
  props: {
    value: {
      type: Boolean,
      default: false
    },
    fileInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      fileUrl: '',
      loading: true
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    dialogTitle() {
      return `文件预览（${this.fileInfo?.fileName || ''}）`
    },
    fileId() {
      return this.fileInfo?.id || ''
    },
    fileType() {
      return this.fileInfo?.fileType || ''
    }
  },
  methods: {
    dictionaryEscape,
    // 打开弹层
    open() {
      if (this.fileId) {
        if (['1', '2', '3'].includes(this.fileType)) {
          this.getFileUrl()
        } else {
          this.$message.error('文件格式错误，请联系管理员解决')
        }
      }
    },

    // 关闭弹层后
    closed() {
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this))
    },

    // 预览文件
    async getFileUrl() {
      try {
        const {
          mediaUrl = '',
          pdfUrl = '',
          currentUrl = ''
        } = await onlinePreview(this.fileId)
        if (mediaUrl || pdfUrl || currentUrl) {
          this.fileUrl = mediaUrl || pdfUrl || currentUrl
        } else {
          this.$message.error('文件加载错误，请联系管理员解决')
        }
      } catch {
        this.$message.error('文件加载错误，请联系管理员解决')
      }
    },

    // 文件加载完毕
    fileOnLoad() {
      this.loading = false
    },

    // 文件加载失败
    fileOnError() {
      this.$message.error('文件解析错误，请联系管理员解决')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .new-edition-dialog {
  .el-dialog__body {
    max-height: 80vh !important;

    .preview-container {
      height: 80vh !important;
    }
  }
}
</style>
