<template>
    <view :style="{
          width: size + 'rpx',
          height: size + 'rpx',
          '--offset': offset
        }"
        v-html="svgHtml"
        ref="svgRef"
    >
    </view>
    <!-- <svg viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="#7C7C7C" stroke-width="7" fill="none" />
        <circle cx="50" cy="50" r="40" stroke="#10F6FC" stroke-width="7" fill="none" stroke-dasharray="251.2" stroke-dashoffset="251.2" class="progress-bar"/>
    </svg> -->
</template>

<script setup>
import { ref, computed, watch } from "vue";

const props = defineProps({
  size: {
    type: Number,
    default: 280,
  },
  color: {
    type: String,
    default: "#333333",
  },
  progress:{}
});

const svgRef = ref(null)
const offset = ref(251.2);
const svgHtml = ref(`<svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" stroke="#7C7C7C" stroke-width="7" fill="none" />
      <circle cx="50" cy="50" r="40" stroke="#10F6FC" stroke-width="7" fill="none" stroke-dasharray="251.2" stroke-dashoffset="${offset.value}"/>
  </svg>`);

watch(() => props.progress, (newVal, oldVal) => {
  updateProgress(newVal)
},{deep:true});

// 更新进度函数
const updateProgress=(newProgress)=>{
  offset.value = 251.2 - (251.2 * newProgress) / 100;
  svgHtml.value = `<svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" stroke="#7C7C7C" stroke-width="7" fill="none" />
      <circle cx="50" cy="50" r="40" stroke="#10F6FC" stroke-width="7" fill="none" stroke-dasharray="251.2" stroke-dashoffset="${offset.value}"/>
  </svg>`
}
</script>

<style scoped>

</style>