<script setup lang="ts">
import {onMounted, ref, provide, computed} from 'vue'
import {fetchPageConfig} from './api'
import {PageConfig} from "./types";
import ImageSwiper from "./components/ImageSwiper.vue";
import HotArea from "./components/HotArea.vue";

const props = defineProps<{
  id: string
  debugMode?: boolean
}>()

const refreshingPageConfig = ref(false)
const pageConfig = ref({} as PageConfig)
const debugMode = computed(() => props.debugMode)

async function refreshPageConfig() {
  refreshingPageConfig.value = true
  const resp = await fetchPageConfig(props.id)
  pageConfig.value = JSON.parse(resp.data.content)
  refreshingPageConfig.value = false
  console.log(pageConfig.value)
}

onMounted(async () => {
  await refreshPageConfig()
})

provide('debugMode', debugMode)
</script>

<template>
  <view v-if="!refreshingPageConfig" class="page-render-engine">
    <template v-for="(component, index) in pageConfig.components" :key="'comp-' + index">
      <HotArea
        v-if="component.name === 'HotArea'"
        :properties="component.props"
      />
    </template>
  </view>
  <view v-else>
    加载中...
  </view>
</template>

<style scoped lang="less">
.page-render-engine {
  background-repeat: no-repeat;
}
</style>