<script setup>
import {useMemoryTotalSize, useMemoryUsage, useMemoryUsageSize} from "src/utils/system/memory";
const props = defineProps({
    showLabel: {
        default: true
    }
})
const usage = useMemoryUsage()
const used = useMemoryUsageSize()
const total = useMemoryTotalSize()
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="usage" :color="colors">
            <template #default="{ percentage }">
                <p class="percentage-value">{{ percentage }}%</p>
                <div class="percentage-text" v-if="props.showLabel">内存使用率</div>
            </template>
        </el-progress>
    </div>

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

</template>

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