<template>
	<view class="swiperBox">
		<swiper :indicator-dots="indicatorDots"
		    :autoplay="autoplay" 
		    :interval="interval" 
		    :duration="duration"
		    :style="'height:'+height"
		    class="swiper"
			@change="onAnimationfinish"
		    >
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.imgUrl"  @click="onSwiper(item)" mode="widthFix" class="img"/>
			</swiper-item>
		</swiper>
		<view class="dotBoxs" v-if="isDot && swiperList.length>1" :style="dotStyle">
			<view class="dots" :style="'width:'+swiperList.length*30+'rpx'">
				<view class="dot" :style="'left:'+current*30+'rpx'">
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	 props: {
	    //是否显示面板指示点
	    indicatorDots:{
	      type:Boolean,
	      default:false
	    },
	    //是否自动切换
	    autoplay:{
	      type:Boolean,
	      default:true
	    },
	    //自动切换时间间隔
	    interval:{
	      type:Number,
	      default:5000
	    },
	    //滑动动画时长
	    duration:{
	      type:Number,
	      default:1000
	    },
	    swiperList:{
	      type:Array,
	      default:[]
	    },
	    height:{
	      type:String,
	      default:'700rpx'
	    },
		dotStyle:{
			type:String,
			default:''
		},
		isDot:{
			type:Boolean,
			default:true
		}
	  },
	  data(){
		  return {
			  current:0
		  }
	  },
	  methods:{
		  onAnimationfinish(e){
			  this.$emit('Transition',e.detail.current)
			  this.current=e.detail.current
		  }
	  }
}
</script>

<style scoped lang="scss">
	.swiperBox{
		position: relative;
		.dotBoxs{
			width: 100%;
			position: absolute;
			bottom: 20rpx;
			left: 0;
			display: flex;
			justify-content: center;
		}
		.dots{
			height: 10rpx;
			background: rgba(0,0,0,0.5);
			border-radius: 5rpx;
			display: flex;
			position: relative;
			.dot{
				width: 30rpx;
				height: 10rpx;
				background: #fff;
				transition: 1s ease;
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 5rpx;
			}
		}
	}
</style>
