<template>
  <view class="circle-progress">
    <view class="circle-progress__content">
      <text class="circle-progress__text">{{ percentage }}%</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "CircleProgress",
  props: {
    // 圆环进度百分比值，0-100
    percentage: {
      type: Number,
      default: 0,
      validator: (value) => value >= 0 && value <= 100,
    },
    // 进度条颜色
    color: {
      type: String,
      default: "#42b983", // 绿色主题色
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: "#c8c8c8", // 灰色
    },
    // 尺寸
    size: {
      type: Number,
      default: 100,
    },
    // 边框宽度
    borderWidth: {
      type: Number,
      default: 5,
    },
  },
  computed: {
    progressStyle() {
      const degrees = this.percentage * 3.6; // 将百分比转换为角度
      const style = {
        width: `${this.size}px`,
        height: `${this.size}px`,
        borderWidth: `${this.borderWidth}px`,
        borderColor: this.backgroundColor,
      };

      // 根据进度设置不同的样式
      if (this.percentage <= 50) {
        style.background = `conic-gradient(
          ${this.color} 0deg ${degrees}deg,
          ${this.backgroundColor} ${degrees}deg 360deg
        )`;
      } else {
        style.background = `conic-gradient(
          ${this.color} 0deg 180deg,
          ${this.backgroundColor} 180deg 360deg
        )`;
      }

      return style;
    },
    textStyle() {
      return {
        fontSize: `${this.size * 0.2}px`,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.circle-progress {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &__content {
    position: relative;
    border-radius: 50%;
    mask: radial-gradient(transparent 60%, black 61%);
  }

  &__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #333;
    z-index: 2;
  }
}
</style>