<template>
  <div v-if="reviewStore.curTask" class="review-image">
    <div
      class="review-image-box"
      v-for="(item, index) in reviewStore.curTask.papers"
      :key="index"
      :style="boxStyle"
    >
      <div
        class="review-image-item"
        :data-index="index + 1"
        @scroll="onImgScroll"
      >
        <img
          :src="getFileUrl(item.pages[0].sheetUri)"
          :alt="`第${index + 1}页`"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useReviewStore } from "@/store";

import { getFileUrl } from "@/utils/tool";

defineOptions({
  name: "ReviewImage",
});

const reviewStore = useReviewStore();

const boxStyle = computed(() => {
  if (!reviewStore.curTask || !reviewStore.curTask.papers.length) return {};

  return {
    height: `${100 / reviewStore.curTask.papers.length}%`,
  };
});

let curTargetIndex = "";
function onImgScroll(e: Event) {
  e.preventDefault();

  const targetDom = e.target as HTMLElement;
  const targetIndex = targetDom.getAttribute("data-index");

  if (curTargetIndex && targetIndex !== curTargetIndex) return;

  curTargetIndex = targetIndex;
  const siblingsDoms = (
    targetDom.parentElement.parentElement as HTMLElement
  ).querySelectorAll(".review-image-item");

  siblingsDoms.forEach((elem) => {
    if (elem.getAttribute("data-index") === curTargetIndex) return;
    elem.scrollTop = targetDom.scrollTop;
  });

  setTimeout(() => {
    curTargetIndex = "";
  }, 100);
}
</script>
