<template>
    <div class="_running">
        <HeadlineTag type="right" value="运行统计"></HeadlineTag>
        <div class="_running_mains">
            <dv-capsule-chart :config="config" style="width:100%;height:100%" />
        </div>
    </div>
</template>

<script setup>
import { ref, onUnmounted } from "vue";
import HeadlineTag from '@/components/HeadlineTag'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})

// 配置胶囊图数据
const config = ref({
    // 胶囊图数据
    data: [{
        name: '使用中',
        value: 0,
    }, {
        name: '空闲中',
        value: 0,
    }, {
        name: '已离线',
        value: 0,
    }],
    colors: ['#409eff', '#15acaa', '#f44336'], // 关键修改点
    showValue: true,
    // 图表样式配置
    style: {
        barWidth: 20, // 柱子宽度
        barGap: 10, // 柱子间距
        borderRadius: 10, // 柱子圆角
        text: {
            show: true, // 是否显示文字
            fontSize: 12, // 文字大小
            color: '#fff' // 文字颜色
        }
    }
});

watch(() => props.resultData, (newVal) => {
    if (newVal) {
        config.value.data[0].value = newVal.RunStateUse
        config.value.data[1].value = newVal.FreeStateUse
        config.value.data[2].value = newVal.offlineStateUse
    }
}, { deep: true, immediate: true } // 开启深度监听
)
// 组件卸载时的清理逻辑
onUnmounted(() => {
    // 这里可以添加额外的清理逻辑，如果 dv-capsule-chart 有提供销毁方法的话
    // 例如：如果有一个销毁方法 destroy，可以这样调用
    // chartInstance?.destroy(); 
    // 但一般 DataV 组件会自动处理，这里可以留空
});
</script>

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

    &_mains {
        flex: 1;
        margin: 30px;
        display: flex;
        align-items: center;
    }
}

@keyframes scanning {
    to {
        transform: rotate(1turn);
    }
}
</style>