<script setup>
import {
    useMemoryTotalSizeWithByte,
    useMemoryUsageSizeWithByte
} from "src/utils/system/memory";
import {computed, onMounted, reactive, ref, watch} from "vue";
import * as echarts from "echarts";
import moment from "moment";
import {bytesToSizeWithUnit} from "src/utils/file/file";
const props = defineProps({
    showLabel: {
        type:Boolean,
        default: true,
    },
    label: {
        type: String,
        default: "内存使用情况",
    },
    labelPosition :{
        type: String,
        default: "center",
    },
    labelStyle: {
        type: Object,
        default: {
            fontSize: 14
        }
    },
    maxStep:{
        type: Number,
        default: 600
    },
    showMax: {
        type:Boolean,
        default: true
    }
})
const memoryTotal = useMemoryTotalSizeWithByte()
const memoryUsage = useMemoryUsageSizeWithByte()
const colors = [
    { color: '#f56c6c', percentage: 100 },
    { color: '#e6a23c', percentage: 80 },
    { color: '#5cb87a', percentage: 30 },
]

const chartRef = ref()
const chart = reactive({
    title: {
        left: props.labelPosition,
        text: props.label,
        textStyle: props.labelStyle
    },
    tooltip: {
        trigger: 'axis',
        formatter:  (params)=> {
            params = params[0];
            return `
                <div>${params.value[0]}</div>
                 <div class="text-center">${bytesToSizeWithUnit(params.value[1])}</div>
                `;
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'category',
        splitLine: {
            show: false
        },
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        },
        axisLabel: {
            align: 'right',
            overflow: 'truncate',
            ellipsis: '...',
            width: 75,
            formatter(value,index){
                return bytesToSizeWithUnit(value)
            }
        },
        min: 0,
        max: props.showMax?memoryTotal:undefined,
    },
    grid:{
        left: 75,
        containLabel: false
    },
    visualMap: getVisualMap(),
    series: [
        {
            name: '内存使用情况',
            type: 'line',
            showSymbol: false,
            data: [],
            areaStyle: {
                origin: 'start'
            }
        }
    ]
})

function getVisualMap(){
    return {
        show: false,
        pieces: [
            {
                gte: 0,
                lte: memoryTotal.value * 0.3,
                color: '#5cb87a'
            },
            {
                gt: memoryTotal.value * 0.3,
                lte: memoryTotal.value * 0.8,
                color: '#e6a23c'
            },
            {
                gt: memoryTotal.value * 0.8,
                lte: memoryTotal.value,
                color: '#f56c6c'
            },
        ]
    }
}

onMounted(()=>{
    const chartInst = echarts.init(chartRef.value)
    chartInst.setOption(chart)
    chartInst.resize()

    watch(memoryUsage,(v)=>{
        chart.visualMap = getVisualMap()
        let data = chart.series[0].data
        data.push({
            name: moment().format("HH:mm:ss"),
            value: [moment().format("HH:mm:ss"), v]
        })
        if(data.length > props.maxStep){
            data.splice(0,1)
        }
        chartInst.setOption(chart)
    })
    window.addEventListener("resize",()=>{
        chartInst.resize()
    })
})

</script>

<template>
    <div ref="chartRef" class="w-full h-full"></div>
</template>

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