<!-- Created by henian.xu on 2018/9/5. -->
<template>
    <div
        v-if="+type===1 && data && data.length"
        class="ad-swiper"
        :style="selfStyles"
    >
        <div class="bg"></div>
        <div
            class="item"
            :style='innerStyles'>
            <img
                :src="data[0].imgModel.length?data[0].imgModel[0].address:$defaultImg | imgCropping({width:350})"
                :alt="data[0].label"
            >
        </div>
        <div class="pagination">
            <div
                :class="['dot',{'active':index===0}]"
                v-for="(item,index) in data"
                :key="index"
            />
        </div>
    </div>
    <div
        v-else-if="+type===2 && data && data.length"
        class="ad-list"
        :style="selfStyles"
    >
        <div
            v-for="(item,index) in data"
            :key="index"
            class="item"
            :style='innerStyles'
        >
            <img
                :src="item.imgModel.length?item.imgModel[0].address:$defaultImg | imgCropping({width:350})"
                :alt="item.label"
            >
        </div>
    </div>
    <div
        v-else
        class="ad-list"
    >
        <div class="item">
            <img :src="$defaultImg">
        </div>
    </div>
</template>

<script>
export default {
    name: 'Ad',
    data() {
        return {};
    },
    props: {
        type: {
            type: [Number, String],
            required: true,
        },
        margin: {
            type: [Number, String],
            required: true,
        },
        data: {
            type: Array,
            required: true,
        },
        borderRadius: {
            type: String,
            default: '',
        },
    },
    computed: {
        selfStyles() {
            const {
                data: [{ backgroundColor }],
            } = this;
            return { backgroundColor };
        },
        innerStyles() {
            const { type, borderRadius, margin } = this;
            const res = {};
            if (borderRadius) {
                res.borderRadius = borderRadius;
            }
            if (margin && +type === 2) {
                res.marginTop = margin;
            }
            return res;
        },
    },
};
</script>

<style lang="scss">
.ad-swiper {
    position: relative;
    overflow: hidden;
    > .bg {
        position: absolute;
        //z-index: 99999;
        left: 50%;
        //right: 0;
        top: 100%;
        background-color: var(--page-background-color, #fff);
        width: 200%;
        height: 0;
        padding-top: 100%;
        border-radius: 100%;
        transform: translate(-50%, -30%);
    }
    > .item {
        position: relative;
        z-index: 1;
    }
    > .pagination {
        position: absolute;
        z-index: 2;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;

        > .dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background-color: $color-main;
            margin: 0 $margin-small;
            opacity: 0.5;
            &.active {
                opacity: 1;
            }
        }
    }
}
.ad-swiper,
.ad-list {
    > .item {
        display: block;
        line-height: 0;
        overflow: hidden;
        > img {
            width: 100%;
            max-width: 100%;
            height: auto;
            line-height: 1.2;
        }

        &:first-child {
            margin-top: 0 !important;
        }
    }
}
</style>
