<template>
  <teleport to="body">
    <div
      v-if="store.allPaperModal"
      class="common-dialog is-fullscreen all-paper-modal"
    >
      <header class="common-dialog-header">
        <div>
          <div class="common-dialog-title">全卷切换</div>
          <div class="paper-menu">
            <span
              v-for="(u, index) in urls"
              :key="index"
              :class="{ 'is-active': checkedIndex === index }"
              @click="checkedIndex = index"
            >
              {{ index + 1 }}
            </span>
          </div>
        </div>

        <a-button @click="store.allPaperModal = false">
          <template #icon> <SwapLeftOutlined /> </template>
          返回
        </a-button>
      </header>

      <div class="common-dialog-body">
        <img :src="urls[checkedIndex]" />
      </div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { SwapLeftOutlined } from "@ant-design/icons-vue";
import { store } from "@/store/store";

const urls = $computed(() => {
  return store.currentTask?.sliceUrls ?? [];
});

let checkedIndex = $ref(0);
</script>
