<template>
    <swiper class="swiper" :options="swiperOption">
        <swiper-slide
            v-for="item in banners"
            :key="item.id"
            class="img"
            :style="{ backgroundImage: `url(${item.img})` }"
        >
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
import { navTypeOptions } from '../utils/variables';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
export default {
    data() {
        return {
            navTypeOptions,
            navigationId: 0,
            homeId: 0,
            banners: [],
            swiperOption: {
                watchOverflow: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                autoplay: {
                    delay: 5000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                }
            }
        };
    },
    mounted() {
        this.getBanner();
    },
    methods: {
        getBanner() {
            return this.$http
                .post(
                    '/banner/all',
                    {
                        sort: 'createdAt,desc'
                    },
                    {
                        body: 'json'
                    }
                )
                .then(res => {
                    this.banners = res.content;
                });
        }
    },
    components: {
        Swiper,
        SwiperSlide
    }
};
</script>

<style lang="less" scoped>
/deep/ .el-carousel__container {
    height: 420px;
    min-height: 420px;
}
.img {
    width: 100%;
    height: 26.25vw;
    min-height: 341px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    // display: block;
}
</style>
