<!--
 * @Date: 2025-10-22 10:45:51
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-10-22 10:54:10
 * @FilePath: /mlaj/src/views/study/PdfPreviewPage.vue
 * @Description: 文件描述
-->
<template>
  <div class="pdf-preview-page">
    <PdfViewer :show="true" :url="pdfUrl" :title="pdfTitle" @onClose="handleClose" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import PdfViewer from '@/components/ui/PdfViewer.vue'

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

// 从路由查询参数获取PDF的URL和标题
const pdfUrl = computed(() => {
  const url = route.query.url || ''
  // 兼容可能存在的编码
  return typeof url === 'string' ? decodeURIComponent(url) : ''
})

const pdfTitle = computed(() => {
  const title = route.query.title || ''
  return typeof title === 'string' ? decodeURIComponent(title) : ''
})

const handleClose = () => {
  const returnId = route.query.returnId
  const openMaterials = route.query.openMaterials
  if (returnId) {
    // 使用 replace 跳回学习详情页并打开学习资料弹框，避免历史中保留PDF预览
    router.replace({ path: `/studyDetail/${returnId}`, query: { openMaterials: openMaterials || '1' } })
  } else {
    // 无返回ID时，使用 replace 导航到学习页，避免返回进入PDF预览
    router.replace({ path: '/study' })
  }
}
</script>

<style scoped>
.pdf-preview-page {
  height: 100vh;
  width: 100vw;
  background: #fff;
  display: flex;
  flex-direction: column;
}
</style>