<template>
	<view class="swiper-container" v-if="imgs&&!img">
		<swiper class="banner-swiper3" :current="currentIndex" :autoplay="true" :interval="5000" :duration="2000" >
			<swiper-item >
				<view class="banner-swiper-item3">
					<image class="banner-img3" :src="imgs" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="swiper-container" v-else-if="img">
		<swiper class="banner-swiper2" :current="currentIndex" :autoplay="true" :interval="5000" :duration="2000" >
			<swiper-item >
				<view class="banner-swiper-item2">
					<image class="banner-img2" :src="img" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="swiper-container" v-else>
		<swiper class="banner-swiper" :current="currentIndex" :autoplay="true" :circular ="true":interval="5000" :duration="1500" @change="handleSwiperChange">
			<swiper-item v-for="(item,index) in list" :key="index">
				<view class="banner-swiper-item">
					<image class="banner-img" :src="item" mode=""></image>
				</view>
				<!-- <view class="banner-title">
					<view class="game-name">剑与远征</view>
					<view class="game-intro">剑与远征 剑与远征</view>
					<view class="game-about">了解详情</view>
				</view> -->
			</swiper-item>
		</swiper>
		<view class="arrow arrow-left" @tap="prev">
			<image class="arrow-img" src="../../static/img/index/l_icon.png"></image>
		</view>
		<view class="arrow arrow-right" @tap="next">
			<image class="arrow-img" src="../../static/img/index/r_icon.png"></image>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:{
			banner: {
				type: Number,
				default: 0,
			},
			img: {
				
				default: '',
			},
			imgs: {
				
				default: '',
			},
			titles: {
				
				default: '',
			},
			title_content: {
				
				default: '',
			},
		},
		data(){
			return {
				list: [
					'/static/img/index/banner1.jpg',
					'/static/img/index/banner2.png',
					'/static/img/index/banner1.jpg',
					'/static/img/index/banner2.png',
				],
				currentIndex: 0,
			}
		},
		created() {
			this.currentIndex = this.banner;
		},
		methods:{
				handleSwiperChange(event) {
							const current = event.detail.current;
							this.currentIndex = current;
							// console.log("当前轮播到第", current, "个索引");
						},
				prev() {
					this.currentIndex = (this.currentIndex - 1 + this.list.length) % this.list.length;
				},
				next() {
					this.currentIndex = (this.currentIndex + 1) % this.list.length;
				},
		}
	}
</script>

<style lang="scss">
	.swiper-container {
			position: relative;
		}
	
	.banner-swiper,.banner-swiper-item,.banner-img{
		width: 100%;
		height: 538px;
	}
	.banner-swiper2,.banner-swiper-item2,.banner-img2{
		width: 100%;
		height: 333px;
	}
	.banner-swiper3,.banner-swiper-item3,.banner-img3{
		width: 100%;
		height:610px;
	}
	
	.banner-title{
		position: absolute;
		top: 207px;
		left: 160px;
		font-size: 67px;
		font-weight: bold;
		color: #FFFFFF;
		text-shadow: 7px 6px 11px rgba(0,0,0,0.16);
		.game-about{
			width: 235px;
			height: 61px;
			background: #F48612;
			box-shadow: 0px 0px 13px 0px rgba(244,134,18,0.73);
			font-weight: bold;
			color: #FFFFFF;
			font-size: 27px;
			text-align: center;
			line-height: 61px;
			margin-top: 57px;
			cursor: pointer
		}
		.game-about:hover{
			background: #ff9a2f;
			box-shadow: 0px 0px 13px 0px rgba(255,154,47,0.73);
		}
	}
	.banner-title2{
		width: 100%;
		height: 333px;
		line-height: 333px;
		font-size: 67px;
		font-weight: bold;
		color: #FFFFFF;
		text-shadow: 7px 6px 11px rgba(0,0,0,0.16);
	}
	
	.arrow {
			position: absolute;
			top: 129px;
			width: 68px;
			height: 102px;
			background: #000000;
			opacity: 0.57;
			line-height: 122px;
			text-align: center;
			cursor: pointer
		}
	.arrow:hover{
		opacity: 1;
	}	
	.arrow-img{
		width:23px;
		height: 37px;
	}
		.arrow-left {
			left: 0px;
		}
	
		.arrow-right {
			right: 0px;
		}
		
		
	@media screen and (max-width: 600px) {
	 .banner-swiper,.banner-swiper-item,.banner-img{
	 	width: 100%;
	 	height: 160px;
	 }
	 .banner-swiper2,.banner-swiper-item2,.banner-img2{
	 	width: 100%;
	 	height: 120px;
	 }
	 .arrow {
	 		top: 70px;
	 	}
	 	
	}	
	// #ifdef H5
	
	// #endif	
</style>
