var doc = document

var getId = (id) => {
    return doc.getElementById(id)
}
var getStyle = (ele, pseudoElt) => {
    return window.getComputedStyle(ele, pseudoElt)
}
var getTop = function (e) {
    var offset = e.offsetTop;
    if (e.offsetParent != null) offset += getTop(e.offsetParent);
    return offset;
}
//获取元素的横坐标（相对于窗口）
var getLeft = function (e) {
    var offset = e.offsetLeft;
    if (e.offsetParent != null) offset += getLeft(e.offsetParent);
    return offset;
}

class pageIndex {
    constructor(id) {
        this.canvas = getId(id)//canvas 
        this.ctx = this.canvas.getContext('2d')//canvas ctx
        this.wrap = this.canvas.parentNode//canvas's wrap
        this.offsetTop = getTop(this.canvas)
        this.offsetLeft = getLeft(this.canvas)
        this.wrapStyle = getStyle(this.wrap)
        this.width = this.wrapStyle.width.slice(0, -2)
        this.height = this.wrapStyle.height.slice(0, -2)
        this.canvasBg = __inline('../../img/canvas-bg.png')

        this.init()
    }

    init() {
        this.initWd().initBg().setTouch()
    }

    /**初始化canvas宽高 */
    initWd() {
        this.canvas.width = this.width
        this.canvas.height = this.height

        return this
    }
    initBg() {
        var self = this
        /**背景颜色 */
        this.ctx.fillStyle = "#ebeaee"
        this.ctx.globalCompositeOperation = "destination-over"; //与destination-out实现擦除效果 
        this.ctx.beginPath()
        this.ctx.fillRect(0, 0, this.width, this.height)
        this.ctx.closePath()

        this.ctx.globalCompositeOperation = "source-over"
        /**背景图片 */
        var bg = new Image()
        bg.src = this.canvasBg
        bg.onload = function () {
            self.ctx.drawImage(bg, 0, 0, self.width, self.height)
            /**文本 */
            self.ctx.fillStyle = "#bb8c49"
            self.ctx.font = '30px Microsoft Yahei'
            self.ctx.textAlign = 'center'
            self.ctx.textBaseline = 'middle'
            self.ctx.fillText('刮开您的抽奖码', self.width / 2, self.height / 2)
        }

        setTimeout(function () {
            var myImageData = self.ctx.getImageData(self.width / 4, self.height / 4, self.width / 2, self.height / 2);
            console.log(myImageData)
        }, 0);

        setTimeout(function () {
            self.wrap.style.visibility = 'visible'
        }, 1);
        return this
    }
    setTouch() {
        this.wrap.addEventListener('touchmove', this.AfterTouch.bind(this), false)
        this.wrap.addEventListener('touchstart', this.AfterTouch.bind(this), false)
        this.wrap.addEventListener('touchend', this.AfterTouch.bind(this), false)

        return
    }
    AfterTouch(e) {
        var cor = e.changedTouches && e.changedTouches[0]
        if (cor) {
            this.ctx.globalCompositeOperation = "destination-out";
            this.ctx.beginPath();
            this.ctx.arc(cor.pageX - this.offsetLeft, cor.pageY - this.offsetTop, cor.radiusX && cor.radiusX < 10 ? 10 : cor.radiusX || 10, 0, 2 * Math.PI, true);
            this.ctx.fill();
            this.ctx.closePath();
        }
        this.checkArea()
        e.preventDefault()
    }
    checkArea() {
        var myImageData = this.ctx.getImageData(this.width / 4, this.height / 4, this.width / 2, this.height / 2);
        console.log(myImageData)
    }
}

document.addEventListener('DOMContentLoaded', function () {
    new pageIndex('cardLayer')
    new pageIndex('cardLayer2')
}, false)