<template>
	<view class="container">
		<u-navbar :placeholder="true" bgColor="#0F0F0F">
			<view slot="left" class="flex-center-center">
				<image class="w-270 h-57" src="/static/icon_sy_tab_img.png"></image>
			</view>
		</u-navbar>
		<!-- <view class="full flex-center-center">
			<image class="w-560 h-535" src="../static/icon_zwkf.png"></image>
		</view> -->
		<view class="swiper_wrap">
			<view class="swiper_item" v-for="(item,index) in currentData" :style="{zIndex:(currentData.length-index)}"
				:data-id='index' :key="index" :animation="item.anim" @touchstart="touchStart" @touchmove="touchMove"
				@touchend="touchEnd">
				<view class="swiper_item_image br-20">
					<image :src="item.avatar" class="br-20" style="width: 100%; height: 100%; position: relative;">
						<view class="pad-30"
							style="position: absolute; bottom: 0; left: 0; right: 0;background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));">
							<view class="flex-center-center">
								<view class="flex-1 flex-column fs-28" style="color: white;text-align: start;">
									<text class="fs-42">{{item.nickname}}</text>
									<text>{{$wskj.getAgeFromDateString(item.birthday)}}岁/{{$wskj.getConstellationFromStr(item.birthday)}}</text>
								</view>
								<image class="wh-57"
									:src="item.sex==1?'/static/icon_sex_1.png':'/static/icon_sex_2.png'"></image>
							</view>
							<view class="flex-between-center mt-50">
								<image class="w-182 h-77" src="@/static/icon_sq_x.png"
									@click="isLikeMember(item.id,1,index)">
								</image>
								<image class="w-182 h-77" src="@/static/icon_sq_xx.png" @click="onMessage(item)">
								</image>
								<image class="w-182 h-77" src="@/static/icon_sq_xh.png"
									@click="isLikeMember(item.id,0,index)">
								</image>
							</view>
						</view>
					</image>
				</view>

				<!-- 喜欢按钮 -->
				<!-- <view class="swiper_item_type swiper_item_type_like"
					:style="{display:item.like_state ==-1?'block':'none'}">
					<image src="../../static/images/like1.png" mode=""></image>
				</view> -->
				<!-- 不喜欢按钮 -->
				<!-- <view class="swiper_item_type swiper_item_type_dislike"
					:style="{display:item.like_state ==1?'block':'none'}">
					<image src="../../static/images/dislike1.png" mode=""></image>
				</view> -->
			</view>
			<emptydata v-if="swiper_data.length == 0"></emptydata>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				startX: 0, //滑动开始x轴位置
				startY: 0, //滑动开始y轴位置
				moveX: 0, //滑动的x轴距离
				moveY: 0, //滑动的y轴距离
				like_state: 0, //-1：左滑，0：没滑动，1：右滑
				currentIndex: -1, //当前滑动的卡片index
				itemsPerPage: 5, // 每页数据量
				currentPage: 1, // 当前页数
				skewDeg: 0, //当前滑动卡片的倾斜度
				swiper_data: [],
				currentData: [],
				// swiper_data: [{
				// 		img: "https://www.changan.com.cn/uploads/chan_newsthumb/816c24592a127e922a4d6142a23f84c9.jpg",
				// 		anim: null,
				// 		like_state: 0
				// 	},
				// 	{
				// 		img: "https://www.changan.com.cn/uploads/chan_newsthumb/330513479a6459781f00398815b9906a.jpg",
				// 		anim: null,
				// 		like_state: 0
				// 	},
				// 	{
				// 		img: "https://www.changan.com.cn/uploads/chan_newsthumb/54f9edc256c247efbab3399b0ee55e7e.jpg",
				// 		anim: null,
				// 		like_state: 0
				// 	},
				// 	{
				// 		img: "https://www.changan.com.cn/uploads/chan_newsthumb/e1b488d041b576ba6ce1cc20a6cb81a3.jpg",
				// 		anim: null,
				// 		like_state: 0
				// 	},
				// 	{
				// 		img: "https://www.changan.com.cn/uploads/chan_newsthumb/816c24592a127e922a4d6142a23f84c9.jpg",
				// 		anim: null,
				// 		like_state: 0
				// 	},
				// 	{
				// 		img: "https://www.changan.com.cn/uploads/chan_newsthumb/330513479a6459781f00398815b9906a.jpg",
				// 		anim: null,
				// 		like_state: 0
				// 	},
				// 	{
				// 		img: "https://www.changan.com.cn/uploads/chan_newsthumb/54f9edc256c247efbab3399b0ee55e7e.jpg",
				// 		anim: null,
				// 		like_state: 0
				// 	},
				// 	{
				// 		img: "https://www.changan.com.cn/uploads/chan_newsthumb/e1b488d041b576ba6ce1cc20a6cb81a3.jpg",
				// 		anim: null,
				// 		like_state: 0
				// 	},
				// ]
			};
		},
		onLoad() {
			/* if (!uni.getStorageSync('token')) {
				this.$wskj.to('/pages/login/wechatlogin');
				return
			} */
			this.getList()
		},
		onShow() {

		},
		methods: {
			onMessage(item) {
				this.$wskj.to(`/pagesMine/pages/user_chat?receiveUserId=${item.id}&title=${item.nickname}`)
			},
			getList() {
				const params = {
					url: '/system/community/selectMemberInfo',
					method: "GET",
					data: {}
				}
				this.$request(params).then(res => {
					for (var i = 0; i < res.data.length; i++) {
						res.data[i].anim = null
						res.data[i].like_state = 0
					}
					this.swiper_data = res.data;
					this.currentData = this.currentPageData();
				})
			},
			totalPages() {
				// 计算总页数
				return Math.ceil(this.swiper_data.length / this.itemsPerPage);
			},
			currentPageData() {
				// 获取当前页的数据
				const start = (this.currentPage - 1) * this.itemsPerPage;
				const end = start + this.itemsPerPage;
				return this.swiper_data.slice(start, end);
			},
			isLikeMember(pickMId, status, index) {
				const params = {
					url: '/system/community/isLikeMember',
					data: {
						pickMId: pickMId,
						status: status //0=喜欢,1=不喜欢
					}
				}
				this.$request(params).then(res => {
					this.currentIndex = index
					if (status) {
						this.like_state = -1
					} else {
						this.like_state = 1
					}
					this.hidden()
				})
			},
			/**
			 * 触摸开始：记录位置
			 * */
			touchStart(event) {
				this.startX = event.touches[0].pageX;
				this.startY = event.touches[0].pageY;
			},
			/**
			 * 触摸开始滑动
			 * */
			touchMove(event) {
				var currentX = event.touches[0].pageX;
				var currentY = event.touches[0].pageY;
				var moveX = currentX - this.startX;
				var moveY = currentY - this.startY;
				var text = '';
				var currentIndex = event.currentTarget.dataset.id;
				//console.log("LMG-触摸开始滑动", currentIndex);
				var state = 0; //-1：左滑，0：没滑动，1：右滑
				// //左右方向滑动
				if (Math.abs(moveX) > Math.abs(moveY)) {
					if (moveX < -10) {
						text = '左滑';
						state = -1;
					} else if (moveX > 10) {
						text = '右滑';
						state = 1;
					}
					this.skew(currentIndex, moveX, moveY);
				} else { //上下方向滑动
					if (moveY < 0) text = '上滑';
					else if (moveY > 0) text = '下滑';
				}
				this.currentData[currentIndex]['text'] = text;
				this.currentData[currentIndex]['like_state'] = state;
				this.like_state = state;
				this.currentIndex = currentIndex;
				this.moveX = moveX;
				this.moveY = moveY;
			},
			/**
			 * 触摸结束
			 * */
			touchEnd(event) {
				// console.log(`移动距离:${Math.abs(this.moveX)}`)
				if (Math.abs(this.moveX) > 60) {
					this.hidden();
				} else {
					var anim = uni.createAnimation({
						duration: 300,
						timingFunction: 'ease-in-out'
					});
					anim.rotate(0)
						.step(1000);
					this.currentData[this.currentIndex]['anim'] = anim.export();
					this.currentData[this.currentIndex]['like_state'] = 0;
				}

			},
			/**
			 * 触摸卡片倾斜
			 * */
			skew(index, moveX, moveY) {
				let that = this;
				var anim = uni.createAnimation({
					duration: 500,
					timingFunction: 'linear'
				});
				this.currentData[index]['anim'] = anim;
				if (Math.abs(moveX) < 180) {
					this.skewDeg
					this.skewDeg = moveX / 4;
					anim.rotate(this.skewDeg)
						.step(1000);
					this.currentData[index]['anim'] = anim.export();
				}
			},
			/**
			 * 触摸结束，卡片消失
			 * */
			hidden() {
				var anim = uni.createAnimation({
					duration: 400,
					timingFunction: 'ease-in-out'
				});
				if (this.like_state == -1) {
					anim.translate(-400, -400)
				} else if (this.like_state == 1) {
					anim.translate(400, -400)
				}
				anim.rotate(this.skewDeg)
					.opacity(0)
					.step(1000);
				this.currentData[this.currentIndex]['anim'] = anim.export();
				console.log("LMG", this.currentIndex);

				if (this.currentIndex == this.itemsPerPage * this.currentPage - 1) {
					//console.log("LMG", (this.itemsPerPage - 1) * this.currentPage);
					if (this.currentPage <= this.totalPages()) {
						this.currentPage++;
						this.currentData.push(...this.currentPageData());
						console.log("LMG", this.currentData);
					}
				}

			}
		},
	};
</script>
<style lang="less" scoped>
	.container {
		background-color: #0F0F0F;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

	}

	.swiper_wrap {
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;

	}

	.swiper_item {
		width: 90%;
		height: 90%;
		border-radius: 10px;
		background: #FFFFFF;
		text-align: center;
		position: absolute;
		top: 5%;
		left: 5%;

	}

	.swiper_item_image {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}

	.swiper_item_text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30px;
		color: #4CD964;
	}

	.swiper_item_type {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #d81e06;
		position: absolute;
		bottom: 20px;

	}

	.swiper_item_type image {
		width: 22px;
		height: 22px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.swiper_item_type_like {
		left: 20px;
	}

	.swiper_item_type_dislike {
		right: 20px
	}
</style>