<template>
    <view class="w-full flex justify-between items-center gap-20">
        <view class="text-28 text-fore-title shrink-0" :style="{width: data.labelWidth}">{{ data.label }}</view>
        <div class="w-full h-24 rounded-full bg-gray-200 overflow-hidden">
            <div class="h-full rounded-full bg-blue-300" :style="{width: progress+'%'}" />
        </div>
        <view class="text-30 text-fore-title text-right shrink-0" :style="{width: data.scoreWidth}">
            <text>{{ data.score }}</text>
            <text class="text-24 text-fore-placeholder">/{{ data.total }}</text>
        </view>
    </view>
</template>

<script setup lang="ts">
import {VoluntaryScoreItem} from "@/types/voluntary";

const props = defineProps<{ data: VoluntaryScoreItem }>()

const progress = computed(() => props.data.total && props.data.score ? props.data.score * 100 / props.data.total : 0)
</script>

<style scoped>

</style>