<template>
  <view class="page">
    <!-- 圆形进度条 -->
    <view class="progress-container">
      <canvas
        :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
        canvas-id="progressCanvas"
        class="progress-canvas"
      ></canvas>
      <view class="progress-text">
        <text class="percent">{{ progress }}%</text>
        <text class="label">{{ content }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 80, // 当前进度值（0-100）
      canvasSize: 80, // 画布大小
      strokeWidth: 12, // 线条宽度
      bgColor: "#f0f0f0", // 背景颜色
      progressColor: "#007AFF", // 进度条颜色
      textColor: "#333", // 文字颜色
      content: "", //文字内容,
    };
  },
  mounted() {
    this.drawProgress();
  },
  watch: {
    progress() {
      this.drawProgress();
    },
    progressColor() {
      this.drawProgress();
    },
  },
  methods: {
    // 绘制进度条
    drawProgress() {
      const { progress, canvasSize, strokeWidth, bgColor, progressColor } =
        this;
      const ctx = uni.createCanvasContext("progressCanvas", this);
      const center = canvasSize / 2;
      const radius = center - strokeWidth / 2;

      // 清除画布
      ctx.clearRect(0, 0, canvasSize, canvasSize);

      // 绘制背景圆
      ctx.beginPath();
      ctx.arc(center, center, radius, 0, 2 * Math.PI);
      ctx.setStrokeStyle(bgColor);
      ctx.setLineWidth(strokeWidth);
      ctx.stroke();

      // 绘制进度圆
      const startAngle = -Math.PI / 2; // 从顶部开始
      const endAngle = startAngle + (progress / 100) * 2 * Math.PI;

      ctx.beginPath();
      ctx.arc(center, center, radius, startAngle, endAngle);
      ctx.setStrokeStyle(progressColor);
      ctx.setLineWidth(strokeWidth);
      ctx.setLineCap("round");
      ctx.stroke();
      ctx.draw();
    },
  },
};
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.progress-container {
  position: relative;
  margin: 40rpx 0;
}

.progress-canvas {
  border-radius: 50%;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.percent {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.label {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-top: 10rpx;
}
</style>
