<script lang="js" setup>
import { reactive, onMounted } from 'vue';
import * as echarts from 'echarts';

import { useStore } from "vuex";

const store = useStore();
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 (key != 'toJSON') {
            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 performanceConfig = store.getters["common/performanceConfig"]

    console.log('performanceConfig________________', performanceConfig)

    const label = []
    const data = []

    Object.keys(performanceConfig).forEach(key => {
        data.push(performanceConfig[key])
        label.push(key)
    })
    const myChart = echarts.init(domInstance);
    const option = {
        title: {
            text: '自定义计算fmp'
        },
        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: 'fmp计算',
                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;
}


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

        <div style="display:flex;">
            <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;margin-left:20px">
                <div :id="state.rightDomId" style="width: 500px;height:600px;">

                </div>
                <div>

                </div>

            </a-card>
            <a-card style="margin-left:20px" title="定义">
                <div>
                    <div>
                        fetchStart：浏览器发起资源请求时，有缓存时，则返回读取缓存的开始时间。<br>

                        domainLookupStart：查询 DNS 的开始时间。<br>

                        domainLookupEnd：查询 DNS 的结束时间。<br>

                        connectStart：浏览器开始与服务器连接时的时间。<br>

                        secureConnectionStart：如果页面使用 HTTPS，它的值是安全连接握手之前的时刻。<br>

                        connectEnd：当浏览器端完成与服务器端建立连接的时刻。<br>

                        responseStart：指客户端收到从服务器端（或缓存、本地资源）响应回的第一个字节的数据的时刻。<br>

                        responseEnd：指客户端收到从服务器端（或缓存、本地资源）响应回的最后一个字节的数据的时刻。<br>

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

    </div>
</template>