// ==UserScript==
// @name         淘宝天猫图片打包下载
// @version      2024.10.18
// @description  主图、SKU、详情和视频打包下载
// @author       Suren_Chan
// @match        *://item.taobao.com/*
// @match        *://detail.tmall.com/*
// @include      https://item.taobao.com/item.htm?*
// @include      https://detail.tmall.com/item.htm?*// 
// @require      https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @license      MIT
// @grant        none
// @namespace https://greasyfork.org/users/786427
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // 创建进度条容器
    const progressContainer = document.createElement('div');
    progressContainer.style.position = 'fixed';
    progressContainer.style.top = '50%';
    progressContainer.style.left = '50%';
    progressContainer.style.transform = 'translate(-50%, -50%)';
    progressContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    progressContainer.style.color = '#fff';
    progressContainer.style.padding = '20px';
    progressContainer.style.borderRadius = '10px';
    progressContainer.style.zIndex = '9999';
    progressContainer.style.display = 'none'; // 默认隐藏

    // 创建进度条
    const progressBar = document.createElement('div');
    progressBar.style.width = '100%';
    progressBar.style.backgroundColor = '#ddd';
    progressBar.style.borderRadius = '5px';
    const progressFill = document.createElement('div');
    progressFill.style.width = '0%';
    progressFill.style.height = '20px';
    progressFill.style.backgroundColor = '#4caf50';
    progressFill.style.borderRadius = '5px';

    progressBar.appendChild(progressFill);
    progressContainer.appendChild(progressBar);
    document.body.appendChild(progressContainer);

    // 创建外部 div
    const customDiv = document.createElement('div');
    customDiv.style.position = 'fixed';
    customDiv.style.width = '56px';
    customDiv.style.height = '90px';
    customDiv.style.backgroundColor = '#fff';
    customDiv.style.right = '0px';
    customDiv.style.top = '300px';
    customDiv.style.zIndex = '9999';
    customDiv.style.borderRadius = '18px 0 0 18px';
    customDiv.style.boxShadow = '-2px 0 30px 2px rgba(97, 105, 119, 0.18)';
    customDiv.style.cursor = 'pointer';

    // 创建包含 SVG 的 div
    const svgContainer = document.createElement('div');
    svgContainer.style.textAlign = 'center';
    svgContainer.style.paddingTop = '20px';

    // 创建 SVG
    const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svgIcon.setAttribute('width', '32');
    svgIcon.setAttribute('height', '32');
    svgIcon.innerHTML = `<svg t="1729178743032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4764" width="32" height="32"><path d="M895.5 831.7H128c-35.1 0-63.8 28.7-63.8 63.8 0 35.1 28.7 63.8 63.8 63.8h767.5c35.1 0 63.8-28.7 63.8-63.8 0-35.1-28.7-63.8-63.8-63.8zM811 383H672.2V123.8c0-33.3-27-60.4-60.4-60.4H412.4c-33.3 0-60.4 27-60.4 60.4V383H213.2c-26.7 0-40.7 31.8-22.5 51.5L489.6 758c12.1 13.1 32.9 13.1 45.1 0l298.8-323.5c18.1-19.7 4.2-51.5-22.5-51.5z" fill="#2196F3" p-id="4765"></path></svg>`;

    svgContainer.appendChild(svgIcon);

    // 创建 p 标签并设置文本和样式
    const pTag = document.createElement('p');
    pTag.textContent = '下载';
    pTag.style.color = '#2196F3';
    pTag.style.textAlign = 'center';

    customDiv.appendChild(svgContainer);
    customDiv.appendChild(pTag);

    // 添加点击事件
    customDiv.addEventListener('click', async function() {
        // 显示进度条
        progressContainer.style.display = 'block';
        progressFill.style.width = '0%'; // 重置进度条

        // 获取 id 为 content 的 div
        const contentDiv = document.getElementById('content');
        if (!contentDiv) {
            alert('未找到指定的 div!');
            progressContainer.style.display = 'none'; // 隐藏进度条
            return;
        }

        // 获取所有 img 标签
        const images = contentDiv.getElementsByTagName('img');
        const imageUrls = [];

        for (let i = 0; i < images.length; i++) {
            const imgSrc = images[i].src;
            let modifiedUrl = imgSrc;
            let fileExtension = '';

            if (imgSrc.endsWith('.jpg') || imgSrc.endsWith('.jpeg')) {
                modifiedUrl = imgSrc.split('.jpg')[0];
                fileExtension = '.jpg';
            } else if (imgSrc.endsWith('.png')) {
                modifiedUrl = imgSrc.split('.png')[0];
                fileExtension = '.png';
            } else if (imgSrc.endsWith('.gif')) {
                modifiedUrl = imgSrc.split('.gif')[0];
                fileExtension = '.gif';
            } else {
                continue; // 跳过不支持的格式
            }

            imageUrls.push({ url: modifiedUrl, extension: fileExtension });
        }

        // 创建一个 JSZip 实例
        const zip = new JSZip();

        // 下载图片并添加到 ZIP
        for (let i = 0; i < imageUrls.length; i++) {
            const { url, extension } = imageUrls[i];
            const fullUrl = url + extension; // 根据格式添加后缀

            const response = await fetch(fullUrl);
            const blob = await response.blob();

            // 更新进度
            const progressPercentage = ((i + 1) / imageUrls.length) * 100;
            progressFill.style.width = `${progressPercentage}%`;

            const imgNumber = (i + 1).toString().padStart(2, '0');
            zip.file(`image${imgNumber}${extension}`, blob); // 添加到 ZIP
        }

        // 生成 ZIP 文件并下载
        zip.generateAsync({ type: 'blob' })
            .then(function(content) {
                saveAs(content, 'images.zip'); // 下载 ZIP
                progressContainer.style.display = 'none'; // 隐藏进度条
            });
    });

    // 将 div 添加到页面
    document.body.appendChild(customDiv);
})();