<template>
	<div class="banner">
		<swiper :options="swiperOption" ref="mySwiper" v-if="bannerInfo">
			<!-- slides -->
			<swiper-slide v-for="(item ,index) in bannerInfo" :key="index">
				<router-link to="">

					<img :data-src="item.photourl" class="swiper-lazy" />
					<div class="swiper-lazy-preloader"></div>
				</router-link>
				<!--<div class="swiper-lazy-preloader"></div>-->
			</swiper-slide>
			<!-- Optional controls -->
			<div class="swiper-pagination" v-if="options.pagination" slot="pagination"></div>

			<!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
		</swiper>
		<slot name="ex"></slot>
		<div class="swiper-button-prev" v-if="options.switchBtn" slot="button-prev"></div>
		<div class="swiper-button-next" v-if="options.switchBtn" slot="button-next"></div>
	</div>

</template>
<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		name: 'banner',
		props: {
			bannerInfo: {
				default() {
					return [{
						photourl: 'http://theme.cdn.betophall.com//data/saygame/content/201711231632204155.jpg'
					}, {
						photourl: 'http://theme.cdn.betophall.com//data/saygame/content/201711231638254949.jpg'
					}, {
						photourl: 'http://theme.cdn.betophall.com//data/saygame/content/201711161507037253.jpg'
					}]
				}
			},
			options: {
				default() {
					return {
						effect: 'coverflow',
						switchBtn: false,
						pagination: true
					}
				}

			},
			swiperOpt: {

			}
		},
		data() {
			return {
				swiperOption: Object.assign({
					pagination: '.banner .swiper-pagination',
					//					effect: this.options.effect,
					paginationClickable: true,
					lazyLoading: true,
					speed: 1000,
					autoplay: 2000,
					initialSlide: 0,
					loop: true,
					slidesPerView: 'auto',
					grabCursor: true,
					watchSlidesProgress: true,
					watchSlidesVisibility: true,
					loopedSlides: 8,
					prevButton: '.swiper-button-prev',
					nextButton: '.swiper-button-next',

				}, this.swiperOpt)
			}
		},
		components: {
			swiper,
			swiperSlide
		},
		// you can find current swiper instance object like this, while the notNextTick property value must be true
		// 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
		computed: {
			swiperBanner() {
				return this.$refs.mySwiper
			}
		},
		//		activated: function() {
		//			this.swiperOption = {
		//				pagination: '.banner .swiper-pagination',
		//				//				effect: this.options.effect,
		//				paginationClickable: true,
		//				lazyLoading: true,
		//				speed: 1000,
		//				autoplay: 2000,
		//				initialSlide: 1,
		//				loop: true,
		//				centeredSlides: true,
		//				slidesPerView: 'auto',
		//				grabCursor: true,
		//				//					calculateHeight: true,
		//				watchSlidesProgress: true,
		//				watchSlidesVisibility: true,
		//				//					simulateTouch: false,
		//				//	effect : 'coverflow',
		//				loopedSlides: 8,
		//				prevButton: '.swiper-button-prev',
		//				nextButton: '.swiper-button-next',
		//			}
		//		},
		mounted() {
			//			console.log('bannerInfo',bannerInfo)
			// you can use current swiper instance object to do something(swiper methods)
			// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了

			// this.swiper.slideTo(3, 1000, false)
		}
	}
</script>

<style lang="less">
	@import url("../../assets/config");
	@h: unit(290/@value,rem);
	.banner {
		overflow: hidden;
		position: relative;
		.swiper-container {
			width: 100%;
			min-height: 6rem;
			/*max-height:@h;*/
			.swiper-pagination {
				bottom: 0;
			}
		}
		.swiper-slide {
			overflow: hidden;
			a {
				width: 100%;
			}
			img {
				width: 100%;
				min-height: @h;
				position: relative;
				z-index: 1;
			}
		}
		.swiper-pagination-bullet {
			border: 1px solid #fff;
		}
		.swiper-pagination-bullet-active {
			background: #fff;
		}
		/*.swiper-pagination-bullet {
			width: 15px;
			height: 3px;
			border-radius: 0;
		}
		.swiper-pagination-bullet-active {
			background: @common_cl;
		}*/
	}
</style>
