// ==UserScript==
// @name         图片下载器
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  尝试在页面顶部添加一个按钮，点击后下载页面所有图片
// @author       Jack
// @match        *://*/*
// @grant        GM_download
// @grant        GM_addStyle
// @require      https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js
// ==/UserScript==

(function () {
  'use strict';

  // 添加样式以确保按钮在页面加载时可见
  GM_addStyle(`
  .download-pic-button {
      position: fixed;
      top: 5%; /* 默认位置 */
      left: 50%;
      transform: translateX(-50%);
      z-index: 10000;
      border: none;
      background-color: transparent; /* 背景颜色设置为透明 */
      color: rgb(113, 100, 156); /* 字体颜色设置为指定的 RGB 值 */
      cursor: pointer;
      font-size: 15px;
      padding: 0;
  }
`);

  // 创建按钮并添加到页面顶部的中间
  var downloadButton = document.createElement("button");
  downloadButton.textContent = "New Btn";
  downloadButton.className = 'download-pic-button';
  document.body.appendChild(downloadButton);

  // 检查特定元素是否存在，并设置按钮位置
  function checkElementAndSetButtonPosition() {
    var targetElement = document.querySelector("body > div.o_action_manager > div > div.o_control_panel > div.o_cp_bottom > div.o_cp_bottom_left > div > div > button.btn.btn-secondary.fa.fa-download.o_list_export_xlsx");

    if (targetElement) {
      // 如果元素存在，获取元素的位置和尺寸
      var targetRect = targetElement.getBoundingClientRect();
      // 设置按钮的 top 值，使其与目标元素顶部对齐
      downloadButton.style.top = `${targetRect.top + window.scrollY}px`;
      // 设置按钮的 left 值，使其在目标元素右侧偏移量为 targetElementWidth + offset
      var targetElementWidth = targetRect.width;
      var offset = 10; // 你可以根据需要调整这个偏移量
      downloadButton.style.left = `${targetRect.right + offset}px`; // 偏移量在目标元素右侧
      downloadButton.style.transform = 'none';
    } else {
      // 如果元素不存在，恢复按钮的默认位置
      downloadButton.style.top = '5%';
      downloadButton.style.left = '50%';
      downloadButton.style.transform = 'translateX(-50%)';
    }
  }

  // 初始检查
  checkElementAndSetButtonPosition();

  // 监听滚动事件，以便在滚动时更新按钮位置
  window.addEventListener('scroll', function () {
    checkElementAndSetButtonPosition();
  });

  // 监听 DOM 变化，以便在元素被添加到页面时更新按钮位置
  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      if (mutation.type === 'childList') {
        checkElementAndSetButtonPosition();
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });

  // 点击按钮时执行的函数
  // 点击按钮时执行的函数
  downloadButton.onclick = function () {
    var images = document.querySelectorAll('img'); // 获取页面上所有的<img>元素
    var zip = new JSZip();

    console.log(images);
    images.forEach(function (img) {
      var src = img.src; // 获取图片的src属性
      var filename = img.alt || 'image'; // 使用alt属性作为文件名，如果没有alt则默认为'image'

      // 获取文件扩展名，如果没有扩展名则默认为 'jpg'
      var extensionMatch = src.match(/\.([^.\/\?]+)$/); // 正则表达式匹配文件扩展名
      var extension = extensionMatch ? extensionMatch[1].toLowerCase() : 'jpg';

      // 检查扩展名是否是图片格式
      var validExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'bmp', 'webp'];
      if (validExtensions.includes(extension)) {
        // 异步获取图片数据
        fetch(src)
          .then(response => {
            if (response.ok) return response.blob();
            throw new Error('Network response was not ok.');
          })
          .then(blob => {
            // 将blob添加到zip文件中
            zip.file(filename + '.' + extension, blob);
          })
          .catch(error => {
            console.error('There was a problem with the fetch operation:', error);
          });
      } else {
        // 如果不是图片格式，跳过这个文件
        console.log('Skipped non-image file:', src);
      }
    });

    // 当所有图片都添加到zip中后，生成并下载zip文件
    Promise.all(zip.files).then(() => {
      zip.generateAsync({ type: 'blob' }).then(function (content) {
        var filename = 'images_' + new Date().toISOString() + '.zip'; // 使用时间戳生成唯一的文件名
        var eleLink = document.createElement('a');
        eleLink.download = filename;
        eleLink.style.display = 'none';
        eleLink.href = URL.createObjectURL(content);
        document.body.appendChild(eleLink);
        eleLink.click();
        document.body.removeChild(eleLink);
      });
    });
  };
})();