class Scratch {
  constructor (page, opts) {
    opts = opts || {}
    this.page = page
    this.canvasId = opts.canvasId || 'canvas'
    this.width = opts.width || 330
    this.height = opts.height || 300
    this.screenWidth = opts.screenWidth || 375
    // this.maskColor = opts.maskColor || '#D2D2D2'
    // this.maskColor = '#dddddd'
		this.maskColor = 'transparent';
    this.size = opts.size || 10
    this.r = this.size * 2
    this.area = this.r * this.r
    this.scale = opts.scale || 0.3
    this.totalArea = this.width * this.height
		this.bgImg = opts.bgImg
		this.show = false
		this.codeType = opts.codeType
		this.direction = opts.direction;//号码行数
		this.transverse = opts.transverse;//每行个数
    this.init()
  }
 
  init () {
    
    this.clearPoints = []
    this.ctx = uni.createCanvasContext(this.canvasId)
    this.drawMask()
    this.bindTouch()
  }
 
  drawMask () {
		let sx, sy, swidth, sheight, x, y, width, height;
		// 底图是像素1080的宽
		
		sx = (this.screenWidth-this.width)/2*1080/this.screenWidth;
		sy = (this.screenWidth/1.5)*1080/this.screenWidth;//开始剪切的 y 坐标位置
		swidth = this.width*1080/this.screenWidth;//被剪切图像的宽度
		sheight = this.height*1080/this.screenWidth;//被剪切图像的高度
		x = 0;//在画布上放置图像的 x 坐标位置(从画布的左上顶点开始绘制)
		y = 0;
		width = this.width;//要使用的图像的宽度
		height = this.height;
		
		
		if(this.codeType==='digit_number_icon'){//888
			// sy = 820;// 上下刮板一体
			sy = 1207;// 上下刮板分体
		}
		if(this.codeType==='digit_icon'&&this.direction==2){//666
			sy = 528;
		}
		if(this.codeType==='digit_icon'&&this.direction==4){//777
			sy = 1197;
		}
		
		console.log(sx, sy, swidth, sheight, x, y, width, height);
		// 数字计算的稍微会偏0.00几像素
		this.ctx.drawImage(this.bgImg, sx, sy, swidth, sheight, x, y, width, height);
		// this.ctx.drawImage(this.bgImg, 64.8, 720, 950.4, 864, 0, 0, 330, 300);
    this.ctx.setFillStyle(this.maskColor)
    this.ctx.fillRect(0, 0, this.width, this.height)
    this.ctx.draw()
  }
 
  bindTouch () {
    this.page.touchStart = (e) => {
      this.eraser(e, true)
    }
    this.page.touchMove = (e) => {
      this.eraser(e, false)
    }
    this.page.touchEnd = (e) => {
      if (this.show) {
        this.ctx.clearRect(0, 0, this.width, this.height)
        this.ctx.draw()
				// console.log('刮奖面积达标');
      }
    }
  }
 
  eraser (e, bool) {
    const len = this.clearPoints.length
    let count = 0
    const x = e.touches[0].x; const y = e.touches[0].y
    const x1 = x - this.size
    const y1 = y - this.size
    if (bool) {
      this.clearPoints.push({
        x1: x1,
        y1: y1,
        x2: x1 + this.r,
        y2: y1 + this.r
      })
    }
    for (const item of this.clearPoints) {
      if (item.x1 > x || item.y1 > y || item.x2 < x || item.y2 < y) {
        count++
      } else {
        break
      }
    }
    if (len === count) {
      this.clearPoints.push({
        x1: x1,
        y1: y1,
        x2: x1 + this.r,
        y2: y1 + this.r
      })
    }
    if (len && this.r * this.r * len > this.scale * this.totalArea) {
      this.show = true;
			// console.log('刮奖面积达标');
    }
    this.clearArcFun(x, y, this.r, this.ctx)
    this.ctx.draw(true);
  }
 
  clearArcFun (x, y, r, ctx) {
    let stepClear = 1
    clearArc(x, y, r)
    function clearArc (x, y, radius) {
      const calcWidth = radius - stepClear
      const calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth)
 
      const posX = x - calcWidth
      const posY = y - calcHeight
 
      const widthX = 2 * calcWidth
      const heightY = 2 * calcHeight
 
      if (stepClear <= radius) {
        ctx.clearRect(posX, posY, widthX, heightY)
        stepClear += 1
        clearArc(x, y, radius)
      }
    }
  }
}
 
export default Scratch