<template>
  <!-- 内嵌组件 -->
  <div class="embed-module">
    <div v-for="(item, index) in contentList" :key="index">
      <componentsGroup :item1="item" :index1="index" :active="active" :storageKey="'embed-mudule'+componentIndex+'_'+goodsListIndex+'_'+index" :goodsListIndex="goodsListIndex" :componentIndex="componentIndex"></componentsGroup>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import componentsGroup from "@/components/componentsGroup/index.vue";
import shop from "@/api/shop"
export default {
  name: "embed-module",
  props: {
    datas: {
      type: Object,
      default: {}
    },
    index1: {
      type: Number,
      default: 0,
    },
    componentIndex: {
      type: Number,
      default: 0,
    },
    active: {
      type: Number,
      default: 0,
    },
    goodsListIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      pageData: [],
      contentList: [],
    }
  },
  components: {
    componentsGroup
  },
  computed: {
    microPageId() {
      return this.datas.componentData.microPageId;
    },
  },
  created() {
    this.init();
  },
  mounted() { },
  methods: {
    init() {
      if (!this.microPageId) return;
      shop.singlePageInfo({ id: this.microPageId }).then(res => {
        if (res.data.code == 200) {
          this.pageData = res.data.data.pageData ? JSON.parse(res.data.data.pageData) : [];
          this.contentList.push(this.pageData[0]);
          let i = 1;
          this.loadComponents(i);
        }
      })
    },
    loadComponents(index) {
      this.contentList.push(this.pageData[index]);
      index++;
      if (index > this.pageData.length) {
        console.log("-微页面渲染结束-");
        return;
      }
      setTimeout(() => {
        this.loadComponents(index);
      }, 30);
   },
  }
}
</script>

<style lang="scss" scoped>
.embed-module {}
</style>