<!-- 体系文件流 -->
<script name="FileStream" lang="ts" setup>
import { ElMessage } from 'element-plus'
import VuePdfEmbed from 'vue-pdf-embed'
// import * as pdfjsLib from 'pdfjs-dist'
import { getPhotoUrl } from '@/api/file'

// 从路由中传过来的参数
const filename = ref<string>('')
const title = ref<string>('')

const route = useRoute()
const router = useRouter()

const loading = ref<boolean>(true)
const pdfUrl = ref('') // 打印文件url
const imageUrl = ref('')
const isPdf = ref<boolean>(false)
const isImage = ref<boolean>(false)

// 逻辑
// 关闭
const resetForm = () => {
  sessionStorage.removeItem('fileInfo')
  router.go(-1)
}

const initDialog = (params: any) => {
  // 从路由中获取参数
  title.value = params.title !== undefined ? `${params.title} - ` : ''

  const fileInfo = JSON.parse(sessionStorage.getItem('fileInfo')!)
  title.value += fileInfo.fileName
  filename.value = fileInfo.file

  if (filename.value.lastIndexOf('.pdf') > 0) {
    isPdf.value = true
  }
  if (filename.value.lastIndexOf('.png') > 0 || filename.value.lastIndexOf('.jpg') > 0) {
    isImage.value = true
  }

  getPhotoUrl(filename.value).then((res) => {
    if (isPdf.value === true) {
      pdfUrl.value = res.data
      // pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
    }
    else if (isImage.value === true) {
      imageUrl.value = res.data
    }

    loading.value = false
  }).catch(() => {
    loading.value = false
  })

  ElMessage.success(filename.value)
}

onMounted(() => {
  initDialog(route.query)
})
</script>

<template>
  <app-container>
    <detail-page :title="title">
      <div v-loading="loading">
        <vue-pdf-embed v-if="isPdf" v-show="!loading" ref="pdf" :source="pdfUrl" class="vue-pdf-embed" />
      </div>

      <el-image v-if="isImage" :src="imageUrl" fit="contain" :preview-src-list="[imageUrl]">
        <template #error>
          <div class="image-slot">
            <el-icon>
              <svg-icon name="image-load-fail" />
            </el-icon>
          </div>
        </template>
      </el-image>
      <template #btns>
        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>
    </detail-page>
  </app-container>
</template>