<template>
  <section>
    <div v-for="componentAttached in downloadedPage.components" :key="componentAttached.id" tile>
      <page-component :componentProp="componentAttached" />
    </div>
  </section>
</template>

<script>
import PageComponent from '@/components/PageComponent/PageComponent'

export default {
  components: {
    PageComponent
  },

  computed: {
    pageSlug() {
      return this.$route.params.page
    }
  },

  data() {
    return {
      downloadedPage: {},
    }
  },
  mounted() {
    this.getPage(this.pageSlug)
  },
  methods: {
    async getPage(pageUrl) {
      try {
        const response = await this.$axios.get(`/pages/${pageUrl}`)
        this.downloadedPage = response.data
      } catch (error) {
        console.log('TCL: getPage -> error', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>