// component/progress/progress.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    progress: 100
  },

  /**
   * 组件的初始数据
   */
  data: {
    progress_txt: '信用较差',
    progress_txt_color1: '#f1fefc',
    progress_txt_color2: '#b4f7ec',
    count: 0, // 设置 计数器 初始为0
    countTimer: null, // 设置 定时器 初始为null
    x: 100,
    y: 100,
    r: 90,
  },

  ready: function () {
    this.drawProgressbg();
  },

  observers: {
    'progress': function (progress) {
      if (progress) {
        if (progress >= 90) {
          this.setData({
            progress_txt_color1: '#f2fff7',
            progress_txt_color2: '#96f3bd',
            progress_txt: '信用优秀'
          })
        } else if (progress >= 60) {
          this.setData({
            progress_txt_color1: '#f6f2e3',
            progress_txt_color2: '#f6e59f',
            progress_txt: '信用一般'
          })
        } else {
          this.setData({
            progress_txt_color1: '#fff6f6',
            progress_txt_color2: '#f29696',
            progress_txt: '信用较差'
          })
        }
      } else {
        this.setData({
          progress_txt_color1: '#f1fefc',
          progress_txt_color2: '#b4f7ec',
        })
      }
      this.drawProgressCircle(progress / 100)
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //倒计时方法
    countInterval: function () {
      // 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
      this.countTimer = setInterval(() => {
        if (this.data.count <= 60) {
          /* 绘制彩色圆环进度条  
          注意此处 传参 step 取值范围是0到2，
          所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
          */
          this.drawProgressCircle(this.data.count / (60 / 2));
          this.setData({
            progress_txt: (this.data.count++) + '%'
          });
        } else {
          this.setData({
            progress_txt: "加载完成"
          });
          clearInterval(this.countTimer);
        }
      }, 100)
    },
    /**
     * 绘制灰色背景
     */
    drawProgressbg: function () {
      // 使用 wx.createContext 获取绘图上下文 context
      var ctx = null;
      var x = this.data.x
      var y = this.data.y
      var r = this.data.r
      wx.createSelectorQuery().in(this)
        .select("#canvasProgressbg")
        .context(function (res) {
          console.log("节点实例：", res);
          // 节点对应的 Canvas 实例。
          ctx = res.context;
          ctx.setLineWidth(8); // 设置圆环的宽度
          ctx.setStrokeStyle('#EEEEEE'); // 设置圆环的颜色
          ctx.setLineCap('round') // 设置圆环端点的形状
          ctx.beginPath(); //开始一个新的路径
          ctx.arc(x, y, r, Math.PI / 2, 1.5 * Math.PI, false);
          ctx.stroke(); //对当前路径进行描边
          ctx.beginPath(); //开始一个新的路径
          ctx.setLineWidth(1); // 设置圆环的宽度
          ctx.arc(x, y, r - 10, Math.PI / 2, 1.5 * Math.PI, false);
          ctx.stroke()

          ctx.setStrokeStyle('#76ECD3');
          ctx.setFillStyle('#76ECD3')
          for (let i = 0; i < 5; i++) {
            var radian = Math.PI / 4 * i
            var x1 = x - Math.sin(radian) * (r - 10)
            var y1 = y + Math.cos(radian) * (r - 10)
            var x2 = x - Math.sin(radian) * (r - 10 - 4)
            var y2 = y + Math.cos(radian) * (r - 10 - 4)
            var x3 = x - Math.sin(radian) * (r - 10 - 12)
            var y3 = y + Math.cos(radian) * (r - 10 - 12)
            ctx.beginPath(); //开始一个新的路径
            ctx.setLineWidth(1); // 设置宽度
            ctx.moveTo(x1, y1)
            ctx.lineTo(x2, y2)
            ctx.stroke()
            if (i % 2 == 0) {
              ctx.beginPath(); //开始一个新的路径
              ctx.setFontSize(10)
              var text = i / 4 * 100 + ''
              var metrics = ctx.measureText(text)
              var w = metrics.width
              ctx.fillText(text, x3 - w / 2, y3 + 4)

            }
          }
          ctx.draw();
        })
        .exec();


    },
    /**
     * 绘制小程序进度
     * @param {*} step 
     */
    drawProgressCircle: function (step) {
      let ctx = null;
      var x = this.data.x
      var y = this.data.y
      var r = this.data.r
      wx.createSelectorQuery().in(this)
        .select("#canvasProgress")
        .context(function (res) {
          console.log("节点实例：", res); // 节点对应的 Canvas 实例。
          ctx = res.context;
          // 设置渐变
          var gradient = ctx.createLinearGradient(0, 0, 0, 200);
          gradient.addColorStop("0", "#96f3bd");
          gradient.addColorStop("0.1", "#f6e59f");
          gradient.addColorStop("0.4", "#f6e59f");
          gradient.addColorStop("1.0", "#f29696");

          ctx.setLineWidth(10);
          ctx.setStrokeStyle(gradient);
          ctx.setLineCap('round')
          ctx.beginPath();
          // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
          var start = Math.PI / 2
          ctx.arc(x, y, r, start, step * Math.PI + start, false);
          ctx.stroke();
          ctx.draw()
        })
        .exec();

    },
  }
})