<script setup>
import {NNumberAnimation, NTag, NFlex} from "naive-ui"
import {computed} from "vue";
const props = defineProps({
    plan: {
        type: Number,
        default: 0
    },
    progress: {
        type: Number,
        default: 0
    }
})

const percentProgress = computed(() => {
    if (!Number(props.plan) && !Number(props.progress)) return 0
    return (props.progress * 100) / props.plan
})

const percentColor = computed(() => {
    if (percentProgress.value < 50) return 'color: var(--color-red-500);' // Ужасно
    if (percentProgress.value >= 50 && percentProgress.value < 80) return 'color: var(--color-amber-500);' // Плохо
    if (percentProgress.value >= 80) return 'color: var(--color-emerald-500);' // Хорошо
})

</script>

<template>
    <NTag round :bordered="true">
        <NFlex align="center" justify="center">
            <div>
                План:
                <span :style="percentColor">
                    <NNumberAnimation  show-separator :from="0" :to="progress" />
                </span>
                из
                <NNumberAnimation show-separator :from="0" :to="plan" />
            </div>
        </NFlex>
    </NTag>
</template>

<style scoped>

</style>
