<template>
    <div class="_runnin">
        <HeadlineTag type="right" value="性能统计"></HeadlineTag>
        <div class="_runnin_mains">
            <!-- 修正引用名称，与脚本里保持一致 -->
            <div class="_runnin_mains_item" style="width: 33%;height: 100%;">
                <div style="width: 100%;">
                    <waterdrop width="100%" fontSize="32px" circleBackGround="rgb(8, 36, 62)" birderColor="transparent"
                        color="rgb(42, 139, 247)" :heightTop="'-' + resultData.CPU + '%'"
                        :dropTitle="resultData.CPU + '%'">
                    </waterdrop>
                </div>
                <span style="margin-top: 10px;font-weight: bold;">CPU</span>
            </div>
            <div class="_runnin_mains_item" style="width: 33%;height: 100%;">
                <div style="width: 100%;">
                    <waterdrop width="100%" fontSize="32px" circleBackGround="rgb(8, 36, 62)"
                        birderColor="rgb(8, 36, 62)" color="rgb(251, 97, 38)" :heightTop="'-' + resultData.RAM + '%'"
                        :dropTitle="resultData.RAM + '%'">
                    </waterdrop>
                </div>
                <span style="margin-top: 10px;font-weight: bold;">RAM</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import 'echarts-liquidfill';
import HeadlineTag from '@/components/HeadlineTag'
import waterdrop from '@/components/waterdrop'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})

</script>

<style lang="scss" scoped>
._runnin {
    display: flex;
    flex-direction: column;

    &_mains {
        flex: 1;
        margin: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 30px;

        &_item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #FFF;
        }
    }
}
</style>