/* canvas画圆的样式 */

.progress_box {
  position: relative;
  /* 这里的宽高是必须大于等于canvas圆环的直径 否则绘制到盒子外面就看不见了,一开始设置 440rpx; height:440rpx; 发现 在360X640分辨率的设备，下绘制的圆环跑盒子外去了,小程序使用rpx单位适配 ，但是canvas绘制的是px单位的。所以只能用px单位绘制的圆环在盒子内显示 */
  /*  220px;
  height: 220px; */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  float: left;
}

.progress_bg {
  position: absolute;
  /*  220px;
  height: 220px; */
}

.progress_canvas {
  /*  220px;
  height: 220px; */
}

.progress_text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress_info {
  font-size: 36rpx;
  padding-left: 16rpx;
  letter-spacing: 2rpx;
}

.progress_dot {
   16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #fb9126;
}
.progress_text image {
   3rem;
  height: 3rem;
}
.equName {
  position: absolute;
  bottom: 0;
  display: flex;
  font-size: 0.8rem;
}
/* 清除浮动 */

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.cfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  zoom: 1;
}

const app = getApp()

Page({
  data: {
    imgarr: ["cjq.png", "fj.png", "sj.png", "kt.png"],
    wrapColor: ["#40a1ff", "#4ecb76", "#955ee1", "#e37254"],
    equName: ["空调", "风机", "采集器", "水浸"]
  },
  onLoad: function() {
    this.dataFun();

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    let windW = wx.getSystemInfoSync().windowWidth;
    let canvasW = windW / 3;

    this.setData({
      canvasW: canvasW
    });

    var arr = [1, 2, 3, 4];

    for (let i = 0; i < arr.length; i++) {
      //底层canvas的ID
      let canvasID = "canvasProgressbg-" + i;
      //外层canvas的ID
      let wrapCanvasID = "canvasProgress-" + i;

      this.drawProgressbg(canvasID, canvasW);

      this.drawCircle(arr[i] * 0.5, wrapCanvasID, canvasW, this.data.wrapColor[i]);
    }

  },
  //延迟模拟数据
  dataFun: function() {
    //延迟500ms,模拟网络请求时间
    setTimeout(() => {
      this.setData({
        canvasData: [1, 2, 3, 4]
      })
    }, 500)

  },
  // 画圆函数
  drawProgressbg: function(canvasId, canvasW) {
    let ctx = wx.createCanvasContext(canvasId, this);
    ctx.setLineWidth(8); // 设置圆环的宽度
    ctx.setStrokeStyle('#404c58'); // 设置圆环的颜色
    ctx.setLineCap('round') // 设置圆环端点的形状
    ctx.beginPath(); //开始一个新的路径
    ctx.arc(canvasW / 2, canvasW / 2, canvasW / 2 - 20, 0, 2 * Math.PI, false);
    //设置一个原点(110,110)，半径为100的圆的路径到当前路径
    ctx.stroke(); //对当前路径进行描边
    ctx.draw();
  },
  // 画彩色圆环的函数drawCircle
  drawCircle: function(step, wrapCanvasID, canvasW, wrapColor) {
    let context = wx.createCanvasContext(wrapCanvasID);
    // 设置渐变
    var gradient = context.createLinearGradient(200, 100, 100, 200);
    gradient.addColorStop("0", wrapColor);
    gradient.addColorStop("0.5", wrapColor);
    gradient.addColorStop("1.0", wrapColor);

    context.setLineWidth(8);
    context.setStrokeStyle(gradient);
    context.setLineCap('square')
    context.beginPath();
    // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
    context.arc(canvasW / 2, canvasW / 2, canvasW / 2 - 20, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
    context.stroke();
    context.draw()
  }
})