<template>
  <component :is="remote" v-if="remote" :config="chartConfig" :data="data" />
</template>

<script setup lang="ts">
import { loadModule } from 'vue3-sfc-loader/dist/vue3-sfc-loader'
import { ref, onMounted, getCurrentInstance, defineAsyncComponent } from 'vue'
import * as Vue from 'vue'
import { PropType } from 'vue'
import { option } from './config'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'

const props = defineProps({
  optionData: {
    type: Object as PropType<typeof option>,
    required: true
  },
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

let remote = ref()
let url = 'http://192.168.10.124:3000/getVue3Str2'
const data = ref(props.chartConfig.option.dataset)

onMounted(() => {
  load(url)
})
const load = async url => {
  let res = await fetch(url).then(res => res.json())

  const options = {
    moduleCache: {
      vue: Vue
    },
    async getFile() {
      return res.fileStr
    },
    addStyle(textContent) {
      const style = Object.assign(document.createElement('style'), { textContent })
      const ref = document.head.getElementsByTagName('style')[0] || null
      document.head.insertBefore(style, ref)
    }
  }

  // 加载远程组件
  remote.value = defineAsyncComponent(() => loadModule(res.fileName || 'loader.vue', options))
}


console.log('props', props)
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
  console.log('接口获取数据',newData)
  data.value = newData
})
</script>

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