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

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

    // // DOM 挂载完成后
    // onMounted(() => {
    //     // 可以访问 DOM 元素
    //     setTimeout(() => {
    //         getList();
    //     },500);
    // });
    function getList(title,dataXY) {
        const barDataListIntance = echarts.init(barDataList.value, "macarons")
        barDataListIntance.setOption({
            title: [{
                text: title,
                x: '50%',
                y: '3%',
                textAlign: 'center',
            }],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top: '20%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: dataXY.lineXData,
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '单位Mbps'
                }
            ],
            series: [
                {
                    // name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    data: dataXY.data
                }
            ]
        });
        window.addEventListener("resize", () => {
            barDataListIntance.resize()
        })
    }
    function dataChangeValue(val,days) {
        // console.log(props.chartData(val));
        getList(props.title, {data: props.barData.data, lineXData: days});
    }
</script>
