<script setup>
import { ref } from 'vue'
import BookReader from './components/BookReader.vue'
import FileUpload from './components/FileUpload.vue'
import { getDocumentDetail } from '@/api';
// const images = ref([])
const documentPages = ref([])
const fetchDocumentDetail = async (id) => {
  try {
    const res = await getDocumentDetail(id);
    // images.value  =res.map(item=>import.meta.env.VITE_API_BASE_URL +'/static/'+item.page_url)
    documentPages.value = res.map(item => {
      return {
        ...item,
        page_url: import.meta.env.VITE_API_BASE_URL + '/static/' + item.page_url,
        images: item.images.map(img => {
          return {
            ...img,
            url: import.meta.env.VITE_API_BASE_URL + '/static/' + img.url
          }
        })
      }
    })
  } catch (error) {
    // 错误已经被 request 拦截器处理，这里可以添加额外的错误处理逻辑
  }
};

onMounted(() => {
  fetchDocumentDetail('ececa7473dea4d3a4448c754068139fc');
})

// const handleUploadComplete = (data) => {
//   images.value = data.page_images.map(img => img.path)
// }
</script>

<template>
  <div class="app">
    <!-- <FileUpload @upload-complete="handleUploadComplete" /> -->
    <BookReader v-if="documentPages.length > 0" :pages="documentPages" showExitMessage />
    <!-- <div v-else class="empty-state">
      请上传PDF文件开始阅读
    </div> -->
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}

.app {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #666;
  text-align: center;
}
</style>
