<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" @click="routerTo(item)">
					<image class="pic" :src="item.url"></image>
					<!-- 绝对定位  -->
					<view class="image-text-box">
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
							<view style="font-size:35rpx;">金蓉蓉</view>
							<view class="ss-flex-1"></view>
							<view class="time-box" style="background-color: #2AAFD6;font-size: 20rpx;">最早可约</view>
							<view class="time-box" style="background-color: #88898B;">
								<text>25日</text>
								<text style="margin-left: 10rpx;">16:00</text>
							</view>
						</view>
						<view class="introduce-box">个人介绍：哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 20rpx;">
							<view style="font-size:26rpx;">12人下过单</view>
							<view class="ss-flex-1"></view>
							<view style="font-size:28rpx;">99+粉丝</view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 20rpx;">
							<view style="font-size:23rpx;">双子座</view>
							<view class="line-box"></view>
							<view style="font-size:23rpx;">168cm</view>
							<view class="ss-flex-1"></view>
							<view class="ss-flex-2 ss-col-center">
								<text style="color: #fff;font-size: 26rpx;font-weight: 650;" class="textIcon icon-position"></text>
								<view style="font-size: 24rpx;margin-left: 5rpx;">1.2km</view>
							</view>
						</view>
						<!-- 当点击喜欢时并不去请求后端，将其保存下来等结束了一起传给后端 -->
						<view class="ss-flex-2 ss-col-center ss-row-around" style="margin-top: 50rpx;">
							<view class="ss-flex-2 ss-col-center icon-xin-x">
								<text style="color: #fff;font-size: 46rpx;font-weight: 650;" class="textIcon icon-no"></text>
							</view>
							<view class="ss-flex-2 ss-col-center icon-xin-x">
								<text style="color: #C44230;font-size: 50rpx;font-weight: 650;" class="textIcon icon-taoxin"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			swiperList: {
				type: Array,
				default: [
					{
						url: 'https://cdn.uviewui.com/uview/goods/1.jpg',
						name: '这是一个图片'
					}
				]
			},
			// 自动翻页 间隔2秒
			timeNum:{
				type:Number,
				default:2000
			},
			// 点击后 5秒内未操作 自动翻页开启
			interval:{
				type:Number,
				default:5000
			},
		},
		data() {
			return {
				slideNote: {
					x: 0,
					y: 0
				},
				screenWidth: 0,
				itemStyle: [],
				timer: null,
				timer1: null
			};
		},
		watch: {
			swiperList: {
				handler(val) {
					if (val.length) {
						var macInfo = uni.getSystemInfoSync();
						this.screenWidth = macInfo.screenWidth;
						// 计算swiper样式
						this.swiperList.forEach((item, index) => {
							this.itemStyle.push(this.getStyle(index))
						})
					}
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {
			// this.doSomething()
		},
		onUnload() {
			this.timer = null
			this.timer1 = null
		},
		beforeDestroy() {
			this.timer = null
			this.timer1 = null
		},
		methods: {
			doSomething() {
				this.$nextTick(() => {
					this.timer = setInterval(() => {
						var newList = JSON.parse(JSON.stringify(this.itemStyle))
						// 向左滑动
						var last = [newList.pop()]
						newList = last.concat(newList)
						this.itemStyle = newList
					}, this.timeNum)
				})
			},
			routerTo(data) {
				// 此处为点击逻辑
				// 或者给父组件抛出事件
				// this.$emit("方法名字",参数)
			},
			getStyle(e) {
				if (e > this.swiperList.length / 2) {
					var right = this.swiperList.length - e
					return {
						transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 14) + '%,0px)',
						zIndex: 100 - right,
						opacity: 0.8 / right
					}
				} else {
					return {
						transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 14) + '%,0px)',
						zIndex: 100 - e,
						opacity: 0.8 / e
					}
				}
			},
			startMove(e) {
				clearInterval(this.timer)
				this.timer = null
				this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
				this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
			},
			endMove(e) {
				var newList = JSON.parse(JSON.stringify(this.itemStyle))
				if ((e.changedTouches[0].pageX - this.slideNote.x) < -10) {
					// 向左滑动
					var last = [newList.pop()]
					newList = last.concat(newList)
				} else if ((e.changedTouches[0].pageX - this.slideNote.x) >= 10) {
					// 向右滑动
					newList.push(newList[0])
					newList.splice(0, 1)
				}
				this.itemStyle = newList
				// 清除之前的定时器，以防多次点击
				clearTimeout(this.timer1);

				// 设置定时器，5秒后执行doSomething方法
				// this.timer1 = setTimeout(this.doSomething, this.interval);
			}
		}
	}
</script>

<style lang="scss">
	.swiperPanel {
		margin: 20rpx 0;
		height: calc(90vh - 90px);
		width: 100%;
		overflow: hidden;
		position: relative;

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

			.children {
				height: 100%;
				// width: 580rpx;
				margin: 2rpx auto;
				position: relative;

				.image-text-box{
					position: absolute;
					left: 15rpx;
					bottom: 20rpx;
					right: 15rpx;
					padding: 10rpx;
					min-height: 300rpx;
					background-color: rgba(0, 0, 0, .15);
					border-radius: 10rpx;
					color: #fff;
					padding-bottom: 20rpx;
					.time-box{
						padding: 3rpx 20rpx;
						font-size: 22rpx;
						border-radius: 5rpx;
					}
					.introduce-box{
						width: 100%;
						font-size: 23rpx;
						margin-top:10rpx;
						white-space: nowrap; /* 不换行 */
						overflow: hidden; /* 隐藏超出的内容 */
						text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
					}
					.line-box{
						width: 4rpx;
						height: 30rpx;
						margin-left: 15rpx;
						margin-right: 15rpx;
						box-sizing: border-box;
						background-color: #fff;
					}
					.icon-xin-x{
						padding: 15rpx 100rpx;
						background-color: rgba(0, 0, 0, .4);
						border-radius: 10rpx;
					}
				}


				.pic {
					height: 100%;
					width: 100%;
					border-radius: 10px;
					// box-shadow: 0 0 10px #333;
				}

				.name {
					position: absolute;
					width: 100%;
					bottom: 0;
					left: 0;
					background: rgba(0, 0, 0, 0.5);
					box-shadow: 0rpx 4rpx 21rpx 0rpx rgba(0, 0, 0, 0.07);
					border-radius: 0 0 20px 20px;
					height: 85rpx;
					line-height: 85rpx;
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}
</style>
