<template>
  <div class="pdf-page">
    <div v-if="isLoading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中，请稍候...</p>
    </div>
    <div v-else-if="reportData" class="pdf-content">
      <CDWBG8B4DPDF :data="reportData" />
    </div>
    <div v-else class="error-container">
      <p>未找到报告数据</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CDWBG8B4DPDF from '@/ui/CDWBG8B4D/CDWBG8B4D-PDF.vue'

const isLoading = ref(true)
const reportData = ref(null)

onMounted(async () => {
  await loadReportData()
})

const loadReportData = async () => {
  try {
    // 从 public 目录加载示例数据
    const response = await fetch('/example.json')
    const data = await response.json()
    
    if (Array.isArray(data) && data.length > 0) {
      // 查找 DWBG8B4D 的数据
      const cdwbg8b4dItem = data.find(item => 
        item.data?.apiID === 'DWBG8B4D' || item.data?.apiID === 'CDWBG8B4D'
      )
      
      if (cdwbg8b4dItem && cdwbg8b4dItem.data?.data) {
        reportData.value = cdwbg8b4dItem.data.data
      } else {
        console.warn('未找到 DWBG8B4D 数据')
      }
    }
  } catch (error) {
    console.error('加载报告数据失败:', error)
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.pdf-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf0 100%);
  padding: 32px 20px;
  display: flex;
  justify-content: center;
}

.pdf-content {
  width: 100%;
  max-width: 794px;
  background-color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  overflow: hidden;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

.loading-container p {
  color: #666;
  font-size: 16px;
}

.error-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.error-container p {
  color: #e74c3c;
  font-size: 16px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 打印样式 */
@media print {
  .pdf-page {
    padding: 0;
    background-color: #ffffff;
  }
  
  .pdf-content {
    box-shadow: none;
    max-width: 100%;
  }
}
</style>
