const x = 750;
const y = 750;
const r = 615;
const lineWidth = 250;
var lastTime = 0;
var arc;
Component({
  mixins: [],
  data: { percent: '0%', width: '', height: '' },
  props: {
    percent: 0,
    width: '',
    height: ''
  },
  didMount() { },
  didUpdate() {
    console.log("didUpdate");
    console.log(this.props)
    this.start();
  },
  didUnmount() { },
  methods: {
    drawBg() {
      var ctx = this.ctxbg;
      //画背景圆
      ctx.setLineWidth(lineWidth - 10);
      ctx.setLineCap('round');
      ctx.arc(x, y, r, 0, Math.PI * 2, true);
      ctx.setStrokeStyle("#EAEAEA");
      ctx.stroke();
      ctx.draw(false);
    },
    draw() {
      console.log("画图");
      var ctx = this.ctx;
      //画背景圆
      ctx.setLineWidth(lineWidth);
      ctx.setLineCap('round');
      const gx1 = x + r;
      const gy1 = y;

      const gx2 = x + r * Math.cos(Math.PI * 2 - arc);
      const gy2 = y + r * Math.sin(Math.PI * 2 - arc);

      const grd = this.ctx.createLinearGradient(gx1, gy1, gx2, gy2);

      // grd.addColorStop(0, '#DC51FF');
      // grd.addColorStop(1, '#6FBDFF');
      // ctx.setStrokeStyle(grd);

      ctx.setStrokeStyle("#0080FF");

      ctx.beginPath();

      if (arc > 0) {
        if (Math.PI * 2 == arc) {
          ctx.arc(x, y, r, 0, Math.PI * 2);
        } else {
          ctx.arc(x, y, r, 0, Math.PI * 2 - arc, true);
        }
      } else {
       
      }
      ctx.stroke();
      ctx.draw(false);
    },
    start() {
      if (new Date().getTime() - lastTime < 500)
        return;
      lastTime = new Date().getTime();

      console.log("start");
      //设置角度
      arc = this.props.percent * Math.PI * 2 / 100;

      this.setData({
        percent: this.props.percent + "%",
        width: this.props.width,
        height: this.props.height
      });
      this.ctxbg = my.createCanvasContext('canvas-bg');
      this.ctx = my.createCanvasContext('canvas');

      this.ctxbg.clearRect(0, 0, r * 2, r * 2)
      this.ctx.clearRect(0, 0, r * 2, r * 2)


      this.drawBg();
      this.draw();
    }
  },

  onInit() {
    console.log("控件初始化");
    console.log(this.props)
    // this.start();
  },
});