<script setup lang="ts">
import XReportForm from '@af-mobile-client-vue3/components/data/XReportForm/index.vue'

import { onMounted, onUnmounted, ref } from 'vue'

const localConfig = ref(undefined)
const configName = ref(undefined)
const configData = ref(undefined)

function receiveMessage(event) {
  try {
    if (event.data && typeof event.data === 'object' && event.data.type === 'setConfig') {
      localConfig.value = event.data.localConfig
      configName.value = event.data.configName
      configData.value = event.data.configData
    }
  }
  catch (e) {
    console.error(e)
  }
}

onMounted(() => {
  window.addEventListener('message', receiveMessage, false)
  window.parent.postMessage('calParentSend', '*')
})

onUnmounted(() => {
  window.removeEventListener('message', receiveMessage, false)
})

function saveConfig(_config) {
  const config = JSON.parse(JSON.stringify(_config))
  window.parent.postMessage({
    type: 'saveConfig',
    config,
  }, '*')
}
</script>

<template>
  <!-- 业务上只保存了data，传递的 localconfig 也是 data 这里临时吧 localconfig 作为data使用 -->
  <XReportForm v-if="localConfig || configName" :config-name="configName" :show-nav="false" :local-config="localConfig" :config-data="configData" @save-config="saveConfig" />
</template>

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