<template>
	<div class="wrapper">
		<div class="box">
			<div class="swiper-container" ref="swiper">
	            <div class="swiper-wrapper">
	                <div class="swiper-slide" v-for="(item,index) in advertTop.list" :key="index">
	                    <a class="link" v-if="item.advertLink" :href="item.advertLink">
	                        <img :src="item.advertImgUrl" alt="">
	                    </a>
	                    <a class="link" v-else href="javascript:;">
	                        <img :src="item.advertImgUrl" alt="">
	                    </a>
	                </div>
	            </div>
	        </div>
	        <div class="close" v-if="!advertTop.close" @click="_close"></div>
		</div>
	</div>
</template>
<script>
    import {mapGetters, mapMutations} from 'vuex'
	export default {
		data(){
			return {
				swiper: null
			}
		},
		computed:{
            ...mapGetters({
                'advertTop': 'advertTop',
            }),
        },
        mounted(){
            this.$nextTick(() => {
                this._initSwiper();
            })
        },
        methods: {
        	...mapMutations({
                'set_advertTop': 'set_advertTop'
            }),
            _initSwiper(){
            	let option = {
                    direction: 'vertical',
                    loop: true,
                    autoplay : false
                }
                if(this.advertTop.list.length > 1){
                    option.autoplay = {
                        delay: 5000
                    };
                }
                this.swiper = new this.$swiper(this.$refs.swiper, option)
            },
        	_close(){
        		let info = JSON.parse(JSON.stringify(this.advertTop));
        		info.status = false;
        		this.set_advertTop(info)
        	},
        },
	}
</script>
<style lang="less" scoped>
	.wrapper{
		position: relative;
		padding-top: 150/1080*100%;
		height: 0;
		.box{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			.swiper-container{
				height: 100%;
	            .swiper-wrapper{
	                height: 100%;
	                .swiper-slide{
	                	position: relative;
	                	.link{
	                		display: block;
	                		width: 100%;
	                		height: 100%;
		                    
		                    img{
		                        display: block;
		                        width: 100%;
		                        height: 100%;
		                    }
	                	}
	                }
            	}
			}
			.close{
	            position: absolute;
	            right: 0;
	            top: 0;
	            z-index: 10;
	            width: 30px;
	            height: 30px;
	            background: url("./img/icon-close.png") no-repeat center center;
	            background-size: 20px 20px;
	        }
		}
	}
</style>