<script lang="ts">
   import { usePageStore } from '../stores/pages'
   import Content from '@/components/Content.vue'
   import { useRoute } from 'vue-router'
    export default {
        name: 'PageView',
        components:{
            Content
        },
        setup() {
            const route = useRoute()
            return {
                route
            }
        },
        data () {
            return {
                page: null as any
            }
        },
        async mounted () {
            const pageStore = await usePageStore()
            this.page = await pageStore.getPageByTitle(this.route.name as String)
        },
        async updated(){
            const pageStore = await usePageStore()
            this.page = await pageStore.getPageByTitle(this.route.name as String)
        }
    }
</script>

<template>
    <main>
        <div class="components">
            <div class="component component-bg-top"> </div> 
            <div class="component component-text">
                <h1> {{ page?.Title }}</h1>
                <Content :jsonContent="page?.Content"/>
            </div>
            <div class="component component-bg-bottom"> </div> 
        </div>
    </main>
</template>

