<template>
  <div>
    <h1>TestPage1</h1>
    <a-button type="primary" @click="toOpenFile">打开文件</a-button>
    <a-button type="primary" @click="toDownloadFile">下载文件</a-button>
    <a-button type="primary" @click="toDrawCircle('circle')">绘制圆圈</a-button>
    <a-button type="primary" @click="toDrawCircle('line')">绘制长线</a-button>
    <a-button type="primary" @click="toTextGm">测试gm</a-button>
    <br />
    <img v-if="originImg" :src="originImg" alt="原图" />
    <br />
    <img v-if="cropImg" :src="cropImg" alt="裁切图" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { usePQueue } from '@/hooks/p-queue';
  import taskData from './task.local.json';

  import { DrawTrackItem } from '../../../../electron/preload/types';

  defineOptions({
    name: 'TestPage',
  });

  const originImg = ref('');
  const cropImg = ref('');

  async function toOpenFile() {
    const res = await window.electron.dialogSelectFile({
      title: '选择文件',
      filters: [{ name: 'Images', extensions: ['jpg', 'png'] }],
    });
    console.log(res);

    if (res.canceled) return;

    originImg.value = `local://${res.filePaths[0]}`;

    const info = await window.api.cropImage(originImg.value).catch((err) => {
      console.log(err);
    });
    console.log(info);

    if (!info) return;
    cropImg.value = `local://${info}`;
  }

  async function toDownloadFile() {
    const url =
      'https://oss-file.qmth.com.cn/teachcloud-dps-dev-private/sheet/506931097515331584/511142910851289088/2024000001/1-1.jpg?Expires=1717638293&OSSAccessKeyId=key&Signature=UYsoE6XTZ3KR8cng7liDN1zmwj0%3D';
    const outpath =
      '/Users/chulin/develop/workspace/tcs/teachcloud-mark-tool/store/temp/111.jpg';
    const res = await window.api.downloadImage(url, outpath);
    console.log(res);
  }

  async function toDrawCircle(type: 'circle' | 'line') {
    const url =
      '/Users/chulin/workFiles/teach-mark-tool/test-local/2021~2022第一学期/上学期/模式1-条码印刷/中国古代文学00快快快快快快快快(0300)/bh070902/教学班01/原图/070902-大米0709002-1.jpg';
    const outpath =
      '/Users/chulin/develop/workspace/tcs/teachcloud-mark-tool/store/temp/122.jpg';
    await window.api
      .drawCanvasTrack(
        url,
        [{ type, option: { x0: 200, y0: 200, x1: 500, y1: 400 } }],
        outpath
      )
      .catch((e) => {
        console.log(e);
      });
    cropImg.value = `local://${outpath}`;
  }

  interface ImageItem {
    url: string;
    width: number;
    height: number;
  }
  interface TaskItem {
    imgItem: ImageItem;
    outpath: string;
    drawTrackList: DrawTrackItem[];
  }

  async function toTextGm() {
    const st = Date.now();
    const concurrency = 3;
    const { buildQueue } = usePQueue({ concurrency });
    const tasks = (taskData as TaskItem[][]).flat();
    // tasks.forEach((item) => {
    //   // item.drawTrackList = item.drawTrackList.slice(0, 1);
    //   console.log(item.outpath, item.drawTrackList.length);
    // });

    const times: Array<string | number>[] = [];

    const fetchFuncs = tasks.map((item, index) => {
      return async () => {
        times[index] = [
          item.outpath.split('/').slice(-1)[0] as string,
          Date.now() - st,
          0,
        ];
        await window.api.drawCanvasTrack(
          item.imgItem.url,
          item.drawTrackList,
          item.outpath
        );

        times[index][2] = Date.now() - st;
      };
    });
    await buildQueue(fetchFuncs);

    const tt = Date.now() - st;
    const at = tt / tasks.length;

    console.log(
      `并发:${concurrency}，任务数:${tasks.length}，耗时:${tt}ms，平均:${at}ms`
    );
    console.log(times);
  }
</script>
