<template>
    <div ref="chartRef">
    </div>
</template>

<script setup lang="ts">
import { getM_S } from '@/utils/dateUtil';
import * as echarts from 'echarts'


const chartRef: any = ref(null)
const chart: any = markRaw({ value: null })

const colors1 = ['rgba(121, 80, 253, 1)', 'rgba(17, 212, 104, 1)', 'rgba(128, 147, 69, 1)', 'rgba(21, 157, 253, 1)']
const colors2 = ['rgba(121, 80, 253, 0.4)', 'rgba(17, 212, 104, 0.4)', 'rgba(128, 147, 69, 0.4)', 'rgba(21, 157, 253, 0.4)']


const props = defineProps({
    data: {
        type: Array<any>,
        default: []
    },
    name: {
        type: String,
        default: '小车'
    },

})

const deviceData: any = ref([])

const timer: any = ref('')

watch(() => props.data, (oldValue: Object, newValue: Object) => {
    deviceData.value = props.data
})

onMounted(async () => {

    setTimeout(() => {
        deviceData.value = props.data
        chart.value = echarts.init(chartRef.value)
        initChart()
    }, 300);

    window.addEventListener('resize', () => {
        setTimeout(() => {
            chart.value.resize()
        }, 300);
    })
})



const initChart = () => {
    option.title.text = props.name
    const series = deviceData.value.map((item: any, index: number) => {
        return {
            data: [item.value ?? '0'],
            type: 'line',
            color: colors1[index],
            name: item.variableName,
            areaStyle: {
                color: colors2[index]
            },
            symbolSize: 0,
        }
    })
    if (series.length > 0) {
        option.series = series
    }
    chart.value.setOption(option)

    startTimer()
}

onUnmounted(() => {
    clearInterval(timer.value)
})


const startTimer = () => {

    timer.value = setInterval(() => {

        setChartData()

    }, 1000)
}



const setChartData = () => {
    let timeArr: any = option.xAxis.data
    if (timeArr.length > 60) {
        timeArr.shift()
    }
    timeArr.push(getM_S())
    option.xAxis.data = timeArr

    //循环图表series
    option.series.forEach((item: any, index: number) => {
        let arr: any = item.data
        if (arr.length > 60) {
            arr.shift()
        }

        //取出电流数据
        if (index <= deviceData.value.length - 1) {
            const item2 = deviceData.value[index]
            arr.push(item2.value ?? '0')
            item.data = arr
        } else {
            arr.push('0')
            item.data = arr
        }
    })

    //取出最大值
    const a: any = option.series.map((item: any) => {
        return Math.max(...item.data)
    })
    option.yAxis.max = Math.ceil(Math.max(...a) * 1.2)
    chart.value.setOption(option)
}


let option = {
    grid: {
        left: '3%', top: '25%', right: '3%', bottom: '2%', containLabel: true
    },
    legend: {
        icon: 'roundRect',
        textStyle: {
            color: colors1,
        },
        right: '2%'
    },
    title: {
        text: '大车电流',
        textStyle: {
            color: '#ffffff',
            fontSize: 16
        },
        top: 0
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
            show: false,
        },
        axisTick: { show: false },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(87, 253, 243, 0.2)',
                width:0.5,
            }
        },
        axisLabel: {
            color: 'rgba(87, 253, 243, 0.2)',
            fontSize: 12
        },
        data: []
    },
    yAxis: {
        max: 5,
        type: 'value',
        splitLine: {
            lineStyle: {
                color: 'rgba(87, 253, 243, 0.2)',
                width:0.5,
            }
        },
        axisLabel: {
            color: 'rgba(87, 253, 243, 0.2)',
            fontSize: 12
        },
        axisTick: { show: false },
    },
    series: [{
        data: [0],
        type: 'line',
        color: 'rgba(121, 80, 253, 0.4)',
        areaStyle: {
            color: 'rgba(121, 80, 253, 0.4)'
        },
        symbolSize: 0,
    }]
};
</script>

<style lang="less" scoped></style>
