<script lang="ts">
   import { usePageStore } from '@/stores/pages'
   import ContentComponent from '@/components/ContentComponent.vue'
   import type { Page } from '@/types/page'
   import { useRoute } from 'vue-router'
    export default {
        name: 'PageView',
        components: {
            ContentComponent
        },
        data () {
            return {
              page: undefined as Page | undefined,
            }
        },
        setup() {
            const route = useRoute()
            const pageStore = usePageStore()
            return {
                route,
                pageStore
            }
        },
        mounted () {
            this.page = this.pageStore.getPageByTitle(this.route.name as string)
        },
        updated(){
            this.page = this.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>
                <ContentComponent :jsonContent="page?.Content"/>
            </div>
            <div class="component component-bg-bottom"> </div>
        </div>
    </main>
</template>

