<script setup>
import {useCpuUsage} from "src/utils/system/cpu";
import {computed} from "vue";
const props = defineProps({
    showLabel: {
        default: true
    }
})
const cpuUsage = useCpuUsage()
const singleUsage = computed(()=>{
    return Number((cpuUsage.value[0] || 0).toFixed(2))
})
const colors = [
    { color: '#f56c6c', percentage: 100 },
    { color: '#e6a23c', percentage: 80 },
    { color: '#5cb87a', percentage: 30 },
]
</script>

<template>
    <div class="text-center">
        <slot name="header"></slot>
    </div>

    <div class="text-center">
        <el-progress type="dashboard" :percentage="singleUsage" :color="colors">
            <template #default="{ percentage }">
                <p class="percentage-value">{{ percentage }}%</p>
                <p class="percentage-text" v-if="props.showLabel">CPU使用率</p>
            </template>
        </el-progress>
    </div>

    <div class="text-center">
        <slot name="footer"></slot>
    </div>

</template>

<style scoped>
.percentage-value {
    font-size: 18px;
}
.percentage-text {
    font-size: 14px;
}
</style>
