// 完成度环。用 SVG data-uri 画（和 record 页的体重折线图同一套路），不用 canvas：
// canvas 在 scroll-view 里的层级、滚动跟随和截图行为全是坑。
const TAU = 2 * Math.PI;
const R = 42; // viewBox 100 下的半径，留出描边宽度

function ringSvg(percent, stroke, track, fill) {
  const c = TAU * R;
  const p = Math.max(0, Math.min(100, Number(percent) || 0));
  const off = c * (1 - p / 100);
  const circle = (color, dash) =>
    '<circle cx="50" cy="50" r="' + R + '" fill="none" stroke="' + color +
    '" stroke-width="' + stroke + '" stroke-linecap="round"' + dash + '/>';
  return (
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">' +
    circle(track, '') +
    '<g transform="rotate(-90 50 50)">' +
    circle(fill, ' stroke-dasharray="' + c.toFixed(1) + '" stroke-dashoffset="' + off.toFixed(1) + '"') +
    '</g></svg>'
  );
}

Component({
  options: { addGlobalClass: true },
  properties: {
    percent: { type: Number, value: 0 },
    size: { type: Number, value: 180 }, // rpx
    stroke: { type: Number, value: 8 }, // viewBox 单位，即直径的百分比
    track: { type: String, value: '#FFE6BA' },
    fill: { type: String, value: '#F5A947' },
  },
  data: { src: '', boxStyle: '' },
  observers: {
    'percent,size,stroke,track,fill': function (percent, size, stroke, track, fill) {
      const svg = ringSvg(percent, stroke, track, fill);
      this.setData({
        src: 'data:image/svg+xml,' + encodeURIComponent(svg),
        boxStyle: 'width:' + size + 'rpx;height:' + size + 'rpx',
      });
    },
  },
});