<template>
  <div class="slice-image">
    <div v-for="item in curStudent.papers" :key="item.id" class="image-paper">
      <div
        v-for="(page, pindex) in item.pages"
        :key="pindex"
        class="image-page"
      >
        <h3 class="image-page-title">
          {{ getPageTitle(item.number, pindex) }}
        </h3>
        <div
          v-for="(url, sindex) in page.sliceUri"
          :key="sindex"
          class="image-item"
        >
          <img :src="url" :alt="sindex + 1" />
          <div class="image-action">
            <import-btn
              upload-url="/api/admin/scan/answer/slice/update"
              :format="['jpg', 'png', 'jpeg']"
              :upload-data="curSliceInfo"
              @upload-success="updateSliceSuccess"
            >
              <a-button
                class="image-change"
                @click="onUpdateSlice(item.number, pindex, sindex)"
              >
                <template #icon><PictureFilled /></template>
              </a-button>
            </import-btn>
            <a-button
              class="image-slice"
              @click="onEditSlice(item.number, pindex, sindex)"
            >
              <template #icon><NumberOutlined /></template>
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- CutImageDialog -->
  <CutImageDialog
    ref="cutImageDialogRef"
    :sheet-url="sheetUrl"
    :slice-selection="curSliceSelection"
    @confirm="cutImageModified"
  />
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { NumberOutlined, PictureFilled } from "@ant-design/icons-vue";
import CutImageDialog from "./CutImageDialog.vue";
import { uploadSlice } from "@/ap/base";
import { getFileMD5 } from "@/utils/crypto";
import { useDataCheckStore } from "@/store";

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

const dataCheckStore = useDataCheckStore();

const curStudent = computed(() => {
  return dataCheckStore.curStudent;
});

const curSliceSelection = ref<AreaSize>();
const curSliceInfo = ref({
  paperIndex: 0,
  paperId: 0,
  pageIndex: 0,
  index: 0,
});

function getPageTitle(paperNumber, pageIndex) {
  return `卡${paperNumber}${pageIndex === 0 ? "正面" : "反面"}`;
}

const cutImageDialogRef = ref();
function onEditSlice(paperNumber: number, pageIndex: number, index: number) {
  const paper = curStudent.value.papers[paperNumber - 1];
  if (!paper) return;

  curSliceInfo.value = {
    paperIndex: paperNumber - 1,
    pageIndex,
    paperId: paper.id as number,
    index,
  };
  curSliceSelection.value = undefined;
  cutImageDialogRef.value?.open();
}
async function cutImageModified(file: File) {
  const md5 = await getFileMD5(file);

  const { paperId, pageIndex, index } = curSliceInfo.value;
  const datas = {
    paperId,
    pageIndex,
    index,
    file,
    md5,
  };
  const res = await uploadSlice(datas).catch(() => {});
  if (!res) return;

  dataCheckStore.modifySliceUri({
    ...curSliceInfo.value,
    uri: res.uri,
  });
}

function onUpdateSlice(paperNumber: number, pageIndex: number, index: number) {
  const paper = curStudent.value.papers[paperNumber - 1];
  if (!paper) return;

  curSliceInfo.value = {
    paperIndex: paperNumber - 1,
    pageIndex,
    paperId: paper.id as number,
    index,
  };
}

function updateSliceSuccess(data: { url: string }) {
  dataCheckStore.modifySliceUri({
    ...curSliceInfo.value,
    uri: data.url,
  });
}
</script>
