<template>
  <div
    class="book-reader"
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
  >
    <div class="magazine-viewport">
      <div ref="magazine" class="magazine">
        <div
          v-for="(page, index) in processedPages"
          :key="index"
          :class="[
            'page',
            `p${index + 1}`,
            {
              hard: !page.isWide && index % 2 === 0,
              odd: !page.isWide && index % 2 !== 0,
              even: !page.isWide && index % 2 === 1,
              mobile: isMobile,
            },
          ]"
        >
          <img
            :data-page-index="index"
            :src="page.src"
            :alt="`第 ${page.page_num} 页`"
            @error="handleImageError(index)"
            :class="['page-image', { 'wide-image': page.isWide }]"
          />

          <!-- 添加小图叠加层 -->
          <div
            v-if="page.images && page.images.length > 0"
            class="small-images-overlay"
          >
            <div
              v-for="(smallImage, imgIndex) in page.images"
              :key="imgIndex"
              class="small-image-container"
              :style="{
                left: `${smallImage.position.x1 * 100}%`,
                top: `${smallImage.position.y1 * 100}%`,
                width: `${
                  (smallImage.position.x2 - smallImage.position.x1) * 100
                }%`,
                height: `${
                  (smallImage.position.y2 - smallImage.position.y1) * 100
                }%`,
              }"
              @click="handleSmallImageClick(smallImage, page.page_num)"
            >
              <!-- <img :src="smallImage.url" :alt="`小图 ${imgIndex + 1}`" class="small-image" /> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div v-if="showExitMessage" class="exit-message">按 ESC 键退出阅读</div> -->

    <!-- 替换为 vue-easy-lightbox 预览组件 -->
    <vue-easy-lightbox
      :visible="showViewer"
      :imgs="previewImages"
      :index="currentImageIndex"
      @hide="showViewer = false"
    />

    <!-- <div class="mobile-gesture-hint" v-if="isMobile">左右滑动切换页面</div> -->

    <!-- Replace directory modal with Element Plus dialog -->
    <Guide ref="guideRef" :bookmarks="bookmarks" @goToPage="goToPage"></Guide>
  </div>
  <div class="footer">
    <el-row :gutter="10" class="tab-bar">
      <el-col :class="['left', { isMobile }]" :span="isMobile ? 24 : 8">
        <svg-icon name="menu" size="20" @click="showGuide"></svg-icon>
        <!-- <svg-icon name="list" size="20" @click="showGuide"></svg-icon> -->
        <svg-icon name="zoom-in" size="20" @click="zoomOut"></svg-icon>
        <svg-icon name="zoom-out" size="20" @click="zoomIn"></svg-icon>
        <!-- <svg-icon name="volumn" size="20"></svg-icon> -->
        <!-- 修改音量图标部分 -->
        <svg-icon
          :name="isMuted ? 'volume-mute' : 'volume-high'"
          size="20"
          @click="toggleMute"
        />
      </el-col>
      <el-col class="center" :span="8" v-if="!isMobile">
        <svg-icon name="to-first" size="30" @click="toFirst"></svg-icon>
        <svg-icon name="to-left" size="22" @click="previous"></svg-icon>
        <div class="page-count">第{{ currentPage }}页</div>
        <svg-icon name="to-right" size="22" @click="next"></svg-icon>
        <svg-icon name="to-end" size="30" @clicl="toEnd"></svg-icon>
      </el-col>
      <el-col class="right" :span="8">
        <!-- <svg-icon name="download" size="20"></svg-icon> -->
        <!-- <svg-icon name="fullscreen" size="20"></svg-icon> -->
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import $ from "jquery";
import "turn.js";
// import * as 'turn' from '/public/js/turn'
import { ref, onMounted, onUnmounted, watch, nextTick, computed } from "vue";
import VueEasyLightbox from "vue-easy-lightbox";
import Guide from "./guide.vue";
import { showImagePreview } from "vant";
import audioFlip from "@/assets/audio/flip.mp3";
const props = defineProps({
  pages: {
    type: Array,
    default: () => [],
    required: true,
  },
  bookmarks: {
    type: Array,
    default: () => [],
  },
});

const magazine = ref(null);
const loading = ref(true);
const showExitMessage = ref(false);
const zoomLevel = ref(1);
const isInitialized = ref(false);
const imageObserver = ref(null);
const loadingQueue = ref(new Set());
const maxConcurrentLoads = 5;
const imageCache = ref(new Map());
const loadingTimeouts = ref(new Map());
const isMobile = ref(false);
const touchStartX = ref(0);
const touchStartY = ref(0);

// 修改预览相关的状态
const showViewer = ref(false);
const currentImageIndex = ref(0);
const previewImages = ref([]);

// 将 processedPages 改为普通数据属性
const processedPages = ref([]);

// Add new refs for sound and directory
const pageTurnSound = ref(null);
const audioInitialized = ref(false);
const directoryImages = ref([]);
const guideRef = ref(null);

const currentPage = ref(0);
const isMuted = ref(false); // 默认不静音

// 检测是否为移动设备
const checkMobile = () => {
  isMobile.value =
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    );
};

// 处理触摸事件
const handleTouchStart = (e) => {
  if (!isMobile.value) return;
  touchStartX.value = e.touches[0].clientX;
  touchStartY.value = e.touches[0].clientY;
};

const handleTouchEnd = (e) => {
  if (!isMobile.value) return;
  const touchEndX = e.changedTouches[0].clientX;
  const touchEndY = e.changedTouches[0].clientY;
  const deltaX = touchEndX - touchStartX.value;
  const deltaY = touchEndY - touchStartY.value;

  // 如果水平滑动距离大于垂直滑动距离，且大于50px，则触发翻页
  if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
    if (deltaX > 0) {
      previous();
    } else {
      next();
    }
  }
};

// 修改处理页面的函数，只处理必要的属性
const processPages = (pages) => {
  return pages.map((item, index) => ({
    src: "", // 初始不设置src
    originalIndex: index,
    page_num: item.page_num,
    images: item.images || [],
    isWide: false, // 初始设置为false
    isLoaded: false,
    url: item.page_url, // 保存原始URL
  }));
};

// 修改图片加载函数
const loadImage = async (pageIndex) => {
  const page = processedPages.value[pageIndex];
  if (!page || page.isLoaded) return true;

  const src = page.url;
  if (imageCache.value.has(src)) {
    page.isLoaded = true;
    page.src = src;
    return true;
  }

  if (loadingQueue.value.size >= maxConcurrentLoads) {
    await new Promise((resolve) => setTimeout(resolve, 50));
    return loadImage(pageIndex);
  }

  loadingQueue.value.add(pageIndex);
  const timeoutId = setTimeout(() => {
    loadingQueue.value.delete(pageIndex);
    loadingTimeouts.value.delete(pageIndex);
  }, 5000);
  loadingTimeouts.value.set(pageIndex, timeoutId);

  try {
    const img = new Image();
    await new Promise((resolve, reject) => {
      img.onload = () => {
        clearTimeout(timeoutId);
        loadingTimeouts.value.delete(pageIndex);
        imageCache.value.set(src, true);
        page.isLoaded = true;
        page.src = src;
        resolve();
      };
      img.onerror = () => {
        clearTimeout(timeoutId);
        loadingTimeouts.value.delete(pageIndex);
        reject(new Error("Image load failed"));
      };
      img.src = src;
    });
    return true;
  } catch (error) {
    return false;
  } finally {
    loadingQueue.value.delete(pageIndex);
  }
};

// 修改加载可见页面的函数
const loadVisiblePages = async (currentPage) => {
  if (!magazine.value) return;

  const $magazine = $(magazine.value);
  const totalPages = $magazine.turn("pages");

  // 只加载当前页和下一页
  const startPage = currentPage;
  const endPage = Math.min(totalPages, currentPage + 1);

  const loadTasks = [];
  for (let i = startPage; i <= endPage; i++) {
    const pageIndex = i - 1;
    if (
      pageIndex >= 0 &&
      pageIndex < processedPages.value.length &&
      !processedPages.value[pageIndex].isLoaded
    ) {
      loadTasks.push(loadImage(pageIndex));
    }
  }

  try {
    await Promise.all(loadTasks);
  } catch (error) {
    console.error("加载页面失败:", error);
  }
};

// 修改初始化函数
const initBook = async () => {
  if (!magazine.value || !processedPages.value.length) return;

  destroyTurn();
  checkMobile();

  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  // 移动端使用不同的尺寸计算
  let pageWidth, pageHeight;
  if (isMobile.value) {
    // 移动端：宽度等于设备宽度减去边距
    pageWidth = viewportWidth - 20; // 左右各留10px边距
    // 高度按比例计算（假设标准比例为 4:3）
    pageHeight = (pageWidth * 4) / 3;
    // 确保高度不超过视口高度
    if (pageHeight > viewportHeight - 100) {
      // 上下各留50px边距
      pageHeight = viewportHeight - 92;
      // 重新计算宽度以保持比例
      pageWidth = (pageHeight * 3) / 4;
    }
  } else {
    // 桌面端保持原有逻辑
    pageWidth = Math.min(600, viewportWidth / 2 - 50);
    pageHeight = Math.min(800, viewportHeight - 100);
  }

  await nextTick();

  try {
    const $magazine = $(magazine.value);
    const $viewport = $(".magazine-viewport");

    $viewport.css({
      overflow: "hidden",
      position: "relative",
      width: "100%",
      height: "100%",
    });

    $magazine.children().each(function () {
      const $page = $(this);
      $page.css({
        position: "absolute",
        overflow: "hidden",
        width: pageWidth,
        height: pageHeight,
      });

      const $img = $page.find("img");
      if ($img.length) {
        $img.css({
          width: "100%",
          height: "100%",
          objectFit: "contain",
        });
      }
    });

    // 移动端使用单页显示
    $magazine.turn({
      width: isMobile.value ? pageWidth : pageWidth * 2,
      height: pageHeight,
      display: isMobile.value ? "single" : "double",
      acceleration: false,
      gradients: true,
      elevation: 50,
      duration: 800,
      autoCenter: true,
      turnCorners: "bl,br",
      page: 1,
      when: {
        turning: async (event, page) => {
          loading.value = true;
          await loadVisiblePages(page);
        },
        turned: async (event, page) => {
          currentPage.value = page; // 更新当前页码
          await loadVisiblePages(page);
          loading.value = false;
          // 添加这行 - 在手动翻页时播放声音
          playPageTurnSound().catch(() => {});
        },
      },
    });

    isInitialized.value = true;
    await loadVisiblePages(1);
  } catch (error) {
    console.error("Turn.js initialization error:", error);
  }
};
// 修改加载图片函数
const loadImages = async () => {
  loading.value = true;
  try {
    await initBook();
  } catch (error) {
    console.error("加载图片失败:", error);
  } finally {
    loading.value = false;
  }
};

// 监听 props.pages 的变化
watch(
  () => props.pages,
  (newPages) => {
    if (newPages && newPages.length > 0) {
      processedPages.value = processPages(newPages);
      loadImages();
    }
  },
  { immediate: true }
);

const destroyTurn = () => {
  if (magazine.value && isInitialized.value) {
    try {
      const $magazine = $(magazine.value);
      // 移除所有 turn.js 相关的事件和数据
      $magazine.off(".turn");
      $magazine.removeData("turn");
      isInitialized.value = false;
    } catch (error) {
      console.error("Error destroying turn.js:", error);
    }
  }
};

// 初始化 Intersection Observer

// 修改图片错误处理函数
const handleImageError = async (index) => {
  // 清除超时
  if (loadingTimeouts.value.has(index)) {
    clearTimeout(loadingTimeouts.value.get(index));
    loadingTimeouts.value.delete(index);
  }

  // 尝试重新加载
  const retryCount = 3;
  for (let i = 0; i < retryCount; i++) {
    try {
      const success = await loadImage(index);
      if (success) {
        return;
      }
    } catch (error) {
      // 忽略错误
    }
    // 递增重试延迟
    const delay = 1000 * (i + 1);
    await new Promise((resolve) => setTimeout(resolve, delay));
  }

  // 如果所有重试都失败，使用占位图
  const $img = $(magazine.value).find(`.p${index + 1} img`);
  if ($img.length) {
    $img[0].src =
      "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2YwZjBmMCIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiM5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7lvIDlp4vmlbDmja7lupM8L3RleHQ+PC9zdmc+";
  }
};

const next = () => {
  if (magazine.value && isInitialized.value) {
    const $magazine = $(magazine.value);
    const currentPage = $magazine.turn("page");
    const nextPage = currentPage + 1;

    // 预加载下一页
    loadVisiblePages(nextPage);

    // 延迟执行翻页，确保图片已加载
    setTimeout(() => {
      $magazine.turn("next", { duration: 1500 });
    }, 100);
  }
};

const previous = () => {
  if (magazine.value && isInitialized.value) {
    const $magazine = $(magazine.value);
    const currentPage = $magazine.turn("page");
    const prevPage = currentPage - 1;

    // 预加载上一页
    loadVisiblePages(prevPage);

    // 延迟执行翻页，确保图片已加载
    setTimeout(() => {
      $magazine.turn("previous", { duration: 1500 });
    }, 100);
  }
};

const toFirst = () => {
  const firstPage = props.pages[0].page;
  $magazine.turn("page", firstPage);
};

const toEnd = () => {
  const endPage = props.pages[props.pages.length - 1].page;
  $magazine.turn("page", endPage);
};

const zoomIn = () => {
  zoomLevel.value = Math.min(zoomLevel.value + 0.2, 2);
  updateZoom();
};

const zoomOut = () => {
  zoomLevel.value = Math.max(zoomLevel.value - 0.2, 0.5);
  updateZoom();
};

const updateZoom = () => {
  if (magazine.value && isInitialized.value) {
    const $magazine = $(magazine.value);
    const currentPage = $magazine.turn("page");

    // 保存当前可见页面的图片状态
    const visiblePages = [];
    const totalPages = $magazine.turn("pages");
    const startPage = Math.max(1, currentPage - 2);
    const endPage = Math.min(totalPages, currentPage + 2);

    for (let i = startPage; i <= endPage; i++) {
      const $page = $magazine.find(`.p${i}`);
      const $img = $page.find("img");
      if ($img.length) {
        visiblePages.push({
          page: i,
          src: $img[0].src,
          isLoaded: $img[0].complete,
        });
      }
    }

    // 计算新的尺寸
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;
    const baseWidth = Math.min(600, viewportWidth / 2 - 50);
    const baseHeight = Math.min(800, viewportHeight - 100);

    // 应用缩放
    const scaledWidth = baseWidth * zoomLevel.value;
    const scaledHeight = baseHeight * zoomLevel.value;

    // 直接更新 turn.js 尺寸
    $magazine.turn("size", scaledWidth * 2, scaledHeight);

    // 更新页面尺寸
    $magazine.children().each(function () {
      const $page = $(this);
      $page.css({
        width: scaledWidth,
        height: scaledHeight,
      });
    });

    // 恢复已加载的图片
    visiblePages.forEach((page) => {
      const $page = $magazine.find(`.p${page.page}`);
      const $img = $page.find("img");
      if ($img.length && page.isLoaded) {
        $img[0].src = page.src;
      }
    });

    // 更新视口样式
    const $viewport = $(".magazine-viewport");
    $viewport.css({
      width: "100%",
      height: "100%",
      overflow: "auto",
    });
  }
};

const handleKeyDown = (e) => {
  switch (e.key) {
    case "ArrowRight":
      next();
      break;
    case "ArrowLeft":
      previous();
      break;
    case "Escape":
      showExitMessage.value = true;
      setTimeout(() => {
        showExitMessage.value = false;
      }, 2000);
      break;
  }
};

const handleResize = async () => {
  if (magazine.value && isInitialized.value) {
    try {
      const $magazine = $(magazine.value);
      const currentPage = $magazine.turn("page");
      const currentZoom = zoomLevel.value;

      // 保存当前可见页面的图片状态
      const visiblePages = [];
      const totalPages = $magazine.turn("pages");
      const startPage = Math.max(1, currentPage - 2);
      const endPage = Math.min(totalPages, currentPage + 2);

      for (let i = startPage; i <= endPage; i++) {
        const $page = $magazine.find(`.p${i}`);
        const $img = $page.find("img");
        if ($img.length) {
          visiblePages.push({
            page: i,
            src: $img[0].src,
            isLoaded: $img[0].complete,
          });
        }
      }

      // 计算新的尺寸
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;
      const baseWidth = Math.min(600, viewportWidth / 2 - 50);
      const baseHeight = Math.min(800, viewportHeight - 100);

      // 应用缩放
      const scaledWidth = baseWidth * currentZoom;
      const scaledHeight = baseHeight * currentZoom;

      // 直接更新 turn.js 尺寸
      $magazine.turn("size", scaledWidth * 2, scaledHeight);

      // 更新页面尺寸
      $magazine.children().each(function () {
        const $page = $(this);
        $page.css({
          width: scaledWidth,
          height: scaledHeight,
        });
      });

      // 恢复已加载的图片
      visiblePages.forEach((page) => {
        const $page = $magazine.find(`.p${page.page}`);
        const $img = $page.find("img");
        if ($img.length && page.isLoaded) {
          $img[0].src = page.src;
        }
      });

      // 更新视口样式
      const $viewport = $(".magazine-viewport");
      $viewport.css({
        width: "100%",
        height: "100%",
        overflow: "auto",
      });
    } catch (error) {
      console.error("Error handling resize:", error);
    }
  }
};

const initAudio = () => {
  try {
    pageTurnSound.value = new Audio(audioFlip);
    pageTurnSound.value.volume = 0.5;
    pageTurnSound.value.preload = "auto";
    pageTurnSound.value.muted = isMuted.value; // 设置初始静音状态

    pageTurnSound.value.addEventListener("canplaythrough", () => {
      audioInitialized.value = true;
    });

    pageTurnSound.value.addEventListener("error", () => {
      console.error("Audio loading failed");
    });
  } catch (error) {
    console.error("Audio initialization error:", error);
  }
};
// 添加静音切换函数
const toggleMute = () => {
  isMuted.value = !isMuted.value;
  if (pageTurnSound.value) {
    pageTurnSound.value.muted = isMuted.value;
  }

  // 如果需要本地存储静音状态，可以在这里添加
  localStorage.setItem("bookReaderMuted", isMuted.value);
};

// 添加防抖处理
let resizeTimeout;
window.addEventListener("resize", () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    handleResize();
  }, 250);
});

onMounted(async () => {
  // 从本地存储读取静音状态
  const savedMuted = localStorage.getItem("bookReaderMuted");
  if (savedMuted !== null) {
    isMuted.value = savedMuted === "true";
  }
  await loadImages();
  initAudio();
  window.addEventListener("keydown", handleKeyDown);
  window.addEventListener("resize", handleResize);
  // Load directory images
  loadDirectoryImages();
});

onUnmounted(() => {
  // 清除所有超时
  loadingTimeouts.value.forEach((timeoutId) => clearTimeout(timeoutId));
  loadingTimeouts.value.clear();
  imageCache.value.clear();
  loadingQueue.value.clear();

  if (imageObserver.value) {
    imageObserver.value.disconnect();
  }
  destroyTurn();
  window.removeEventListener("keydown", handleKeyDown);
  window.removeEventListener("resize", handleResize);
});

// 修改小图点击事件处理函数
const handleSmallImageClick = (smallImage, pageNum) => {
  // 获取当前页面所有小图的URL
  const currentPage = props.pages.find((page) => page.page_num === pageNum);
  if (currentPage && currentPage.images) {
    // // 设置当前点击的图片索引
    currentImageIndex.value = currentPage.images.findIndex(
      (img) => img.url === smallImage.url
    );
    // const images = currentPage.images.map((img) => img.url);

    // showImagePreview({
    //   images,
    //   closeable: true,
    //   startPosition: currentImageIndex.value,
    // });
    previewImages.value = currentPage.images.map((img) => ({
      src: img.url,
      title: `第 ${pageNum} 页`,
    }));

    // 显示预览组件
    showViewer.value = true;
  }
};

// Add new methods for sound and directory
const playPageTurnSound = async () => {
  if (pageTurnSound.value && !isMuted.value) {
    try {
      pageTurnSound.value.currentTime = 0;
      await pageTurnSound.value.play();
    } catch (error) {
      console.log("Audio play failed:", error);
      // 可以在这里添加用户交互后解锁音频的逻辑
    }
  }
};

const generateThumbnailUrl = (url) => {
  return url.replace(/(\.[^.]+)$/, "_low$1");
};

const loadDirectoryImages = () => {
  directoryImages.value = props.pages.map((page) => ({
    src: generateThumbnailUrl(page.page_url),
    pageNum: page.page_num,
  }));
};

const goToPage = (pageNum) => {
  if (magazine.value && isInitialized.value) {
    const $magazine = $(magazine.value);
    $magazine.turn("page", pageNum);
  }
};

const showGuide = () => {
  guideRef.value.show();
};
</script>

<style scoped lang="scss">
@import "./mobile.scss";
.page {
  width: 100%;
  height: 100%;
  background-color: white; // 确保翻页时有白色背景
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.book-reader-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white; // 主容器背景

  .magazine-viewport {
    position: relative;
    overflow: hidden;
    background-color: white; // 视口背景

    .magazine {
      background-color: white; // 书本背景
    }
  }
}

.book-reader {
  width: 100vw;
  height: calc(100vh - 92px);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
  position: relative;
  background-image: url("@/assets/images/bg3.jpg");
  background-size: 100% 100%;
  touch-action: pan-y pinch-zoom;
}

.magazine-viewport {
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.magazine {
  position: relative;
  transform-origin: center center;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  will-change: transform;
  visibility: visible !important;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.magazine::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  z-index: 10;
  pointer-events: none;
}

.page {
  background-color: white;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  visibility: visible !important;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
}

.page:before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  bottom: 0;
  z-index: 10;
}

.page.odd:before {
  right: 0;
  background: linear-gradient(315deg, rgba(0, 0, 0, 0.2) 0%, transparent 50%);
}

.page.even:before {
  left: 0;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, transparent 50%);
}

.page-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  visibility: visible !important;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
}

.exit-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 1000;
}

.page.wide-page {
  width: 200% !important;
  left: 0 !important;
  z-index: 5 !important;
}

.page.wide-page.isHidden {
  display: none !important;
}

.wide-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 确保宽图页面的阴影效果 */
.page.wide-page::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 1;
}

/* 角落悬停效果 */
.page.hover::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  pointer-events: none;
  z-index: 10;
  transition: all 0.3s ease;
}

.page.hover:nth-child(odd)::before {
  right: 0;
  bottom: 0;
  background: linear-gradient(315deg, rgba(0, 0, 0, 0.2) 0%, transparent 80%);
}

.page.hover:nth-child(even)::before {
  left: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, transparent 80%);
}

/* 缩放状态样式 */
.magazine.zoomed {
  cursor: move;
}

.magazine.zoomed .page {
  pointer-events: none;
}

/* 确保 turn.js 不会修改视口样式 */
.magazine-viewport.turn-page-wrapper {
  overflow: hidden !important;
  &:last-child {
    background-color: #fff;
  }
}

.magazine-viewport.turn-page-wrapper .turn-page {
  overflow: hidden !important;
  background-color: red;
}

#magazine .turn-page {
  background-color: red;
  background-size: 100% 100%;
}
.small-images-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 允许点击穿透到下层 */
}

.small-image-container {
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.small-image-container:hover {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.small-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  /* 防止图片本身接收点击事件 */
}

.footer {
  background-color: #444;
  padding: 0 20px;
  height: 46px;
  .tab-bar {
    background-color: #444;
    color: #ccc;
    width: 100%;
    height: 100%;
    .left,
    .right,
    .center {
      display: flex;
      align-items: center;
      height: 100%;
    }
    .center {
      justify-content: center;
      .svg-icon {
        margin: 20px;
      }
    }
    .left {
      justify-content: flex-start;
      .svg-icon {
        margin-right: 20px;
      }
    }
    .isMobile {
      justify-content: center;
    }
    .right {
      justify-content: flex-end !important;
      .svg-icon {
        margin-right: 20px;
      }
    }
  }
}
</style>
