<template>
    <div>
        <div v-for="(item, index) in content" :key="index">
            <m-slider v-if="item.moduleType === 'wxslider'" :content="item.content"></m-slider>
            <m-multipicture v-if="item.moduleType === 'wxmultipicture'" :content="item.content"></m-multipicture>
            <m-anchor
                v-if="item.moduleType === 'anchorpicture' || item.moduleType === 'wxanchorpicture'"
                :content="item.content"
            ></m-anchor>
            <m-goods v-if="item.moduleType === 'doublegoods'" :content="item.content" @change="goodsChange"></m-goods>
            <m-video v-if="item.moduleType === 'video'" :content="item.content"></m-video>
            <m-shortvideo v-if="item.moduleType === 'shortvideo'" :content="item.content"></m-shortvideo>
            <m-textnavigation v-if="item.moduleType === 'textnavigation'" :content="item.content"></m-textnavigation>
            <m-coupon v-if="item.moduleType === 'wxcoupon'" :content="item.content"></m-coupon>
            <!-- 单列图片 -->
            <m-singlepicture v-if="item.moduleType === 'singlepicture'" :content="item.content"></m-singlepicture>

            <!-- 分类组件 -->
            <m-classify v-if="item.moduleType === 'wxcategory'" :content="item.content"></m-classify>

            <!-- 标题组件 -->
            <m-title v-if="item.moduleType === 'title'" :content="item.content"></m-title>

            <!-- 直播 -->
            <!-- <m-live v-if="item.moduleType === 'multislive'" :content="item.content"></m-live> -->

            <!-- 直播回放 -->
            <!-- <m-live v-if="item.moduleType === 'live'" :content="item.content"></m-live> -->
        </div>
    </div>
</template>

<script>
import MSlider from "./slider";
import MMultipicture from "./multipicture";
import MAnchor from "./anchor";
import MGoods from "./goods";
import MVideo from "./video";
import MShortvideo from "./shortvideo";
import MTextnavigation from "./textnavigation";
import MCoupon from "./coupon";
import MSinglepicture from "./singlepicture";
import MClassify from "./classify";
import MTitle from "./title";

export default {
    name: "MCustom",
    components: {
        MCoupon,
        MTextnavigation,
        MShortvideo,
        MVideo,
        MGoods,
        MAnchor,
        MMultipicture,
        MSlider,
        MSinglepicture,
        MClassify,
        MTitle
    },
    props: {
        // 内容
        layout: {
            type: Array,
        },
    },

    // 数据
    data() {
        return {
            content: [],
        };
    },

    // 初始化
    created() {
        const self = this;

        self.init();
    },

    // 函数
    methods: {
        init() {
            const self = this;

            self.content = self.layout;
        },

        goodsChange(){
            this.$emit("change");
        }
    },

    // 数据计算
    computed: {},

    // 数据监听
    watch: {
        layout(val) {
            const self = this;

            if (val) {
                self.init();
            }
        },
    },
};
</script>

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