<template>
  <div class=""></div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import JSZip from 'jszip';
import request from '@/utils/ImageRequest';
import { show_message } from '@/utils/tdesign_tool';
import { saveAs } from 'file-saver';

const imageList = [
  'https://yunyi-tiktok.oss-cn-shenzhen.aliyuncs.com/files/ai-gpt/users/1/0a08ae64-601c-4629-ad34-cda1ec956004.png',
  //   'http://45.207.61.22:91/admin//images/8602a0bc1a78f96df0fcaf4d19780083.png',
  //   'http://45.207.61.22:91/admin//images/9a494348e3dd8ed276bacae797b2bf8f.png',
];
const getFile = (url) => {
  return new Promise((resolve, reject) => {
    request
      .get(url, {
        responseType: 'blob',
      })
      .then((res) => {
        resolve(res);
      })
      .catch((error) => {
        reject(error);
      });
  });
};

const batchQrCodeZip = async () => {
  let zip = new JSZip();
  const promises = [];
  for (const item of imageList) {
    const promise = getFile(item).then((data) => {
      // 下载文件, 并存成ArrayBuffer对象
      zip.file('test' + '.png', data, { binary: true }); // 逐个添加文件，需要加后缀".png"
    });
    promises.push(promise);
  }
  let zipname = 'expamle.zip';
  setTimeout(() => {
    Promise.all(promises)
      .then((res) => {
        zip.generateAsync({ type: 'blob' }).then((content) => {
          // 生成二进制流
          saveAs(content, zipname); // 利用file-saver保存文件  自定义文件名
          show_message('成功', 'success');
        });
      })
      .catch((res) => {
        show_message('导出失败');
      });
  }, 3000);
};

onMounted(() => {
  batchQrCodeZip();
});
</script>

<style lang="less" scoped></style>
