<template>
  <view class="pdf-container">
    <!-- 顶部导航 -->
    <view class="pdf-header">
      <button class="back-btn" @click="onBack">
        <uni-icons type="back" size="28" color="#333"></uni-icons>
      </button>
      <text class="pdf-title">{{ title }}</text>
      <view class="empty-btn"></view> <!-- 占位，使标题居中 -->
    </view>
    
    <!-- PDF查看区域 -->
    <view class="pdf-content">
      <template v-if="isLoading">
        <view class="loading">
          <uni-loading-icon type="spin" size="40"></uni-loading-icon>
          <text class="loading-text">加载中...</text>
        </view>
      </template>
      
      <template v-else-if="errorMsg">
        <view class="error">
          <uni-icons type="error" size="40" color="#f53f3f"></uni-icons>
          <text class="error-text">{{ errorMsg }}</text>
        </view>
      </template>
      
      <template v-else>
        <web-view 
          :src="pdfUrl" 
          @message="handleMessage"
          class="web-view"
        ></web-view>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onLoad, onReady } from 'vue';
import { onBackPress } from '@dcloudio/uni-app';

// 接收参数
const title = ref('');
const url = ref('');
const isLoading = ref(true);
const errorMsg = ref('');
const pdfUrl = ref('');

// 页面加载时获取参数
onLoad((options: { title?: string; url?: string }) => {
  if (options.title) {
    title.value = decodeURIComponent(options.title);
  }
  if (options.url) {
    url.value = decodeURIComponent(options.url);
    loadPdf();
  } else {
    errorMsg.value = '未找到PDF文件';
    isLoading.value = false;
  }
});

// 加载PDF文件
const loadPdf = () => {
  // 使用PDF.js viewer加载PDF，并禁用下载功能
  // 注意：需将pdfjs的web/viewer.html放入项目的static目录
  const viewerPath = '/static/pdfjs/web/viewer.html';
  const fileUrl = `${viewerPath}?file=${encodeURIComponent(url.value)}&disableDownload=true`;
  
  // 本地PDF需要转换为网络路径
  if (url.value.startsWith('/static/')) {
    // 转换为绝对路径
    const absoluteUrl = `${location.origin}${url.value}`;
    pdfUrl.value = `${viewerPath}?file=${encodeURIComponent(absoluteUrl)}&disableDownload=true`;
  } else {
    pdfUrl.value = fileUrl;
  }
  
  isLoading.value = false;
};

// 处理web-view消息
const handleMessage = (e: any) => {
  const data = e.detail.data[0];
  if (data.action === 'error') {
    errorMsg.value = data.message || 'PDF加载失败';
    isLoading.value = false;
  }
};

// 返回按钮
const onBack = () => {
  uni.navigateBack();
};

// 监听物理返回键
onBackPress(() => {
  onBack();
  return true;
});
</script>

<style scoped>
.pdf-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #000;
}

.pdf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: transparent;
}

.pdf-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 20rpx;
}

.empty-btn {
  width: 60rpx;
  height: 60rpx;
}

.pdf-content {
  flex: 1;
  position: relative;
}

.web-view {
  width: 100%;
  height: 100%;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-text {
  color: #fff;
  font-size: 28rpx;
  margin-top: 20rpx;
}

.error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40rpx;
  text-align: center;
}

.error-text {
  color: #fff;
  font-size: 28rpx;
  margin-top: 20rpx;
}
</style>
