<template>
    <div class="person_box">
        <div ref="chartAccess" style="width: 100%;height: 100%;"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})
const chartAccess = ref(null);
let chartDom = null;
const initAccess = (val1, val2, val3) => {
    const hexToRgb = hex => {
        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
        hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b)
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
        return result
            ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16),
            }
            : null
    }
    let xData = val1
    const yData = [
        {
            name: '每日总量',
            data: val2,
        },
        {
            name: '累计总量',
            data: val3,
        },
    ]
    const xAxisFn = xData => {
        return [
            {
                type: 'category',
                boundaryGap: false,
                data: xData,
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: {
                    color: '#ffffff', //x轴label文字颜色
                },
            },
        ]
    }
    const colorList = ['#107FFF', '#55D1FD',]
    if (!chartDom) {
        chartDom = echarts.init(chartAccess.value);
    }
    let option = {
        series: yData.map((item, index) => {
            const rgb = hexToRgb(colorList[index])
            const end = `rgba(${rgb.r},${rgb.g},${rgb.b},0)`
            return {
                name: item.name,
                data: item.data,
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbolSize: 10,
                emphasis: { focus: 'series' },
                animationDuration: 2500,
                animationEasing: 'cubicInOut',
                lineStyle: {
                    width: 3,
                },
                areaStyle: {
                    width: 4,
                    opacity: 0.25,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0.389, color: colorList[index] },
                            { offset: 1, color: end },
                        ],
                        global: false,
                    },
                },
            }
        }),
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
            },
            textStyle: {
                color: '#fafafa',
            },
            borderColor: 'transparent',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            extraCssText: 'backdrop-filter: blur(6px);',
        },
        grid: {
            top: '15%',
            left: '2%',
            right: '6%',
            bottom: '0%',
            containLabel: true,
        },
        legend: {
            show: true,
            top: 13,
            right: 20,
            icon: 'roundRect',
            itemHeight: 5,
            itemWidth: 10,
            itemGap: 40,
            textStyle: {
                fontSize: 12,
                color: '#ffffff',
            },
            itemStyle: {
                borderColor: 'transparent',
                borderWidth: 6,
            },
        },
        xAxis: xAxisFn(xData),
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    color: '#ffffff',
                },
                splitLine: {
                    show: false, //不显示grid竖向分割线
                },
            },
        ],
    };
    chartDom.setOption(option)
};
watch(() => props.resultData, (newVal) => {
    if (chartDom) {
        let xData = Object.keys(newVal.DailyTotal)
        let y1Data = Object.entries(newVal.DailyTotal)
        let y2Data = Object.entries(newVal.Cumulative)
        initAccess(xData, y1Data, y2Data)
    }
}, { deep: true, immediate: true } // 开启深度监听
)
// 生命周期
onMounted(() => {
    let xData = ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '00:00']
    let y1Data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    let y2Data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    initAccess(xData, y1Data, y2Data)
});
// 窗口自适应
window.addEventListener('resize', () => {
    chartDom?.resize();
});
</script>

<style scoped lang="scss">
.person_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
</style>