<template>
    <div class="progress-container">
        <svg viewBox="0 0 120 120">
        <circle class="bg" cx="60" cy="60" r="54" fill="none" stroke-width="6" />
        <circle ref="progress" class="progress" cx="60" cy="60" r="54" fill="none" stroke-width="6"
                stroke-dasharray="339.292" stroke-dashoffset="339.292" />
        </svg>
        <span ref="label" class="label">0%</span>
    </div>
</template>
<script setup lang="ts">
    import {ref , onMounted } from 'vue'

    const props = withDefaults(defineProps<{
        percent:any
    }>(), {
        percent:0
    })

    //设置圆形
    let progress = ref()

    let label = ref()

    function setProgress(percent:any) {
        //圆形进度
        const circle:any = progress.value //document.querySelector('.progress')
        const labels:any =  label.value //document.getElementById('label')
        const radius = 54
        const circumference = 2 * Math.PI * radius

        const clamped = Math.min(100, Math.max(0, percent))
        const offset = circumference - (clamped / 100) * circumference
        circle.style.strokeDashoffset = offset
        labels.textContent = clamped + '%'
    }

    onMounted(() => {
        setProgress(props.percent)
    })

</script>
<style lang="scss" scoped>
    .progress-container {
    display: inline-block;
    position: relative;
    width: 90px;
    height: 90px;
  }
  .progress-container svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
  }
  .progress-container .bg {
    stroke: #e6e6e6;
  }
  .progress-container .progress {
    stroke: #4caf50;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
  }
  .progress-container .label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    color: #c5c5c5;
  }
</style>
