<template>
    <div class="m-slider" v-if="show">
        <swiper class="m-slider__list" :style="'height:' + height + 'rpx'" :indicator-dots="true" :autoplay="true" :interval="3000" :circular="true">
            <swiper-item class="m-slider__ietm" v-for="(item, index) in list" :key="index">
                <img class="m-slider__img" :src="item.src" @click="jump(item.link)">
            </swiper-item>
        </swiper>
        <div class="m-bottom-margin" v-if="bottomMargin"></div>
    </div>
</template>

<script>
    // 轮播
    export default {
        name: 'MSlider',

        props: {
            // 内容
            content: {
                type: Object,
            },
        },

        // 数据
        data() {
            return {
                show: true,
                height: 750,
                list: [],
                bottomMargin: false,
            }
        },

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

            self.init()
        },

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

                let width = self.content.formData.form.models[0]._src.w
                let height = self.content.formData.form.models[0]._src.h

                self.height = 750 / width * height
                self.list = self.content.formData.form.models
                self.bottomMargin = self.content.formData.moduleTitle.models[0].isShowBottomMargin === '1'

                if (isNaN(Number(height)) || Number(height) === 0) {
                    self.show = false
                }
            },
        },

        // 数据计算
        computed: {},

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

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

<style lang="scss" scoped>
    .m-slider {

        &__list {
            width: 100%;
        }

        &__img {
            width: 100%;
            height: 100%;
        }
    }

    .m-bottom-margin {
        height: px(30);
    }
</style>