<script setup>
import {onMounted, reactive, ref, watch} from "vue";
import * as echarts from "echarts";
import moment from "moment";
import {bytesToSizeWithUnit} from "src/utils/file/file";
import {useNetworkSumRate} from "src/utils/system/network";
const props = defineProps({
    showLabel: {
        type:Boolean,
        default: true,
    },
    label: {
        type: String,
        default: "网络状态",
    },
    labelPosition :{
        type: String,
        default: "85",
    },
    labelStyle: {
        type: Object,
        default: {
            fontSize: 14
        }
    },
    maxStep:{
        type: Number,
        default: 600
    },
    showMax: {
        type:Boolean,
        default: true
    }
})
const netWorkSumRate = useNetworkSumRate()
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',
        valueFormatter(value){
            return `${bytesToSizeWithUnit(value)}/s`
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'category',
        splitLine: {
            show: false
        },
    },
    yAxis: {
        type: 'value',
        boundaryGap: false,
        splitLine: {
            show: false
        },
        axisLabel: {
            align: 'right',
            overflow: 'truncate',
            ellipsis: '...',
            width: 85,
            formatter(value){
                return `${bytesToSizeWithUnit(value)}/s`
            }
        },
        min: 0,
    },
    grid:{
        left: 85,
        containLabel: false
    },
    legend: {
        left: 'right'
    },
    series: [
        {
            name: '上传',
            type: 'line',
            showSymbol: false,
            data: [],
            areaStyle: {
                origin: 'start'
            },
            itemStyle:{
                color: "#e6a23c"
            }
        },
        {
            name: '下载',
            type: 'line',
            showSymbol: false,
            data: [],
            areaStyle: {
                origin: 'start'
            },
            itemStyle:{
                color: "#5cb87a"
            }
        }
    ]
})

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

    watch(netWorkSumRate,(v)=>{
        let upload = chart.series[0].data
        upload.push({
            name: moment().format("HH:mm:ss"),
            value: [moment().format("HH:mm:ss"), v.sent]
        })
        if(upload.length > props.maxStep){
            upload.splice(0,1)
        }

        let download = chart.series[1].data
        download.push({
            name: moment().format("HH:mm:ss"),
            value: [moment().format("HH:mm:ss"), v.recv]
        })
        if(download.length > props.maxStep){
            download.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>
