/**
 * 核心代码看这里
 * @param zipSrc 远端的链接
 */
const unZipLottieFile = async (zipSrc) => {

  /**
   * 加载zip文件 并用 arrayBuffer 读取，arraybuffer 即不带view的 二进制数据
   */
  const zipBuffer = await fetch(zipSrc)
    .then(response => response.arrayBuffer())

  /**
   * 使用 jsZip 读取文件
   */
  const zip = await JSZip.loadAsync(zipBuffer);


  // 打印一下给大家看下这个里的结构
  console.log('[zip]', zip)

  const imageUrlsMap = {}
  let oriJson = {}

  for (let zipEntry of Object.values(zip.files)) {
    // 跳过文件夹 和 隐藏文件
    if (zipEntry.dir || /\/\./.test(zipEntry.name)) {
      continue;
    }

    const isJSON = /\.json/i.test(zipEntry.name)
    const isImg = /\.(jpg|jpeg|png|gif)$/i.test(zipEntry.name)

    if (isJSON) {
      // 获取 核心的 JSON 配置文件
      const oriJsonText = await zipEntry.async('text');
      if (oriJsonText) {
        oriJson = JSON.parse(oriJsonText)
      }
    } else if (isImg) {
      // 图片以 blob方式读取
      const imgBlob = await zipEntry.async('blob')
      const fileName = zipEntry.name.split('/').pop()
      // 转成 临时的 URL
      imageUrlsMap[fileName] = URL.createObjectURL(new Blob([imgBlob]))
    }
  }


  /**
  * 定义一个辅助方法替换图片路径
  * @param obj 
  * @returns 
  */
  function deepUpdateImgPath(obj) {
    if (typeof obj !== 'object' || obj === null) {
      return obj;
    }

    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (key === 'p') {
          if (imageUrlsMap[obj[key]]) {
            const filePath = imageUrlsMap[obj[key]]
            obj[key] = filePath.split('/').pop()
          }
        } else {
          obj[key] = deepUpdateImgPath(obj[key]);
        }
      }
    }

    return obj;
  }


  // 替换JSON 内的 assets 内的 p 属性为 临时路径
  const targetJSON = deepUpdateImgPath(oriJson)
  return {
    json: targetJSON,
    imageUrlsMap
  }
}


const loadZipAnimation = async (src) => {
  const { json } = await unZipLottieFile(src)
  console.log(json)
  lottie.loadAnimation({
    container: document.getElementById('anim'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    // 这里要修改为这个
    assetsPath: `blob:${location.origin}/`,
    animationData: json,
  });
}

const remoteZipFile = 'https://aizigao.xyz/files/lottie-test.zip'
loadZipAnimation(remoteZipFile)