<template>
    <div>
        <div class="number" v-if="textPosition == 'top'">
            {{ showProgress }} <span> (节)</span>
        </div>
    </div>
    <div class="progress" :style="{ width, height }">
        <svg viewBox="0 0 96 96" class="svg-circle-progress">
            <circle r="38" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="4" class="svg-progress"
                style="stroke-dasharray: 275, 279.602; stroke: rgba(255, 255, 255, 0.19)"></circle>
            <circle r="38" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="4" class="svg-progress"
                :style="`stroke-dasharray: ${progressValue}, 279.602;stroke:${color};`"></circle>
        </svg>
        <div class="mask">
            <slot></slot>
        </div>
    </div>
    <div class="bottomNumber" v-if="textPosition == 'bottom'">
        {{ showProgress }} <span v-if="showProgress
            > 1000">(人)</span>
        <span v-else>(节)</span>
    </div>
</template>
<script setup lang="ts">
import { ref, toRefs, watch, onMounted } from 'vue';

const props = defineProps({
    targetValue: {
        type: Number,
        require: false,
        default: -1,
    },
    color: {
        type: String,
        default: '#4c7cee',
    },
    width: {
        type: String,
        default: '54.6px',
    },
    height: {
        type: String,
        default: '54.6px',
    },
    textPosition: {
        type: String,
        require: false,
        default: 'top',
    }
});
const { height, width, color, targetValue, textPosition } = toRefs(props);

let showProgress = ref<number>(0);
const addData = () => {
    if (targetValue.value === 0) return;
    let timer = setInterval(() => {
        if (targetValue.value === showProgress.value) {
            clearInterval(timer), timer == null;
            return;
        }
        // showProgress.value = showProgress.value + 200
        // console.log(showProgress.value)
        // console.log("targetValue.value", targetValue.value)
        // showProgress.value = showProgress.value + 6
        ++showProgress.value;


    }, 10);
};
onMounted(() => {
    addData();
});
// const progressValue = ref<number>((showProgress.value / 360) * 250);
const progressValue = ref(0)
watch(showProgress, (newValue: number) => {
    progressValue.value = 360;
});
</script>
<style lang="scss" scoped>
.progress {

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
    text-align: center;
}

.svg-circle-progress {
    position: relative;
    transform: rotate(-90deg);

}

.svg-progress {
    stroke: #2196f3;
    stroke-linecap: round;
    transition: all 0.3s linear;
}

.mask {
    position: absolute;
    margin-top: 5px;
}

.number {
    font-size: 14px;
    font-weight: bold;

    span {
        font-size: 12px;
    }
}

.bottomNumber {
    font-size: 14px;
    font-weight: bold;

    span {
        font-size: 12px;
    }
}
</style>
