<template>
    <div class="person_box">
        <div ref="chartAccess" style="width: 100%;height: 100%;"
            v-if="resultData && Object.keys(resultData).length != 0"></div>
        <Empty :bottom="true" v-else></Empty>
    </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue';
import * as echarts from 'echarts'
import Empty from '@/components/Empty'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})
const chartAccess = ref(null);
let chartDom = null;
const initAccess = (arrData, timeData) => {
    if (chartAccess.value) {

        const color = ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组
        const legend = {
            //data，就是取得每个series里面的name属性。
            orient: 'horizontal',
            icon: 'circle', //图例形状
            padding: 0,
            top: 13,
            left: '4%',
            itemWidth: 10, //小圆点宽度
            itemHeight: 10, // 小圆点高度
            itemGap: 10, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
            textStyle: {
                fontSize: 13,
                color: '#ffffff',
            },
        };
        const tooltip = {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            textStyle: {
                color: '#fafafa',
            },
            borderColor: 'transparent',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            extraCssText: 'backdrop-filter: blur(6px);',
        };
        let seriesData = arrData
        const commonConfigFn = (index) => {
            return {
                type: 'line',
                smooth: true,
                symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
                symbolSize: 4, //小圆点大小
                itemStyle: {
                    //还是小圆点设置
                },
                label: {
                    show: false, //不显示小圆点上的label文字
                },
                lineStyle: {
                    width: 1, //线条设置
                },
                areaStyle: {
                    //填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
                    opacity: 0.2,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: color[index], // 上处的颜色
                            },
                            {
                                offset: 1,
                                color: 'transparent', // 下处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            };
        };
        seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
        if (!chartDom) {
            chartDom = echarts.init(chartAccess.value);
        }
        let option = {
            color,
            tooltip,
            legend,
            grid: {
                top: '15%',
                left: '4%',
                right: '4%',
                bottom: '5%',
                containLabel: true,
            },
            xAxis: {
                show: true, //显示x轴+x轴label文字
                type: 'category',
                boundaryGap: false, //从Y轴出发，这个false很好的
                axisLine: {
                    show: true, //显示x坐标轴轴线
                    lineStyle: {
                        color: 'rgba(255,255,255,.4)',
                    },
                },
                axisTick: {
                    show: false, //不显示x坐标1cm刻度
                },
                axisLabel: {
                    color: '#ffffff', //x轴label文字颜色
                },
                splitLine: {
                    show: false, //不显示grid竖向分割线
                },
                data: timeData,
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#ffffff',
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,.4)',
                    },
                },
                splitLine: {
                    show: false, //不显示grid水平分割线
                },
            },
            series: seriesData,
        };
        chartDom.setOption(option)
    }
};
// 生命周期
onMounted(() => {
    let seriesData = [];
    let time = []
    initAccess(seriesData, time)
});
watch(() => props.resultData, (newVal) => {
    if (newVal && Object.keys(newVal).length > 0) {
        let time = Object.keys(newVal.Type1)
        let seriesData = [
            { name: '客流1', data: Object.entries(newVal.Type1) },
            { name: '客流2', data: Object.entries(newVal.Type2) },
            { name: '客流3', data: Object.entries(newVal.Type3) },
            { name: '客流4', data: Object.entries(newVal.Type4) },
        ];
        if (newVal && chartDom == null) {
            nextTick(() => {
                initAccess(seriesData, time);
            });
        }
        if (chartDom) {
            initAccess(seriesData, time)
        }
    }
}, { deep: true, immediate: true } // 开启深度监听
)
// 窗口自适应
window.addEventListener('resize', () => {
    chartDom?.resize();
});
</script>

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