<script setup>
import { computed, defineProps, onBeforeMount, ref } from 'vue';
import typeJson from './type_parse.json';

const allTypes = ref(typeJson);
const props = defineProps({
    type: {
        type: String,
        required: true,
    },
    value: {
        type: String,
        required: false,
    },
})

const bgColor = ref(null)
const operator = {
    c(obj, value) {
        let keys = Object.keys(obj.values)
        let prev = 0;
        for (let key of keys) {
            if (key > prev && key <= value) {
                prev = key
            }
        }
        return obj.values[prev]
    },
    e(obj, value) {

        return obj.values[value]
    },
}
const progressValue = ref(0); // Initialize progress value with 0
const finalValue = computed(() => {
    const singleObject = allTypes.value[props.type];
    // console.log('singleObject', singleObject)
    if (operator[singleObject.type](singleObject, props.value) > 0 && operator[singleObject.type](singleObject, props.value) <= 33) {
        bgColor.value = 'success'
    }
    if (operator[singleObject.type](singleObject, props.value) > 33 && operator[singleObject.type](singleObject, props.value) <= 50) {
        bgColor.value = 'yellow'
    }
    if (operator[singleObject.type](singleObject, props.value) > 50 && operator[singleObject.type](singleObject, props.value) <= 80) {
        bgColor.value = 'warning'
    }
    if (operator[singleObject.type](singleObject, props.value) > 80 && operator[singleObject.type](singleObject, props.value) <= 100) {
        bgColor.value = 'red'
    }
    return operator[singleObject.type](singleObject, props.value)

})

onBeforeMount(async () => {
    await new Promise(resolve => {
        setTimeout(() => {
            progressValue.value = finalValue.value;
            resolve();
        }, 500); // Simulating some delay, you can replace this with your actual async logic
    });
});
</script>

<template>
    <v-progress-linear :model-value="progressValue" :height="22" :color="bgColor" style="">
        <!-- <template v-slot:default="{ progressValue }"> -->
        <strong class="answer">{{ props.value }}</strong>
        <!-- </template> -->
    </v-progress-linear>
</template>
<style>
.v-progress-linear__determinate {
    border-radius: 0px 5px 5px 0px !important;
}

.answer {
    background: rgb(var(--v-theme-yellow));
    border-radius: 25px 25px 25px 25px;
    padding-left: 7px;
    padding-right: 7px;
    font-size: 10px;
    color: white;
    font-weight: 500;
}
</style>
