<template>
  <view class="progress-ring" :style="{ width: size + 'px', height: size + 'px' }">
    <svg :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`">
      <circle
        :cx="size / 2" :cy="size / 2" :r="radius"
        fill="none" :stroke="bgColor" :stroke-width="strokeWidth"
      />
      <circle
        :cx="size / 2" :cy="size / 2" :r="radius"
        fill="none" :stroke="color" :stroke-width="strokeWidth"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="offset"
        stroke-linecap="round"
        :transform="`rotate(-90 ${size / 2} ${size / 2})`"
      />
    </svg>
    <view class="progress-text">
      <text class="progress-value">{{ Math.round(percent) }}</text>
      <text class="progress-unit">%</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  percent: number
  size?: number
  strokeWidth?: number
  color?: string
  bgColor?: string
}>(), {
  size: 120,
  strokeWidth: 8,
  color: '#C4623A',
  bgColor: '#E8E2DC',
})

const radius = computed(() => (props.size - props.strokeWidth) / 2)
const circumference = computed(() => 2 * Math.PI * radius.value)
const offset = computed(() => circumference.value * (1 - props.percent / 100))
</script>

<style lang="scss" scoped>
.progress-ring {
  position: relative;
  @include flex-center;
}

.progress-text {
  position: absolute;
  @include flex-center;
}

.progress-value {
  font-size: var(--tk-font-num);
  font-weight: bold;
  color: $tx;
}

.progress-unit {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  margin-left: 2px;
}
</style>
