<template>
  <component
    :is="DynamicComponent"
    v-if="DynamicComponent"
    :value="value"
  />
</template>
<script>
export default {
  name: 'TemplateComponent',
  components: {

  },
  props: {
    value: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      DynamicComponent: null,
      dynamicComponentMap: {
        'module': () => import(/* webpackChunkName: "ModuleTemplate" */ './ModuleTemplate.vue'),
        'field': () => import(/* webpackChunkName: "FieldTemplate" */ './FieldTemplate.vue'),
      },
    };
  },
  created() {
    // console.log('TemplateComponent value', this.value);
    this.loadComponent(this.value?.type);
  },
  methods: {
    loadComponent(type) {
      // console.log('loadComponent type', type);
      this.dynamicComponentMap[type]()
        .then((component) => {
          this.DynamicComponent = component.default || component;
        }).catch((error) => {
          console.error('Failed Load COmponent ', error);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.module_template {
  display: flex;
  flex-wrap: wrap;
}
</style>
