// import mergeImages from "./mergeImages";

export default {
    data(){
        return {
            system_info:{}, //system info
            canvas_width:0, //canvas width px
            canvas_height:0, //canvas height px
            ctx:null, //canvas object
            canvas_id:null, //canvas id
            hidden:false, //Whether to hide canvas
            scale:1, //canvas scale
            r_canvas_scale:1,
            if_ctx:true
        }
    },
    methods:{
        /**
         * Compatibility px
         * @param {Object} size
         */
        compatibilitySize(size) {
            let canvasSize = (parseFloat(size) / 750) * this.system_info.windowWidth
            canvasSize = parseFloat(canvasSize * 2)
            return canvasSize
        },
        /**
         * Restore compatibility px
         * @param {Object} size
         */
        resetCompatibilitySize(size) {
            return (parseFloat(size / 2) / this.system_info.windowWidth) * 750
        },
        async init(config){
            if(config.path){
                // 存一下实际图片大小 用于缩放比
                this.imagesConfig = await this.scaleImageInfo(config.path);
            }

            return new Promise(async (resolve,reject)=>{
                if(!config.canvas_id){
                    reject("Canvas ID cannot be empty, please refer to the usage example")
                    return;
                }
                this.hidden = config.hidden
                this.canvas_id = config.canvas_id
                let system_info = await uni.getSystemInfoSync()
                this.system_info = system_info
                this.scale = config.scale && parseFloat(config.scale)>0?parseInt(config.scale):1
                this.canvas_width = (config.canvas_width ? this.compatibilitySize(config.canvas_width) : system_info.windowWidth) * this.scale
                this.canvas_height = (config.canvas_height ? this.compatibilitySize(config.canvas_height) : system_info.windowHeight) * this.scale,
                    this.r_canvas_scale = 1/this.scale
                this.ctx = uni.createCanvasContext(this.canvas_id,this)
                resolve()
            })
        },

        draw(callback){
            return new Promise((resolve,reject)=>{
                let stop = setTimeout(()=>{
                    this.ctx.draw(false,setTimeout(()=>{
                        uni.canvasToTempFilePath({
                            canvasId: this.canvas_id,
                            quality: 1,
                            success: (res)=>{
                                // console.log("--draw--"+ this.canvas_id)
                                resolve(res)
                                callback && callback(res)
                            },
                            fail:(err)=>{
                                reject(JSON.stringify(err)|| "Failed to generate poster:101")
                            }
                        },this)
                    },300))
                    clearTimeout(stop)
                },300)
            })
        },
        clearCanvas(callback){
            return new Promise(async (resolve,reject)=>{
                if(!this.ctx){
                    reject("canvas is not initialized:101")
                    return
                }else{
                    this.ctx.clearRect(0,0,
                        parseFloat(this.canvas_width)*this.scale,
                        parseFloat(this.canvas_height)*this.scale
                    )
                    this.ctx.draw(false,callback)
                    resolve()
                }
            })
        },

        readFile(url){
            return new Promise((resolve, reject) => {
                plus.io.resolveLocalFileSystemURL(url,(obj)=>{
                    obj.file((file)=>{
                        let fileReader = new plus.io.FileReader()
                        fileReader.onload = (res)=>{
                            resolve(res.target.result)
                        }
                        fileReader.onerror = (err)=>{
                            reject(err)
                        }
                        fileReader.readAsDataURL(file)
                    }, (err)=>{
                        reject(err)
                    })
                },(err)=>{
                    reject(err)
                })
            })
        },
        // 下载图片资源
        downLoadNetworkFile(url){
            // #ifdef APP-PLUS
            if(url.indexOf('http') > -1){
                return new Promise((resolve,reject)=>{
                    uni.downloadFile({
                        url,
                        success:(res)=>{
                            // console.log(res.tempFilePath)
                            if(res.statusCode == 200){
                                resolve(res.tempFilePath)
                            }else{
                                reject("Download Image Fail:102")
                            }
                        },
                        fail:(err)=>{
                            reject("Download Image Fail:101")
                        }
                    })
                })
            }else{
                return this.readFile(url);
            }
            // #endif

            // #ifdef H5
            return new Promise((resolve,reject)=>{
                uni.downloadFile({
                    url,
                    success:(res)=>{
                        // console.log(res.tempFilePath)
                        if(res.statusCode == 200){
                            resolve(res.tempFilePath)
                        }else{
                            reject("Download Image Fail:102")
                        }
                    },
                    fail:(err)=>{
                        reject("Download Image Fail:101")
                    }
                })
            })
            // #endif
        },
        urlToBase64(config){
            return new Promise(async (resolve,reject)=>{
                if (typeof window != 'undefined') {
                    await this.downLoadNetworkFile(config.url).then(res=>{ // two function
                        resolve(res)
                    }).catch(err=>{
                        reject(err)
                    })
                }else if (typeof plus != 'undefined') {
                    plus.io.resolveLocalFileSystemURL(config.url,(obj)=>{
                        obj.file((file)=>{
                            let fileReader = new plus.io.FileReader()
                            fileReader.onload = (res)=>{
                                resolve(res.target.result)
                            }
                            fileReader.onerror = (err)=>{
                                reject(err)
                            }
                            fileReader.readAsDataURL(file)
                        }, (err)=>{
                            reject(err)
                        })
                    },(err)=>{
                        reject(err)
                    })
                }else if(typeof wx != 'undefined'){
                    wx.getFileSystemManager().readFile({
                        filePath: config.url,
                        encoding: 'base64',
                        success: function(res) {
                            resolve('data:image/png;base64,' + res.data)
                        },
                        fail: function(error) {
                            reject(error)
                        }
                    })
                }
            })
        },


        mergeImageByColor(image,color,borderWidth = 0){
            let ctx = this.ctx;
            const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; // offset array
            // 平移图像
            for (let i = 0; i < dArr.length; i += 2)
                ctx.drawImage(image, dArr[i] * borderWidth, dArr[i + 1] * borderWidth);
            // 填充描边色
            ctx.globalCompositeOperation = "source-in";
            ctx.fillStyle = color;
            ctx.globalAlpha = 1;
            ctx.fillRect(0, 0, this.canvas_width,this.canvas_height);

            // 添加原图
            ctx.globalCompositeOperation = "source-atop";
            ctx.drawImage(image, 0, 0);
            ctx.draw();
        },
        async mergeImageByImg(item,target){
            let ctx = this.ctx;
            ctx.globalCompositeOperation = "source-over";
            let fileList = [
                await this.downLoadNetworkFile(item),
                await this.downLoadNetworkFile(target),
            ]
            let options = this.getScaleOptions();
            return new Promise((resolve, reject) => {
                    resolve(
                        Promise.all(fileList)
                            .then((images) =>{
                                const borderWidth = 0;
                                const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; // offset array
                                // 平移图像
                                for (let i = 0; i < dArr.length; i += 4)
                                    ctx.drawImage(images[0], dArr[i] * borderWidth, dArr[i + 1] * borderWidth,this.canvas_width, this.canvas_height);
                                // 填充描边色
                                ctx.globalCompositeOperation = "source-in";
                                ctx.fillRect(0, 0, this.canvas_width, this.canvas_height);

                                // // 添加原图
                                ctx.globalCompositeOperation = "source-atop";
                                ctx.drawImage(images[1], this.canvas_width - options.width, 0,options.width, options.height);
                                ctx.draw();

                            })
                    )
            })
        },
        async mergeImageByImgPattern(item,target){
            let ctx = this.ctx;
            ctx.globalCompositeOperation = "source-over";
            let fileList = [
                await this.downLoadNetworkFile(item),
                await this.downLoadNetworkFile(target),
            ]
            return new Promise((resolve, reject) => {
                resolve(
                    Promise.all(fileList)
                        .then((images) =>{
                            // ctx.fillStyle = ctx.createPattern(images[1], 'repeat');
                            // ctx.fillRect(0, 0, this.canvas_width,this.canvas_height);
                            // ctx.draw()
                            const borderWidth = 0;
                            const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; // offset array
                            // 平移图像
                            for (let i = 0; i < dArr.length; i += 4)
                                ctx.drawImage(images[0], dArr[i] * borderWidth, dArr[i + 1] * borderWidth,this.canvas_width, this.canvas_height);
                            // 填充描边色
                            ctx.globalCompositeOperation = "source-in";
                            ctx.fillRect(0, 0, this.canvas_width, this.canvas_height);
                            ctx.setGlobalAlpha(1)
                            // // 添加原图
                            // ctx.globalCompositeOperation = "source-atop";
                            // ctx.drawImage(images[0], this.canvas_width - options.width, 0,options.width, options.height);
                            // ctx.draw();
                            ctx.fillStyle = ctx.createPattern(images[1], 'repeat');
                            ctx.fillRect(0, 0, this.canvas_width,this.canvas_height);
                            ctx.draw()
                        })
                )
            })
        },
        mergeImages(sources = []){
            let options = this.getScaleOptions();
            return new Promise((resolve,reject) =>{
                // Load sources
                let fileList = sources.map((source) => {
                    return this.downLoadNetworkFile(source);
                });
                resolve(
                    Promise.all(fileList)
                        .then((images) =>{
                            // Draw images to canvas
                            images.forEach((image) => {
                                this.ctx.globalAlpha = image.opacity ? image.opacity : 1;
                                return this.ctx.drawImage(image, (this.canvas_width - options.width )/2, 0 ,options.width,options.height);
                                // return this.ctx.drawImage(image,  0, 0 , this.canvas_width,this.canvas_height);
                            });
                            this.ctx.draw();
                        })
                )
            })
        },
        scaleImageInfo(src){
            return new Promise((resolve,reject) =>{
                uni.getImageInfo({
                    src: src,
                    success(res){
                        resolve(res);
                    },
                    fail:(error) =>{
                        reject(JSON.stringify(error))
                    }
                })
            })
        },
        getScaleOptions(){
            let {
                width,height
            } = this.imagesConfig;
            if(width > height){
                return {
                    width: this.canvas_width,
                    height: Number(parseFloat(width / height * this.canvas_height).toFixed(2))
                }
            }else{
                // let value = this.canvas_width / this.canvas_height) * width;
                return {
                    width: Number(parseFloat(width / height * this.canvas_width).toFixed(10)),
                    height: this.canvas_height,
                }
            }
        },


        async drawImageInApp(item,target){
            let ctx = this.ctx;
            ctx.globalCompositeOperation = "source-over";
            let fileList = [
                await this.downLoadNetworkFile(item),
                await this.downLoadNetworkFile(target),
            ]
            return new Promise((resolve, reject) => {
                resolve(
                    Promise.all(fileList)
                        .then((images) =>{
                            const borderWidth = 0;
                            const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; // offset array
                            // 平移图像
                            for (let i = 0; i < dArr.length; i += 4)
                                ctx.drawImage(images[0], dArr[i] * borderWidth, dArr[i + 1] * borderWidth,this.canvas_width, this.canvas_height);
                            // 填充描边色
                            ctx.globalCompositeOperation = "destination-in";
                            ctx.fillRect(0, 0, this.canvas_width, this.canvas_height);

                            // // 添加原图
                            // ctx.globalCompositeOperation = "destination-atop";
                            ctx.globalCompositeOperation = "xor";
                            ctx.drawImage(images[1], 0 , 0,this.canvas_width, this.canvas_height);
                            ctx.draw();

                            ctx.globalCompositeOperation = "source-over";
                        })
                )
            })
        },


        async drawImageInApp1(item,target){
            let ctx = this.ctx;
            ctx.globalCompositeOperation = "source-over";
            let fileList = [
                await this.downLoadNetworkFile(item),
                await this.downLoadNetworkFile(target),
            ]
            return new Promise((resolve, reject) => {
                resolve(
                    Promise.all(fileList)
                        .then((images) =>{
                            const borderWidth = 0;
                            const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; // offset array
                            // 平移图像
                            for (let i = 0; i < dArr.length; i += 4)
                                ctx.drawImage(images[0], dArr[i] * borderWidth, dArr[i + 1] * borderWidth,this.canvas_width, this.canvas_height);
                            // 填充描边色
                            ctx.globalCompositeOperation = "source-in";
                            ctx.fillRect(0, 0, this.canvas_width, this.canvas_height);

                            // // 添加原图
                            ctx.globalCompositeOperation = "source-atop";
                            // ctx.globalCompositeOperation = "xor";
                            ctx.drawImage(images[1], 0 , 0,this.canvas_width, this.canvas_height);
                            ctx.draw();

                            ctx.globalCompositeOperation = "source-over";
                        })
                )
            })
        },
        // 底图太淡 =>
        async mergeImageByImgPatternInApp(item,target){
            // 素材跟部位合成
            await this.mergeImageByImgPattern(item,target);
            let data = await this.exportImg();
            await this.clearCanvas();

            await this.drawImageInApp1(data,target)

        },
        exportImg(){
            return new Promise((resolve,reject) => {
                setTimeout(() =>{
                    uni.canvasToTempFilePath({
                        canvasId: this.canvas_id,
                        quality: 1,
                        success: (res)=>{
                            resolve(res.tempFilePath)
                        },
                        fail:(err)=>{
                            reject(JSON.stringify(err)|| "Failed to generate poster:101")
                        }
                    },this)
                },1200)
            })

        }
    }
}
