<template>
    <LoadingComponent :props="loading" />
    <section class="pt-24 sm:pt-28 pb-12 sm:pb-20">
        <div class="container max-w-3xl">
            <div class="mb-6">
                <h2 class="text-[26px] leading-10 font-semibold capitalize mb-2">
                    {{ page.title }}
                </h2>
                <div v-if="page.image" class="w-full mb-6">
                    <img :src="page.image" alt="image">
                </div>
                <p v-html="page.description" class="text-xs text-heading">
                </p>
            </div>
            <TemplateManagerComponent :templateId="page.template_id" />

            <ContactUsFormComponent v-if="page.template_id === 1" />
        </div>
    </section>
</template>

<script>
import LoadingComponent from "../components/LoadingComponent.vue";
import TemplateManagerComponent from "../components/TemplateManagerComponent.vue";
import ContactUsFormComponent from "./ContactUsFormComponent.vue";
import { useFrontendPageStore } from "../../../stores/frontend/frontendPage";

export default {
    name: "PageComponent",
    components: { LoadingComponent, TemplateManagerComponent, ContactUsFormComponent },
    data() {
        return {
            loading: {
                isActive: false
            },
            frontendPageStore: useFrontendPageStore(),
        }
    },
    computed: {
        page: function () {
            return this.frontendPageStore.show;
        }
    },
    mounted() {
        this.pageSetup();
    },
    methods: {
        pageSetup: function () {
            this.loading.isActive = true;
            if (Object.keys(this.$route.params).length > 0 && typeof this.$route.params.slug === 'string' && this.$route.params.slug !== "not-found") {
                this.frontendPageStore.fetchShow(this.$route.params.slug).then(res => {
                    this.loading.isActive = false;
                }).catch((err) => { })
            }
        }
    },
    watch: {
        $route() {
            this.pageSetup();
        }
    }
}
</script>