
<template>
  <div ref="middleBookRef" class="box-border flex items-center justify-center w-full h-full mx-15px overflow-hidden bg-[#f8f8f8] rounded-10px">
    <n-scrollbar
      class="w-full h-full"
      content-style="box-sizing: border-box; min-height: 100%; height: auto; display: flex; align-items: center; justify-content: center;"
    >
      <div
        v-if="currBookPage"
        class="overflow-hidden"
        :style="{ width: `calc(${newImgWidth} + ${padding * scale}px)`, height: `calc(${newImgHeight} + ${padding * scale}px)` }"
      >
        <div
          v-if="currBookPage?.bookBaseData.width"
          class="box-border flex items-center justify-center w-full h-full min-h-0 origin-top-left transform-gpu"
          :style="{ width: `calc(${newDefPDFWidth} + ${padding}px)`, height: `calc(${newDefPDFHeigth} + ${padding}px)`, transform: `scale(${scale})` }"
        >
          <img class="absolute box-border select-none" :src="currBookPage?.currBookPageData?.url || ''" :style="{ width: newDefPDFWidth, height: newDefPDFHeigth }" />
          <div
            :style="{ width: `calc(${newDefPDFWidth} + ${padding}px)`, height: `calc(${newDefPDFHeigth} + ${padding}px)`, padding: `${padding / 2}px` }"
            class="absolute top-0 left-0 box-border"
          >
            <div v-if="isShow" ref="bookContainerBoxRef" class="relative w-full h-full">
              <!-- Removed RestDraggableContainer wrapper -->
              <topic-item-module
                v-for="(topicInfo, topicInfoIndex) in currBookPage?.currBookPageData.layout"
                :key="topicInfoIndex"
                :topicInfo="topicInfo"
                :bookContainerBoxRef="bookContainerBoxRef"
                :getQuestions="() => getQuestions(topicInfo.question.type || null, topicInfo.questionId)"
                :getMenuBubbleRef="getMenuBubbleRefFun"
              ></topic-item-module>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="flex items-center justify-center h-full min-h-0">
        <n-empty description="请在目录中选择页码" class="w-240px" />
      </div>
    </n-scrollbar>
    <menu-bubble ref="menuBubbleRef"></menu-bubble>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, nextTick, watch, useTemplateRef, h } from 'vue';
  import { NScrollbar, NEmpty } from 'naive-ui';
  import TopicItemModule from './components/topic-item-module.vue';
  import { useElementSize } from '@vueuse/core';
  import type { CurrBookPageAllInfo, QuestionType, BookPageAreas, BookPageQuestion } from '@/views/template/template-detail/types';
  import { getPDFPageWidth } from '@/views/template/template-detail/pdf-util';
  import MenuBubble from './components/menu-bubble.vue';

  const props = defineProps({
    /** 当前页码信息 */
    currBookPage: { type: Object as PropType<CurrBookPageAllInfo>, default: undefined },
  });
  const bookContainerBoxRef = useTemplateRef('bookContainerBoxRef');
  const middleBookRef = useTemplateRef('middleBookRef');
  const { width } = useElementSize(middleBookRef);
  const menuBubbleRef = useTemplateRef('menuBubbleRef');

  const padding = ref(60);
  const scale = ref(1);
  const newImgWidth = ref('100%');
  const newImgHeight = ref('100%');
  const pageWidth = computed(() => getPDFPageWidth(props.currBookPage?.bookBaseData.width || 0));
  const newDefPDFWidth = computed(() => `${pageWidth.value}px`);
  const newDefPDFHeigth = ref('100%');
  const isShow = ref(false);

  onMounted(() => {
    nextTick(() => {
      isShow.value = true;
    });
  });
  watch(
    () => [props.currBookPage, width.value],
    () => {
      nextTick(() => {
        if (props.currBookPage?.currBookPageData?.url && props.currBookPage?.bookBaseData.width) {
          const scaleW = width.value / (pageWidth.value + padding.value);
          const defPDFHeigth = (props.currBookPage.bookBaseData.height! / props.currBookPage.bookBaseData.width!) * pageWidth.value;
          newDefPDFHeigth.value = `${defPDFHeigth}px`;
          scale.value = Math.min(scaleW, 1);
          newImgWidth.value = `${pageWidth.value * scale.value}px`;
          newImgHeight.value = `${defPDFHeigth * scale.value}px`;
        }
      });
    },
    { immediate: true }
  );

  function getMenuBubbleRefFun() {
    return menuBubbleRef.value;
  }

  /**
   * 得到问题信息
   * @param type 题目类型
   */
  function getQuestions(type: QuestionType | null, questionId: number): BookPageAreas | BookPageQuestion | undefined {
    if (typeof type !== 'number') {
      return undefined;
    }
    if (type >= 100 && type < 200) {
      return (props.currBookPage?.currBookPageData?.areas || []).find((item) => item.id === questionId);
    } else if (type >= 0 && type < 100) {
      return (props.currBookPage?.currBookPageData?.questions || []).find((item) => item.id === questionId);
    } else {
      return undefined;
    }
  }
</script>

<style scoped>
/* Removed SCSS, using UnoCSS classes in template */
</style>
