export default async function loadImg(urlList, CoordinateList) {
    /**
     * urlList: 图片地址数组
     * 数据格式为 [url1, url2, url3]
     * 
     * CoordinateList: 坐标数组
     * 数据格式为 [
     *      { page: 1, x: 10, y: 20, w: 100, h: 150 },
     *      { page: 2, x: 30, y: 40, w: 120, h: 160 },
     * ]
     * 也可能为
     * [
     *      { page: 2, x: 30, y: 40, w: 120, h: 160 },
     *      { page: 4, x: 50, y: 60, w: 140, h: 180 },
     * ]
     * 
     * 注意：page 为 1 时，对应 urlList 中的第一个图片地址
     * 
     * 功能描述：将多张图片根据坐标裁剪并合并为一张图片。
     * 注意：
     * （1）有可能裁剪区域的宽度不一致，合并后图片宽度取最大宽度，其他图片按比例缩放。
     * （2）裁剪区域按顺序垂直排列，之间无间距。
     * （3）page 可能不从 1 开始，且不连续。我们只需根据 page 值找到对应图片即可。
     * 返回值：返回一个 Promise，resolve 合并后的图片的 Base64 数据 URL。
     * 
    */

    if (!Array.isArray(urlList) || !Array.isArray(CoordinateList)) {
        return null;
    }

    if (CoordinateList.length === 0 || urlList.length === 0) {
        return null;
    }

    let maxWidth = 0;
    for (let coord of CoordinateList) {
        if (coord.w > maxWidth) {
            maxWidth = coord.w;
        }
    }

    const imgList = []

    for (let urlIndex = 0; urlIndex < urlList.length; urlIndex++) {
        const url = urlList[urlIndex];
        for (let i = 0; i < CoordinateList.length; i++) {
            const coord = CoordinateList[i];
            const page = coord.page;
            // 根据 maxWidth 计算缩放比例
            const scale = maxWidth / coord.w;
            
            // 计算高度
            coord.w = maxWidth;
            coord.h = coord.h * scale;

            if (page - 1 === urlIndex) {
                const img = await loadImage(url);
                const tempCanvas = document.createElement('canvas');
                const tempCtx = tempCanvas.getContext('2d');
                tempCanvas.width = coord.w;
                tempCanvas.height = coord.h;

                // 此处按 计算后的宽高进行裁剪
                tempCtx.drawImage(img, coord.x, coord.y, coord.w, coord.h, 0, 0, coord.w, coord.h);
                imgList.push({
                    img: tempCanvas,
                    width: coord.w,
                    height: coord.h
                });
            }
        }
    }

    // 创建最终合并的画布
    const finalCanvas = document.createElement('canvas');
    const finalCtx = finalCanvas.getContext('2d');
    finalCanvas.width = maxWidth;
    let totalHeight = 0;
    for (let i = 0; i < imgList.length; i++) {
        totalHeight += imgList[i].height;
    }
    finalCanvas.height = totalHeight;

    let currentY = 0;
    for (let i = 0; i < imgList.length; i++) {
        const img = imgList[i].img;
        finalCtx.drawImage(img, 
            0, 0, maxWidth, imgList[i].height, 
            0, currentY, maxWidth, imgList[i].height
        );
        currentY += imgList[i].height;
    }

    return finalCanvas.toDataURL('image/png');
}

function loadImage(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.crossOrigin = "Anonymous";
        img.src = url;
        img.onload = () => resolve(img);
        img.onerror = (err) => reject(err);
    })
}