<template>
	<view>
		<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
			<view class="swiperItem" v-for="(item, index) in swiperList" :key="index"
				:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
				<view class="children">
					<image class="pic" :src="item.logo"></image>
				</view>
			</view>
		</view>
		<!-- <swiper class="swiperItem" circular v-for="(item, index) in swiperList" :key="index"
			:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
			<swiper-item class="children">
				<image class="pic" :src="item.logo"></image>
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	export default {
		props: {
			swiperList: {
				type: Array,
				default () {
					return []
				}
			},
			timersetnteritem: {
				type: String,
				default: '0'
			}
		},
		data() {
			return {
				timersetInterval: null,
				slideNote: {
					x: 0,
					y: 0
				},
				screenWidth: 0,
				itemStyle: []
			};
		},
		watch: {
			timersetnteritem(newVal,oldVal) {
				if (newVal == 1) {
					clearTimeout(this.timersetInterval);
					this.timersetInterval = null;
				}
			}
		},
		created() {
			var macInfo = uni.getSystemInfoSync();
			this.screenWidth = macInfo.screenWidth;
			// 计算swiper样式
			this.swiperList.forEach((item, index) => {
				this.itemStyle.push(this.getStyle(index))
			})
			this.timersetInterval = setInterval(() => {
				this.endMove()
			}, 2000);
		},
		methods: {
			getStyle(e) {
				if (e > this.swiperList.length / 2) {
					var right = this.swiperList.length - e
					return {
						transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
						zIndex: 9999 - right,
						opacity: 1
					}
				} else {
					return {
						transform: 'scale(' + (1) + ') translate(' + (e * 20) + '%,0px)',
						zIndex: 9999 - e,
						opacity: 1
					}
				}
				// if (e > this.swiperList.length / 2) {
				// 	var right = this.swiperList.length - e
				// 	return {
				// 		transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 9) + '%,0px)',
				// 		zIndex: 9999 - right,
				// 		opacity: 0.8 / right
				// 	}
				// } else {
				// 	return {
				// 		transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 9) + '%,0px)',
				// 		zIndex: 9999 - e,
				// 		opacity: 0.8 / e
				// 	}
				// }
			},
			startMove(e) {
				this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
				this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
			},
			endMove(e) {
				console.log(e, 86)
				var newList = JSON.parse(JSON.stringify(this.itemStyle))
				// if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
				// 向左滑动
				var last = [newList.pop()]
				newList = last.concat(newList)
				// } else {
				// 向右滑动
				// newList.push(newList[0])
				// newList.splice(0, 1)
				// }
				this.itemStyle = newList
			}
		}
	}
</script>

<style lang="scss">
	.swiperPanel {
		margin: 20rpx 0;
		height: 100rpx;
		width: 100%;
		overflow: hidden;
		position: relative;

		.swiperItem {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			transition: all .5s;

			/* 定义一个动画关键帧 */


			.children {
				height: 100%;
				width: 25%;
				// margin: 2rpx auto;


				/* 应用动画，设置动画时长、循环次数和速度曲线 */
				.pic {
					height: 100%;
					width: 100%;
					border-radius: 50%;
					// box-shadow: 0 0 10px #333;
				}
			}

		}
	}
</style>