<template>
  <div class="wp">
    <div class="hd">
      <div class="logo"><img src="img/logo.png" /></div>
      <span class="y">
        欢迎您，<span id="user-name"></span> <span class="pipe">|</span
        ><a href="##">退出</a>
      </span>
    </div>
    <div class="cont">
      <div class="title title_grey cl">
        <h2>图片下载中 …</h2>
      </div>
      <div class="progress-box">
        <h3>正在下载图片，请耐心等候 ~</h3>
        <div class="progress">
          <div class="progress-outer">
            <div id="progress" class="progress-inner" style="width: 0%">
              <span class="progress-text"></span>
            </div>
          </div>
        </div>
        <p>
          已下载图片：<b id="finish-count"></b> / 全部图片：<b
            id="total-count"
            >{{ totalCount }}</b
          >
        </p>
      </div>
    </div>
    <div class="xcConfirm" id="popup" style="display: none">
      <div class="xc_layer"></div>
      <div class="popbox">
        <a href="##" id="popup-close"><span class="close"></span></a>
        <div class="txtbox">
          <div id="popup-error" class="icon error" style="display: none"></div>
          <div
            id="popup-success"
            class="icon success"
            style="display: none"
          ></div>
          <div id="popup-text" class="text"></div>
        </div>
      </div>
    </div>
    <div class="ft">
      Copyright © 2011-2020 www.qmth.com.cn, All Rights Reserved
    </div>
    <div style="display: none">
      <canvas id="canvas"></canvas>
    </div>
  </div>
</template>

<script setup lang="ts">
import { store } from "@/store";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import { getStudents, countStudents } from "@/api/api";
import { httpApp } from "@/plugins/axiosApp";

async function getImageDim(
  blob: Blob
): Promise<[width: number, height: number]> {
  return new Promise((res) => {
    const img = new Image();
    img.src = URL.createObjectURL(blob);
    img.onload = () => {
      URL.revokeObjectURL(img.src);
      console.log(img.width);
      res([img.width, img.height]);
    };
  });
}

const totalCount = ref(0);
let processedCount = ref(0);
let students = [];

const config = store.pageInputs["/image-download"];
onMounted(async () => {
  if (config.type === "1") {
    // imageUtil.downloadSheet(config.dir, config.template, config.append, config.failover, config
    //                 .watermark, config.trackMode, {
    //                 examNumberIn: config.examNumber,
    //                 subjectCode: config.subjectCode
    //             })

    const res = await countStudents(store.env.examId, {
      upload: true,
      withSheetUrl: true,
      withScoreDetail: config.watermark,
      withGroupScoreTrack: config.watermark && config.trackMode,
    });
    totalCount.value = res.data;

    const resStudents = await getStudents(store.env.examId, 1, 10, {
      upload: true,
      withSheetUrl: true,
      withScoreDetail: config.watermark,
      withGroupScoreTrack: config.watermark && config.trackMode,
    });
    students = resStudents.data;

    for (const student of students) {
      for (const sheetUrl of student.sheetUrls) {
        const imageRes = await httpApp.get(sheetUrl, { responseType: "blob" });

        const [width, height] = await getImageDim(imageRes.data);

        // console.log(imageRes.data);
        // console.log(await imageRes.data.arrayBuffer());
        // console.log(new Uint8Array(await imageRes.data.arrayBuffer()));
        await window.electron.addWatermark(
          // null,
          JSON.parse(JSON.stringify(store)),
          // null,
          await imageRes.data.arrayBuffer(),
          // new Uint8Array(await imageRes.data.arrayBuffer()),
          width,
          height,
          `/Users/michael/Documents/qmth/electron-exam-shell/test${Date.now()}.jpg`,
          // null,
          student,
          1,
          "1"
        );
      }
    }
  }
});
</script>
