<template>
    <div>
        <dateTimeSelect @dataChange="dataChangeValue"></dateTimeSelect>
        <div ref="lineDataList" style="width:100%;height: 420px" />
    </div>
</template>

<script setup>
    import * as echarts from 'echarts'
    import dateTimeSelect from './dateTimeSelect'
    const lineDataList = ref(null)
    const props = defineProps({
        lineData: {
            type: Object,
            default: {
                lineXData: [],
                data: []
            }
        },
        title: {
            type: String,
            default: null
        },
        chartData: {
            type: Function,
            default: () => {
            }
        }
    })

    // // DOM 挂载完成后
    // onMounted(() => {
    //     // 可以访问 DOM 元素
    //     setTimeout(() => {
    //         getList(props.title, props.lineData);
    //     },500);
    // });
    function getList(title,dataXY) {
        const lineDataListIntance = echarts.init(lineDataList.value, "macarons")
        lineDataListIntance.setOption({
            title: [{
                text: title,
                x: '50%',
                y: '3%',
                textAlign: 'center',
            }],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                top: '20%',
                left: '2%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                data: dataXY.lineXData
            },
            yAxis: {
                type: 'value',
                name: '单位Mbps',
                splitLine: {
                    show: false,
                },
            },
            series: [
                {
                    data: dataXY.data,
                    type: 'line',
                    areaStyle: {
                        color: 'rgba(140, 158, 217, 1)'
                    }
                }
            ]
        });
        window.addEventListener("resize", () => {
            lineDataListIntance.resize()
        })
    }
    function dataChangeValue(val,days) {
        // console.log(props.chartData(val));
        getList(props.title, {data: props.lineData.data, lineXData: days});
    }
</script>
<style scoped>
</style>
