<template>
  <div class="aos-dynamic-component">
    <span class="aos-dynamic-component__loading" v-loading="loading" v-if="!showComponent"></span>
    <component class="aos-dynamic-component__content" :is="moduleName + '-'+ componentName" v-if="showComponent" v-bind="data" @events="events"></component>
  </div>
</template>

<script>
export default {
  name: 'AosDynamicComponent',
  props: {
    moduleName: {
      type: String,
      required: true
    },
    componentName: {
      type: String,
      required: true
    },
    // 传递给子应用的参数
    data: {
      type: Object
    },
    events: {
      type: Function,
    }
  },
  data () {
    return {
      showComponent: false,
      loading: true
    }
  },
  created () {
    this.getComponent()
  },
  methods: {
    getComponent () {
      this.$utils.importModule(this.moduleName, this.componentName).then(() => {
        this.showComponent = true
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
  }
}
</script>
