<template>
  <!-- 圆角弹窗（底部） -->
  <van-popup
    v-model:show="showDirectory"
    round
    position="bottom"
    :style="{ height: '80%' }"
  >
    <van-nav-bar title="目录" />
    <van-list :finished="true" finished-text="没有更多了">
      <BookMarks :bookmarks="bookmarks" @goToPage="goToPage" />
    </van-list>
  </van-popup>
</template>
<script setup>
import BookMarks from "./bookMarks.vue";
const $emit = defineEmits(["goToPage"]);
const props = defineProps({
  bookmarks: {
    type: Array,
    default: () => [],
  },
  currentPage: {
    type: Number,
    default: 0,
  },
});
const showDirectory = ref(false);
const thumbnailGrid = ref(null); // 获取滚动容器的引用
const showBackTop = ref(false); // 控制按钮显示

const thumbnailRefs = ref([]); // 存储所有缩略图的DOM引用
const defaultProps = ref({
  children: "children",
  label: "title",
});

const setThumbnailRef = (el) => {
  if (el) {
    thumbnailRefs.value.push(el);
  }
};

function show() {
  showDirectory.value = true;
  nextTick(() => {
    scrollToCurrentPage();
  });
}

function scrollToCurrentPage() {
  if (
    props.currentPage > 0 &&
    thumbnailGrid.value &&
    thumbnailRefs.value.length > 0
  ) {
    // 找到当前页码对应的缩略图索引

    const currentIndex = props.directoryImages.findIndex(
      (img) => img.pageNum === props.currentPage
    );

    if (currentIndex >= 0) {
      const thumbnailElement = thumbnailRefs.value[currentIndex + 2];
      if (thumbnailElement) {
        // 计算滚动位置
        const gridRect = thumbnailGrid.value.getBoundingClientRect();
        const thumbRect = thumbnailElement.getBoundingClientRect();
        const scrollTop =
          thumbRect.top - gridRect.top + thumbnailGrid.value.scrollTop;

        // 平滑滚动到该位置
        thumbnailGrid.value.scrollTo({
          top: scrollTop - 50, // 减去50px让缩略图不是紧贴顶部
          behavior: "smooth",
        });
      }
    }
  }
}

function goToPage(pageNum) {
  $emit("goToPage", pageNum);
  showDirectory.value = false;
}

// 返回顶部函数
function scrollToTop() {
  if (thumbnailGrid.value) {
    thumbnailGrid.value.scrollTo({
      top: 0,
      behavior: "smooth", // 平滑滚动
    });
  }
}

// 监听滚动
function handleScroll() {
  if (thumbnailGrid.value) {
    showBackTop.value = thumbnailGrid.value.scrollTop > 100; // 滚动超过 100px 时显示
  }
}

function handleNodeClick(node) {
  console.log(node);
  goToPage(node.page);
}

defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.thumbnail-grid {
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* 添加行间距和列间距 */
  position: relative;
}

.content {
  .back-top {
    position: absolute;
    bottom: 40px;
    right: 40px;
  }
}

.thumbnail-item {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s;
  overflow: hidden;
  width: calc(33.333% - 10px);
  /* 调整宽度，减去间距 */
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid transparent;

  &:hover {
    border: 1px solid #000;
  }

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

  .page-number {
    font-size: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.65);
    width: 100%;
    text-align: center;
    color: #fff;
  }
}

.active {
  border: 1px solid #000;

  .page-number {
    color: var(--el-color-success);
    background-color: #fff;
  }
}

@media (max-width: 768px) {
  .thumbnail-grid {
    gap: 10px;
    /* 保持间距 */
  }

  .thumbnail-item {
    width: calc(33.333% - 10px);
    /* 保持宽度调整 */
  }
}
</style>
