<script setup>
import { reactive, onMounted, onBeforeMount } from 'vue'
import CommitLine from './commit/index.vue'
import ArticleBar from './article/index.vue'
import Author from '../Author.vue'
import HubPie from './hub/index.vue'
import { articleData } from './data/data.js'
const state = reactive({
    title: '',
    articleData: [],
    echartDuration: 0,
})

const getRenderBarData = () => {
    state.articleData = [...articleData]
    state.articleData.sort((a, b) => new Date(a.postTime) - new Date(b.postTime))
}
onBeforeMount(() => {
    // 标记开始时刻
    performance.mark('render-echart1-start')
})
onMounted(() => {
    getRenderBarData()
    // 标记开始时刻
    performance.mark('render-echart1-end')
    const measure = performance.measure('render-echart-duration', 'render-echart1-start', 'render-echart1-end')
    console.log('measure', measure)
    console.log('measure type', typeof measure)
    const duration = measure.duration
    console.log('duration', duration)
    state.echartDuration = duration.toFixed(2)
})
</script>
<template>
    <div style="padding:20px;">
        <!-- <Author/> -->
        <div>
            {{ state.title }}
            <div>
                <CommitLine />
                <ArticleBar :tableData="state.articleData" />
                <HubPie />
            </div>
            <div>
                渲染耗时：{{ state.echartDuration }} ms
            </div>
        </div>
    </div>
</template>