<template>
	<!--  公共轮播组件 -->
	<view class="swiper-contianer">
		<swiper :autoplay="autoplay" :interval="5000" :indicator-dots="false" indicator-color='#8a8a8a' indicator-active-color='#333' circular="true" class="swiper-block" @change="swiperChange" :previous-margin="platform == 'alipay1'?'0':'50rpx'" :next-margin="platform == 'alipay1'?'0':'50rpx'" :current="0">
			<block v-for="(item,index) in imgUrls" :key="index">
				<swiper-item class="swiper-item">
					<view class="imgbox">
						<image mode="aspectFill" :src="item" :class="'slide-image '+ (currentIndex == index ? 'active' : 'common')" />
					</view>
				</swiper-item>
			</block>
		</swiper>
		<view class="tips">
			<view :class="'tip '+ (currentIndex == index?'active':'')" v-for="(item,index) in imgUrls" :key="index"></view>
		</view>
	</view>
</template>

<script>
	import globalMixin from "@/mixins/globalMixin";
	const app = getApp()
	export default {
		mixins: [globalMixin],
		props: {
			autoplay: {
				type: Boolean,
				default: true
			},
			imgUrls: {
				type: Array
			},
			height: Number
		},
		data() {
			return {
				currentIndex: 0,
				platform: app.globalData.platform
			}
		},
		methods: {
			swiperChange(e) {
				this.setData({
					currentIndex: e.detail.current
				});
			}
		}
	}
</script>

<style>
	.swiper-contianer {
		position: relative;
	}

	.swiper-block {
		position: relative;
		height: 330rpx !important;
		width: 100%;
	}

	.swiper-item {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		overflow: unset;
		height: 330rpx;
		width: 550rpx;
		padding-top: 50rpx;
		padding-bottom: 20rpx;
	}
	
	.imgbox {
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		width: 550rpx;
	}

	.slide-image {
		vertical-align: text-top;
		box-sizing: border-box;
		width: 470rpx;
		height: 220rpx;
		border-radius: 10rpx;
		z-index: 1;
	}

	.active {
		transform: scale(1.4);
		transform-origin: center center;
		transition: all .5s ease-in 0s;
		z-index: 20;
		opacity: 1;
	}

	.common {
		transform: scaleX(0.85);
		transition: all .5s ease-in 0s;
		z-index: 0;
		opacity: 0.4;
	}

	.dots-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dots {
		width: 30rpx;
		height: 6rpx;
		margin: 0 4rpx;
		background-color: #aaa;
		margin-top: -80rpx;
	}

	.bg-333 {
		background-color: #333;
	}

	.tips {
		position: absolute;
		left: 0;
		bottom: 48rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		z-index: 100;
		margin-top: 24rpx;
		padding-left: 67rpx;
	}

	.tip {
		width: 12rpx;
		height: 12rpx;
		border-radius: 6rpx;
		background-color: rgba(255, 255, 255, 0.4);
		margin: 0 6rpx;
	}

	.tip.active {
		background-color: #fff;
	}
</style>