<script lang="js" setup>
import { reactive, onMounted } from 'vue';
import * as echarts from 'echarts';
const state = reactive({
    leftTitle: '原生的performance',
    leftDomId: 'visual-performance-id',

    rightTitle: '性能指标可视化',
    rightDomId: 'visual-performance-id-right',
    chartTitle: '性能指标',
    echartInstance: null,

})


const initLeftChart = () => {
    // 基于准备好的dom，初始化echarts实例
    const domInstance = document.getElementById(state.leftDomId)
    if (domInstance) {
        domInstance.removeAttribute('_echarts_instance_')
    }
    else {
        return
    }
    console.log(performance)
    console.log(Object.keys(performance.timing))
    const label = []
    const data = []
    for ( let key in performance.timing) {
        if (performance.timing.hasOwnProperty(key)) {
            label.push(key)
            data.push(performance.timing[key])
        }

    }
    const myChart = echarts.init(domInstance);
    const option = {
        title: {
            text: 'performance'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: label
        },
        series: [
            {
                name: 'performance',
                type: 'bar',
                data: data
            }
        ]
    };
    console.log('option', option)
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true);
    // 监听
    state.echartInstance = myChart;
    myChart.on('click', function (params) {
        console.log('params', params)
    });
    window.onresize = myChart.resize;
}

const initRightChart = () => {
    // 基于准备好的dom，初始化echarts实例
    const domInstance = document.getElementById(state.rightDomId)
    if (domInstance) {
        domInstance.removeAttribute('_echarts_instance_')
    }
    else {
        return
    }
    const myChart = echarts.init(domInstance);
    const option = {
        title: {
            text: state.chartTitle
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['fmp', 'fp', 'dns', 'res', 'dom']
        },
        series: [
            {
                name: '2011',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744]
            }
        ]
    };
    console.log('option', option)
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true);
    // 监听
    state.echartInstance = myChart;
    myChart.on('click', function (params) {
        console.log('params', params)
    });
    window.onresize = myChart.resize;
}


onMounted(() => {
    initLeftChart()
    initRightChart()
})
</script>
<template>
    <div>

        <div style="display:flex;justify-content: space-between;">
            <a-card :title="state.leftTitle" style="width: 600px">
                <div :id="state.leftDomId" style="width: 500px;height:600px;">

                </div>
            </a-card>

            <a-card :title="state.rightTitle" style="width: 600px">
                <div :id="state.rightDOmId" style="width: 500px;height:600px;">

                </div>
            </a-card>
        </div>

    </div>
</template>