<template>
	<swiper class="swiper-block" autoplay="true" circular="true" previous-margin="90rpx" next-margin="90rpx" current="0" @change="swiperChange">
	  <block v-for="(item, index) in imgs" :key="index">
	    <swiper-item class="swiper-item" :class="(swiperIndex == index ? 'active' : '')" @tap="previewImg">
	      <image mode="aspectFill" :src="item" :class="'slide-image ' + (swiperIndex == index ? 'active' : '')"></image>
	    </swiper-item>
	  </block>
	</swiper>
</template>

<script>
	export default{
		props: {
			imgs: {
				type: Array,
				default: []
			}
		},
		data(){
			return {
				swiperIndex: 0
			}
		},
		methods: {
			swiperChange(e) {
			  const that = this;
			  that.setData({
			    swiperIndex: e.detail.current
			  });
			},
			
			previewImg() {
			  uni.previewImage({
			    urls: this.imgs
			  });
			}
		}
	}
</script>

<style lang="less">
	.swiper-block {
	  height: 300rpx;
	  width: 100%;
	}
	  
	.swiper-item {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: flex-start;
	  overflow: unset;
	}
	.slide-image {
	  height: 250rpx;
	  width: 520rpx;
	  border-radius: 9rpx;
	  margin: 0rpx 30rpx;
	  z-index: 1;
	}
	.active {
	  transform: scale(1.14);
	  transition: all 0.2s ease-in 0s;
	  z-index: 20;
	}
</style>
