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

<script setup>
import * as echarts from 'echarts'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})
const chartDistrict = ref(null);
let chartDom = null;
const initAccess = (val1, val2, val3) => {
    function xWrapText(params, num = 2) {
        let newParamsName = ''
        const paramsNameNumber = params.length
        const provideNumber = num //一行显示几个字
        const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
        if (paramsNameNumber > provideNumber) {
            for (let p = 0; p < rowNumber; p++) {
                let tempStr = ''
                const start = p * provideNumber
                const end = start + provideNumber
                if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                } else {
                    tempStr = params.substring(start, end) + ''
                }
                newParamsName += tempStr
            }
        } else {
            newParamsName = params
        }
        return newParamsName
    }
    let xData = val1
    let y1Data = val2
    let y2Data = val3
    if (!chartDom) {
        chartDom = echarts.init(chartDistrict.value);
    }
    let option = {
        grid: {
            left: '10%',
            right: '10%',
            top: '20%',
            bottom: '10%',
        },
        title: {
            show: false,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {
                color: '#fafafa',
            },
            borderColor: 'transparent',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            extraCssText: 'backdrop-filter: blur(6px);',
        },
        legend: {
            data: ['非法入侵', '强行闯入'],
            right: 'center',
            top: '6%',
            itemWidth: 11,
            itemHeight: 11,
            textStyle: {
                color: '#B3CFFF',
                fontSize: 12,
            },
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            show: true,
            axisTick: {
                show: false,
            },
            axisLabel: {
                fontSize: 9.5,
                color: '#B3CFFF',
                formatter(params) {
                    const res = xWrapText(params, 6) // 文字换行处理
                    return params.length > 15 ? `${res.slice(0, 15)}...` : res
                },
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#4e608b', // 左边线的颜色
                    width: '1', // 坐标线的宽度
                },
            },
            data: xData,
        },],
        yAxis: [{
            type: 'value',
            scale: true,
            name: '',
            axisLine: {
                show: false,
            },
            splitNumber: 2,
            axisTick: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    color: '#4e608b', // 使用深浅的间隔色
                },
            },
            axisLabel: {
                fontSize: 12,
                color: '#B3CFFF',
                margin: 12,
            },
            min: 0,
            boundaryGap: [0.2, 0.2],
        },
        {
            type: 'value',
            scale: true,
            axisLine: {
                show: false,
            },
            splitNumber: 2,
            axisTick: {
                show: false,
            },
            axisLabel: {
                fontSize: 12,
                color: '#B3CFFF',
                margin: 12,
                formatter: '{value}亿',
            },
            splitLine: {
                lineStyle: {
                    // 使用深浅的间隔色
                    color: '#4e608b',
                },
            },
            name: '',
            min: 0,
            boundaryGap: [0.2, 0.2],
        },
        ],
        series: [{
            name: '非法入侵',
            yAxisIndex: 0,
            color: 'rgba(208, 222, 238, .5)',
            lineStyle: {
                color: 'rgba(208, 222, 238, .5)',
            },
            type: 'line',
            data: y1Data,
        },
        {
            name: '强行闯入',
            type: 'bar',
            label: {
                normal: {
                    show: false
                },
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        1,
                        0,
                        0,
                        [{
                            offset: 0,
                            color: 'rgba(123, 133, 255, 1)', // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(96, 132, 255, 0)', // 100% 处的颜色
                        },
                        ],
                        false
                    ),
                },
            },
            barWidth: '20%',
            yAxisIndex: 1,
            data: y2Data,
        },
        ],
    };
    chartDom.setOption(option)
};

watch(() => props.resultData, (newVal) => {
    if (chartDom) {
        let xData = Object.keys(newVal.Invasio1)
        let y1Data = Object.entries(newVal.Invasio1)
        let y2Data = Object.entries(newVal.Invasio2)
        initAccess(xData, y1Data, y2Data)
    }
}, { deep: true, immediate: true } // 开启深度监听
)
// 生命周期
onMounted(() => {
    let xData = ['12.20', '12.30', '12.40', '12.50', '13.00', '13.20', '13.40']
    let y1Data = [0, 0, 0, 0, 0, 0, 0]
    let y2Data = [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>