<script setup>
    import {reactive,onMounted} 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:[]
    })

    const getRenderBarData= ()=>{
        state.articleData=[...articleData]
        state.articleData.sort((a,b)=>new Date(a.postTime)-new Date(b.postTime))
    }
    onMounted(()=>{
        getRenderBarData()
    })
</script>
<template>
    <div style="padding:20px;">
        <Author/>
        <div>
            {{state.title}}
            <div>
                <CommitLine />
                <ArticleBar :tableData="state.articleData" />
                <HubPie />
            </div>
        </div>
    </div>
</template>