<template>
	<view class="container">
		<swiper class="video-swiper" :circular="circular" :easing-function="easingFunction" :vertical="true"
			:current="swiperCurrent" :duration="duration" @animationfinish="animationfinish" @transition="swiperTransition">
			<!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
			<swiper-item v-for="(item, index) in curQueue" :key="item.idxKey">
				<u-swiper :autoplay="false" :list="item.images" @change="change" height="91vh" :radius="0" :indicator="false" bgColor="#0f001f"
					imgMode="aspectFit" :circular="true" :loading="loading" easingFunction="linear" :lazy-load="true"></u-swiper>
				
				<!-- 浮动元素开始 -->
				<view class="user-info" @click="onUserDetail(item.userId,index)">
					<view class="title">@{{ item.userInfo.nickname }}</view>
					<view class="tag">
						<view class="btn" v-if="item.userInfo.age">{{ item.userInfo.age }}岁</view>
						<view class="btn" v-if="item.height">{{ item.height }}</view>
						<view class="btn" v-if="item.position">{{ item.position }}</view>
						<view class="btn" v-if="item.userInfo.city">{{ item.userInfo.city }}</view>
						<view class="btn" v-if="item.yearlyPay">{{ item.yearlyPay }}</view>
					</view>
					<!-- <view class="mate-title">希望另一半</view> -->
					<!-- <view class="tag2">
						<view class="btn" v-if="item.whenMarried">期望{{ item.whenMarried }}</view>
					</view>
					<view class="tag2">
						<view class="btn" v-if="item.ageMate">期望年龄{{ item.ageMate }}</view>
						<view class="btn" v-if="item.heightMate">期望身高{{ item.heightMate }}</view>
					</view> -->
					<view class="desc2">
						<div v-if="item.whenMarried">{{ item.whenMarried }}</div>
						<div>{{ item.ageMate ? '期望年龄' + item.ageMate : '期望年龄不限' }} {{ item.heightMate ? '期望身高' + item.heightMate : '期望身高不限' }}</div>
					</view>
					<!-- <u-read-more>
							<rich-text class="desc" :nodes="item.userInfo.introduction"></rich-text>
					</u-read-more> -->
					<!-- <view class="desc">
						<u--text :lines="2" :text="getInputSize(item.userInfo.introduction)" color="#ffffff" :size="16"></u--text>
					</view> -->
				</view>
				<view class="right-bar">
					<view class="avatar">
						<view class="icon" @click="onUserDetail(item.userId,index)">
							<image :src="item.userInfo.avatar" mode="aspectFill">
							</image>
						</view>
						<view class="add" v-if="!item.follow" @click="onFollow(item.userId,index)">
							<image src="../../static/icon/add4.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="heart">
						<view class="icon" @click="onLikes(item.userInfo,index)">
							<u-icon v-if="item.liked"  name="heart-fill" :size="40" color="#ff0077"></u-icon>
							<u-icon v-else name="heart-fill" :size="40" color="#ffffff"></u-icon>
							<text v-if="likes > 0">{{ likes }}</text>
							<text v-else>{{ item.userInfo.likes }}</text>
						</view>
					</view>
					<view class="comment">
						<view class="icon" @click="openComment(item.userInfo,index)" >
							<u-icon name="chat-fill" :size="40" color="#ffffff"></u-icon>
							<!-- <image src="../../static/icon/comment-active.png"></image> -->
							<text>{{ item.userInfo.commentNumbers }}</text>
						</view>
					</view>
					<!-- <view class="gift">
						<view class="icon">
							<image src="../../static/icon/gift.png"></image>
						</view>
					</view> -->
				</view>
				<!-- 浮动元素结束 -->
				
			</swiper-item>
		</swiper>
		<u-popup :show="showComment" mode="bottom" :round="10" :closeable="true" @close="closeComment">
			<view class="comment-popup">
				<view class="head">
					<text class="title">{{ countComment }}条评论</text>
				</view>
				<view class="user-list">
					<u-list :height="310" @scrolltolower="scrolltolower">
						<view class="list">
							<u-list-item v-for="(item, index) in comment" :key="index">
								<u-cell :border="false">
									<!-- <view slot="icon">
										<view class="avatar">
											<u-avatar size="50" :src="item.avatar"
												customStyle="margin: -3px 5px -3px 0"
											@click="$push('sub_pages/member/detail/detail',{userId: item.userId})"></u-avatar>
										</view>
									</view> -->
									<view slot="label">
										<view class="comment-box">
											<view class="comment-avatar">
												<u-avatar :size="45" :src="item.avatar"
													customStyle="margin: -3px 5px -3px 0"
												@click="$push('sub_pages/member/detail/detail',{userId: item.userId})"></u-avatar>
											</view>
											<view class="comment-content">
												<view class="nickname">
													{{ item.nickname }}
												</view>
												<rich-text class="content" :nodes="item.content"></rich-text>
												<view class="reply-box">
													<view class="create-time">{{ new Date(item.createTime).getTime() | timeFrom }} · {{ getProvince(item.toUserProvince) }} <text class="reply" @click="onReply(item,index)">回复</text></view>
													<view class="like">
														<!-- <u-icon name="heart" :size="18"></u-icon> -->
														粉丝：
														<u-badge numberType="limit" :inverted="true" color="#999999" :value="item.fans"></u-badge>
													</view>
													<!-- 粉丝：{{ item.fans }} -->
												</view>
												<!-- 回复评论 -->
												<block v-for="(reply, replyIndex) in item.children" :key="replyIndex">
													<view class="reply-item">
														<view class="reply-user">
															<u-avatar :size="16" :src="reply.avatar"
																customStyle="margin: -3px 5px -3px 0"
															@click="$push('sub_pages/member/detail/detail',{userId: reply.replyUserId})"></u-avatar>
															<view class="nickname">
																<text class="reply-nickname1">{{ reply.nickname }}</text>
																<u-icon v-if="reply.replyNickname" name="play-right-fill" :size="12" color="#999999"></u-icon>
																<text class="reply-nickname2" v-if="reply.replyNickname">{{ reply.replyNickname }}</text>
															</view>
														</view>
														<rich-text class="content" :nodes="reply.content"></rich-text>
														<view class="reply-box">
															<view class="create-time">{{ new Date(reply.createTime).getTime() | timeFrom }} · {{ getProvince(reply.toUserProvince) }} <text class="reply" @click="onReply(reply,replyIndex)">回复</text></view>
															<view class="like">
																粉丝：
																<u-badge numberType="limit" :inverted="true" color="#999999" :value="reply.fans"></u-badge>
															</view>
														</view>
													</view>
												</block>
											</view>
										</view>
									</view>
									<view slot="right-icon">

									</view>
								</u-cell>
							</u-list-item>
							<u-empty
									v-if="comment.length == 0"
							        mode="message"
									text="暂无评论"
							        icon="http://cdn.uviewui.com/uview/empty/data.png"
							>
							</u-empty>
						</view>
					</u-list>
				</view>
				<view class="footer">
					<view class="search">
						<u-search :showAction="true" :placeholder="placeholder" searchIcon="chat" actionText="发送" :actionStyle="actionStyle" v-model="form.content" @custom="onSend()"></u-search>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>

	import * as UserFollowApi from '@/api/user-follow.js'
	import * as UserCommentApi from '@/api/user-comment.js'
	import * as UserLikeApi from '@/api/user-like.js'
	import { navTo } from '@/core/app.js'
	import { mapMutations} from 'vuex'
	import store from '@/store'
	import {
		getInputSize
	} from '@/utils/util.js'
	
	
	const userId = uni.getStorageSync('userId')

	export default {
		data() {
			return {
				getInputSize,
				list: [],
				user: {},
				navTo,
				nextQueue: [],
				prevQueue: [],
				curQueue: [],
				circular: false,
				_last: 1,
				_change: -1,
				_invalidUp: 0,
				_invalidDown: 0,
				_videoContexts: [],
				total: 0,
				videoBol: [false, false, false, false],
				swiperCurrent: '',
				clone_pop: '',
				opInfo: {
					showhb: false
				},
				actionStyle: {
					background: '#681752',
					color: '#ffffff',
					padding: '12rpx 16rpx',
					borderRadius: '50rpx'
				},
				iconStyle: {
					background: '#681752',
				},
				showComment: false,
				comment: [],
				countComment: 0,
				form: {
					toUserId: 0,
					replyUserId: 0,
					content: '',
				},
				likesColor: '#ffffff',
				loadMore: true,
				status: '加载更多',
				showLiked: false,
				likes: 0,
				currentIndex: 0, 	// 当前评论ID
				placeholder: '善语结善缘，恶言伤人心'
			};
		},
		props: {
			duration: {
				type: Number,
				default: 500
			},
			windowHeight: {
				type: Number,
				default: 500
			},
			easingFunction: {
				type: String,
				default: 'default'
			},
			loop: {
				type: Boolean,
				default: false
			},
			index: {
				type: Number,
				default: 0
			},
			loading: {
				type: Boolean,
				default: true
			},
			videoList: {
				type: Object,
				default: null
			}
		},
		beforeMount() {
			this._videoContexts = [
				uni.createVideoContext('video_0', this),
				uni.createVideoContext('video_1', this),
				uni.createVideoContext('video_2', this),
				uni.createVideoContext('video_3', this)
			];
		},
		methods: {
			...mapMutations(['ADD_FRIEND']),
			change(e) {
				// console.log("e: ", e);
			},
			onRefreshList(toUserId){
				const app = this
				const limit = 100
				UserCommentApi.pageComment({toUserId,limit}).then(res => {
					// app.countComment = res.data.count
					app.comment = res.data.list.map(d => {
						d.children = d.children.reverse()
						return d
					})
					
					// const newList = res.data.list
					// if (newList.length > 0) {
					// 	app.comment = app.comment.concat(newList)
					// } else {
					// 	app.status = '没有更多了'
					// 	app.loadMore = false
					// }
				}).catch(err => {
					app.$error(err.message)
				})
			},
			openComment(item,index){
				const loginUserId = store.getters.userId
				if(!loginUserId || loginUserId == 1101){
					this.$push('pages/login/index')
					return false
				}
				// uni.hideTabBar()
				this.comment = []
				this.onRefreshList(item.userId)
				this.form.toUserId = item.userId
				this.countComment = item.commentNumbers
				this.currentIndex = index
				this.showComment = true
			},
			closeComment(){
				// uni.showTabBar()
				this.showComment = false
				this.placeholder = '善语结善缘，恶言伤人心'
			},
			onSend(){
				const app = this
				const { form } = this
				if(form.content == ''){
					app.$error('请填写评论内容')
					return false
				}
				UserCommentApi.addComment(form).then(res => {
					app.form.content = ''
					app.onRefreshList(form.toUserId)
					app.curQueue[app.currentIndex].commentNumbers = res.data.commentNumbers
					// app.$success(res.message)
				}).catch(err => {
					app.$error(err.message)
				})
			},
			onLikes(toUser,index){
				const app = this
				const loginUserId = store.getters.userId
				if(!loginUserId || loginUserId == 1101){
					this.$push('pages/login/index')
					return false
				}
				// console.log(index,toUser.userId);
				// console.log("app.: ",app.curQueue);
				// console.log("app.videoList: ",app.videoList);
				UserLikeApi.addLike({
					toUserId: toUser.userId
				}).then(res => {
					app.curQueue[app.swiperCurrent].userInfo.likes = res.data
					app.curQueue[app.swiperCurrent].liked = !app.curQueue[index].liked
					// const arr = app.curQueue.map(d => {
					// 	if(d.userId == toUser.userId){
					// 		app.curQueue[index].likes = res.data
					// 		app.curQueue[index].liked = !toUser.liked
					// 	}
					// })
					// app.showLiked = !toUser.liked
				})
			},
			onUserDetail(userId,index){
				const app = this
				const loginUserId = store.getters.userId
				if(!loginUserId || loginUserId == 1101){
					this.$push('pages/login/index')
					return false
				}
				// this.$push('sub_pages/member/detail/detail',{userId})
				uni.navigateTo({
					url: `/sub_pages/member/detail/detail?userId=${userId}`,
					events: {
						reload: ({follow}) => {
							const originFollow = app.curQueue[index].follow
							app.curQueue[index].follow = follow
							if (!follow && app.curQueue[index].follow) app.curQueue.splice(index, 1)
						}
					}
				})
			},
			// getIntroduction(text){
			// 	if(getInputSize(text) > 30){
			// 		return text + ' 详情>>'
			// 	}
			// 	return text
			// },
			getLikesColor(e){
				if(e > 0){
					return true
				}
				return false
			},
			onFollow(shopId,index){
				const app = this
				const loginUserId = store.getters.userId
				if(!loginUserId || loginUserId == 1101){
					app.$push('pages/login/index')
					return false
				}
				app.curQueue[index].follow = !app.curQueue[index].follow
				UserFollowApi.addFollow({shopId}).then(res => {
					app.$success(res.message)
				})
			},
			toChat(item){
				if(userId == 1101 || userId == null){
					this.$push('pages/login/index')
					return false
				}
				this.ADD_FRIEND(item.userInfo)
				uni.navigateTo({
					url: '/pages/chat/chat?friendId=' + item.userInfo.userId
				})
			},
			onCommentLikes(item,index){
				const app = this
				if(userId == 1101 || userId == null){
					app.$push('pages/login/index')
					return false
				}
				UserLikeApi.addLike({
					toUserId: item.userId
				}).then(res => {
					app.likes = res.data
					app.setLikeLight(index)
				})
			},
			setLikeLight(index){
				this.comment[index].likes = this.comment[index].likes + 1
			},
			_videoListChanged(newVal) {
				var self = this;
				if (this._videoContexts == undefined) {
					setTimeout(function() {
						//防止_videoContexts还没有初始化就进行下一个执行
						self._videoListChanged(newVal);
					}, 500);
					return
				}

				var index = this.index;
				var total = newVal.length; // 如果传入的index大于总数，则默认从0开始播放

				if (index + 1 > total) {
					index = 0;
				}

				var data = this;
				let remainder = index % 3; // 3的余数--当前轮播位置

				var curQueue = [];
				var _pop = [];
				var swiperCurrent = remainder;
				newVal.forEach(function(item, idx) {
					item.index = idx;
					data.nextQueue.push(item);
				}); // console.log(newVal, 'newval', data);

				if (data.curQueue.length === 0) {
					let curIndex = index > 0 ? index - 1 : 0;
					self._change = ((index % 3) + 1) % 3; // 假设直接从顶部滑下来
					// _this.data._last = index === 0 ? 0 : // 如果初始播放第0个视频
					//     // index不是0，刚好是3的倍数，上一个swiper-item的索引是2(最后一个)
					//     _this.data._change === 0 ? 2 : _this.data._change - 1;// 其他情况直接用_change - 1就行

					self._last = remainder;

					if (index === 0) {
						self._invalidDown = 1;
					} else {
						self._invalidDown = 0;
					} // 如果刚好是第0个，不允许下滑

					if (total - curIndex < 2) {
						self._invalidUp = 1;
					} else {
						self._invalidUp = 0;
					} // 这个比较复杂了
					// 设置前后还剩多少数据

					self.prevQueue = newVal.slice(0, curIndex);
					self.nextQueue = newVal.slice(curIndex + 3);
					var circular = true;

					if (self.nextQueue.length === 0 && self._change !== 0) {
						circular = false;
					}

					if (self.prevQueue.length === 0 && self._change !== 2) {
						circular = false;
					} // 当前swiper展示的数组顺序

					let indexAdd = index + 1;
					let indexAdd2 = index + 2;
					let indexSub = index - 1;

					if (total > 4 && total % 3 == 1 && total - 1 - index <= 2) {
						// 除以3余1
						curQueue = [...newVal.slice(total - 1, total), ...newVal.slice(total - 3, total - 2), ...newVal
							.slice(total - 2, total - 1), ...newVal.slice(total - 1, total)
						];
						self.circular = circular = false;

						if (total - 1 - index == 0) {
							self._change = 0;
							self._invalidDown = 0;
							self._invalidUp = 1;
							self._last = 3;
							swiperCurrent = 3;
							self.prevQueue = newVal.slice(0, curIndex - 1);
						} else if (total - 1 - index == 1) {
							self._change = 0;
							self._invalidDown = 0;
							self._invalidUp = 0;
							self._last = 2;
						} else if (total - 1 - index == 2) {
							self._change = 2;
							self._invalidDown = 0;
							self._invalidUp = 0;
							self._last = 1;
							self.circular = circular = true;
							curQueue = [...newVal.slice(indexSub, index), ...newVal.slice(index, indexAdd), ...newVal
								.slice(indexAdd, indexAdd2)
							];
						}
					} else if (total > 4 && total % 3 == 2 && total - index - 1 <= 1) {
						// 除以3余2
						_pop = newVal.slice(total - 3, total - 2);
						_pop = _pop[0];

						if (total - index - 1 == 0 || total == index + 2) {
							if (total == index + 2) {
								// 当直接定位到倒数第二个播放
								self._change = 1;
								self._invalidDown = 0;
								self._invalidUp = 0;
								self._last = 0;
								circular = false;
								curQueue = [
									...newVal.slice(total - 2, total - 1),
									...newVal.slice(total - 1, total) // ...newVal.slice(total - 3, total - 2),
								];
							} else {
								self._change = 1;
								self._invalidDown = 0;
								self._invalidUp = 1;
								self._last = 1;
								circular = false;
								curQueue = [...newVal.slice(total - 2, total - 1), ...newVal.slice(total - 1, total)];
							}

							self.prevQueue = newVal.slice(0, total - 3);
						} else if (total - index - 1 == 1) {
							self._change = 1;
							self._invalidDown = 0;
							self._invalidUp = 0;
							self._last = 0;
							circular = true;
							curQueue = [...newVal.slice(total - 2, total - 1), ...newVal.slice(total - 1, total), ...
								newVal.slice(total - 3, total - 2)
							];
						}
					} else {
						if (total <= 4) {
							// 当从第一个视频播放不需要其他操作
							// 当轮播第一次 初始化值
							self._change = -1;
							self._last = 1;
							self._invalidDown = 0;
							self._invalidUp = 0; // curQueue = newVal.slice(curIndex, curIndex + 3);

							curQueue = newVal;
							circular = false;
						} else {
							if (remainder == 0 && total > 4) {
								let lastArr = newVal.slice(indexSub, index); // 当这是第N轮的第一个swiper，需要裁剪上一个尾的数据
								if (index == 0) {
									// 当这是第一个swiper位置视频，当前最后一个视频为下2个
									self._change = -1;
									self._last = 1;
									self._invalidDown = 0;
									self._invalidUp = 0;
									lastArr = newVal.slice(indexAdd2, indexAdd2 + 1);
								}
								curQueue = [...newVal.slice(index, indexAdd), ...newVal.slice(indexAdd, indexAdd2), ...
									lastArr
								];
							} else if (remainder == 1 && total > 4) {
								curQueue = [...newVal.slice(indexSub, index), ...newVal.slice(index, indexAdd), ...
									newVal.slice(indexAdd, indexAdd2)
								];
							} else if (remainder == 2 && total > 4) {
								let homeArr = newVal.slice(indexAdd, indexAdd2); // 当这是第三个swiper，需要裁剪将来一个

								if (total === index + 1) {
									// 当这是最后一个视频时，只需要裁剪前2个
									circular = false;
									homeArr = newVal.slice(index - 2, indexSub);
								}
								curQueue = [...homeArr, ...newVal.slice(indexSub, index), ...newVal.slice(index,
									indexAdd)];
							}
						}
					}

					if (total <= 4) {
						swiperCurrent = index;
					}
					self.total = total
					self.curQueue = curQueue
					self.circular = circular
					self.swiperCurrent = swiperCurrent
					self.clone_pop = _pop
					self.playCurrent(swiperCurrent);
					console.log('curQueue', self.curQueue)
				}
			},
			animationfinish: function animationfinish(e) {
				var _data = this;
				var _last = _data._last;
				var _change = _data._change;
				var curQueue = _data.curQueue;
				var prevQueue = _data.prevQueue;
				var nextQueue = _data.nextQueue;
				var total = _data.total;
				var current = e.detail.current;
				var diff = current - _last;
				this.swiperCurrent = current;
				console.log('swiperCurrent_1', this.swiperCurrent)
				this.playCurrent(current);
				if (diff === 0 || total <= 4) {
					return;
				}
				this._last = current;
				var direction = diff === 1 || diff === -2 ? 'up' : 'down';

				if (direction === 'up') {
					uni.$emit('getmorevd', {
						data: nextQueue.length //下划时传递剩余条件，看看要不要加载新的数据进来
					})
					if (this._invalidDown === 0) {
						var change = (_change + 1) % 3;
						var add = nextQueue.shift();
						var remove = curQueue[change];

						if (add) {
							prevQueue.push(remove);
							curQueue[change] = add;
							this._change = change; // strart 判断是否总数余数为多少，裁剪当前轮播放2个还是4个。正常显示3个轮播
							if (total % 3 === 1 && nextQueue.length === 0) {
								let timers = new Date();
								let addItem = JSON.parse(JSON.stringify(add));
								addItem.idxKey = timers.getTime();
								curQueue[3] = addItem;
							} else if (total % 3 === 2 && nextQueue.length === 0) {
								let _pop = curQueue.pop();
								this.clone_pop = _pop;

							} // end
						} else {
							this._invalidUp += 1;
						}
					} else {
						this._invalidDown -= 1;
					}
				}
				if (direction === 'down') {
					if (this._invalidUp === 0) {
						var _change2 = _change;
						var _remove = curQueue[_change2];

						var _add = prevQueue.pop();

						if (_add) {
							curQueue[_change2] = _add;
							nextQueue.unshift(_remove);
							this._change = (_change2 - 1 + 3) % 3;
						} else {
							this._invalidDown += 1;
						}
					} else {
						// strart 判断是否总数余数为多少，裁剪当前轮播放2个还是4个。正常显示3个轮播
						if (total % 3 === 1 && curQueue.length === 4) {
							curQueue.pop();
						} else if (total % 3 === 2 && nextQueue.length === 0) {
							curQueue.push(this._pop);
						} // end

						this._invalidUp -= 1;
					}
				}
				var circular = true;
				if (nextQueue.length === 0 && current !== 0) {
					circular = false;
				}
				if (prevQueue.length === 0 && current !== 2) {
					circular = false;
				}
				this.curQueue = curQueue;
				this.circular = circular;
			},
			swiperTransition({detail: {dy}}){
				if (this.swiperCurrent === 0 && dy < -80) this.$emit('reload')
			},
			menuButton(menuID, idkey) {
				this.videoList.oneload = false;
				console.log('菜单' + menuID + ";视频ID" + idkey)
				if (menuID == "mu_0") {
					this.videoList.vdlist[idkey - 1].menuInfo[0].sum++;
					this.videoList.vdlist[idkey - 1].menuInfo[0].icon = "dianzan1.png";
				}

			},
			// 点击播放或暂停
			clickVideo(e) {
				let current = this.swiperCurrent;
				let index = e.currentTarget.dataset.index;
				var videoContextPrev = uni.createVideoContext(`video_${current}`, this);
				if (this.videoBol[index]) {
					videoContextPrev.pause();
				} else {
					videoContextPrev.pause();
					setTimeout(function() {
						//将点击视频进行播放
						videoContextPrev.play();
					}, 300);
				}
			},

			playCurrent(current) {
				const app = this
				app.swiperCurrent = current
				console.log('swiperCurrent_2', app.swiperCurrent)
				let _videoContexts = this._videoContexts;
				_videoContexts.map((item, index) => {
					if (current == index) {
						item.play();
					} else {
						item.stop();
						item.seek(0);
					}
				});

			},
			onPlay(e) {
				let index = e.currentTarget.dataset.index;
				this.videoBol[index] = true
				// this.[`videoBol[${index}]`] = true

			},
			onPause(e) {
				let index = e.currentTarget.dataset.index;
				this.videoBol[index] = false
				// this.[`videoBol[${index}]`] = false
			},
			onEnded(e) {
				let index = e.currentTarget.dataset.index;
				this.videoBol[index] = false
				// this.[`videoBol[${index}]`] = false
			},
			getProvince(text){
				if(text == '广西壮族自治区'){
					return '广西'
				}
				return text;
			},
			onReply(item,index){
				const app = this
				if(userId == 1101 || userId == null){
					app.$push('pages/login/index')
					return false
				}
				console.log("item: ",item);
				app.placeholder = '回复@' + item.nickname
				app.form.replyCommentId = item.replyCommentId ? item.replyCommentId : item.commentId
				app.form.replyUserId = item.userId
				UserLikeApi.addLike(app.form).then(res => {
					app.likes = res.data
					app.setLikeLight(index)
				})
			}
		},
		watch: {
			videoList: {
				handler() {
					var newVal = arguments[0].vdlist.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
					if (newVal.vdlist.length) {
						newVal.vdlist.map((item, index) => {
							return (item.idxKey = index + 1);
						});
						if (newVal.oneload) { //这里控制是循环开始还是追加
							this._videoListChanged(newVal.vdlist);
						} else {
							// 防止当前数组被污染
							let arr = JSON.parse(JSON.stringify(newVal.vdlist)); // 去掉已有的数据
							let nextArr = arr.splice(this.total);
							this.nextQueue.push(...nextArr);
						}
						this.total = newVal.vdlist.length;
					}
				},
				immediate: true,

			},
			_pop: {
				handler(newVal, oldVal) {
					this.clone_pop = newVal;
				},
				immediate: true
			},
			swiperCurrent:{
				handler(newVal, oldVal) {
					console.log(newVal, oldVal)
				},
				immediate: true
			}
		}
	};
</script>
<style lang="scss" scoped>
	
	// /deep/ .u-swiper__wrapper__item__wrapper {
	// 	position: relative;
	// 	display: flex;
	// 	align-items: center;
	// }
	/** 媒合婚恋 **/
	.container {
		width: 750rpx;
	}

	.user-info {
		width: 750rpx;
		position: fixed;
		z-index: 999;
		bottom: 20rpx;
		padding: 40rpx;
		height: 210rpx;

		.title {
			font-size: 34rpx;
			font-weight: 600;
			color: #ffffff;
		}
		.mate-title{
			color: #ffffff;
			font-size: 30rpx;
			font-weight: 700;
			margin-top: 20rpx;
		}
		.tag2{
			display: flex;
			margin-top: 10rpx;
			
			.btn {
				font-size: 26rpx;
				padding: 1rpx 10rpx;
				color: #ffffff;
				border-radius: 10rpx;
				margin-right: 10rpx;
				background: linear-gradient(#47076b, #8d1a50);
			}
		}
		.tag {
			display: flex;
			margin-top: 20rpx;

			.btn {
				font-size: 26rpx;
				padding: 1rpx 10rpx;
				color: #ffffff;
				border-radius: 10rpx;
				margin-right: 10rpx;
				background: linear-gradient(#47076b, #8d1a50);
			}
		}

		.desc {
			margin-top: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			width: 680rpx;
		}
		.desc2{
			margin-top: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			width: 680rpx;
			display: flex;
			flex-direction: column;
			color: #ffffff;
			.more{
				right: -26rpx;
				bottom: 25rpx;
				font-size: 26rpx;
				color: #303133;
			}
		}
		.text-ellipsis{
		  overflow:hidden;
		  text-overflow: ellipsis;
		  -webkit-line-clamp: 2;
		  display: -webkit-box;
		  -webkit-box-orient: vertical;
		}
	}

	.right-bar {
		position: fixed;
		z-index: 9999;
		right: 1vh;
		bottom: calc(300rpx);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.avatar {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon {
				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 100%;
					overflow: hidden;
					background-color: #dedede;
					border: 5rpx solid #ffffff;
				}
			}

			.add {
				position: absolute;
				bottom: -16rpx;
				overflow: hidden;
				border: 0;
				image{
					width: 40rpx;
					height: 40rpx;
					border-radius: 100%;
					background-color: #ffffff;
				}
			}
		}

		.heart {
			margin-top: 40rpx;
			color: #ffffff;

			.icon {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 26rpx;

				image {
					width: 65rpx;
					height: 65rpx;
					border-radius: 100%;
					overflow: hidden;
				}
			}
		}

		.comment {
			margin-top: 20rpx;
			color: #ffffff;

			.icon {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 26rpx;

				image {
					width: 65rpx;
					height: 65rpx;
					border-radius: 100%;
					overflow: hidden;
				}
			}
		}

		.gift {
			margin-top: 20rpx;
			color: #ffffff;

			.icon {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 65rpx;
					height: 65rpx;
					border-radius: 100%;
					overflow: hidden;
				}
			}
		}
	}


	/** 高仿抖音原样式 **/

	.video-swiper {
		z-index: 1;
		position: relative;
		margin-top: calc(var(--status-bar-height) + 90rpx);
		/* 计算留出底部自定义菜单位置*/
		/* height: calc(100vh - 100rpx); */
		height: calc(100vh - 130rpx);
		background-color: #0f001f;
	}

	.video_item {
		height: 100%;
		width: 100%;
	}

	.video {
		width: 100vw;
		height: 100vh;
	}

	/* 以下为仿抖音界面样式 */
	.playState {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100rpx;
		height: 100rpx;
		margin: auto;
		z-index: 5;
	}

	/*右侧工具*/
	.video-tools {
		position: fixed;
		right: 20rpx;
		bottom: 10vh;
		overflow: initial;
		width: 100rpx;
		z-index: 999;
	}

	.video-tools .control-wrap {
		line-height: 60rpx;
		overflow: initial;
		width: 100rpx;
	}

	.video-tools .item {
		position: relative;
		text-align: center;
		margin-top: 30rpx;
		background: none;
		width: 100rpx;
		padding: 0;
	}

	.video-tools .item::after {
		display: none;
	}

	.video-tools .icon {
		display: inline-block;
		position: relative;
		width: 70rpx;
		height: 70rpx;
		margin-bottom: 12rpx;
		font-size: 0;
		overflow: hidden;
		vertical-align: middle;
		z-index: 9999;
	}

	.video-tools .item .txt {
		display: block;
		line-height: 1;
		font-size: 26rpx;
		font-weight: 400;
		height: 30rpx;
		text-shadow: 0 0 8rpx rgba(0, 0, 0, .3);
		color: rgba(255, 255, 255, 1);
	}

	.video-tools .avatar {
		display: inline-block;
		position: relative;
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 12rpx;
		font-size: 0;
		overflow: hidden;
		vertical-align: middle;
		z-index: 88;
		border-radius: 50%;
		box-sizing: border-box;
		border: 4rpx solid #fff;
	}

	.video-tools .add {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		left: 37rpx;
		bottom: 5rpx;
		z-index: 99;
	}

	/*弹出红包*/
	.video-hbmask {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 1000;
	}

	.video-hbbox {
		width: 500rpx;
		height: 620rpx;
		border-radius: 20rpx;
		background: #bc492f;
		padding: 30rpx;
		text-align: center;
		position: absolute;
		color: #c0c3b5;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 1001;
		box-sizing: border-box;
	}

	.hb-colse {
		width: 200rpx;
		height: 50rpx;
		text-align: center;
		position: absolute;
		color: #fbffef;
		top: 700rpx;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 1001;
		box-sizing: border-box;
	}

	.hb-hbavatar {
		padding-top: 40rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.hb-title {
		padding-top: 20rpx;
		color: #ffd80f !important;
	}

	.hb-paybox {
		display: -webkit-flex;
		/* Safari */
		display: flex;
		width: 100%;
		justify-content: center;
		padding-top: 30rpx;
		line-height: 80rpx;
	}

	.hb-input {
		font-size: 60rpx;
		height: 62rpx;
		color: #fec410;
	}

	.hb-reload {
		display: -webkit-flex;
		/* Safari */
		display: flex;
		justify-content: center;
		color: #c0c3b5;
		line-height: 60rpx;
		align-items: flex-start;
		font-size: 26rpx;
	}

	.hb-butt {
		background-color: #f8cf1c;
		/* Green */
		border: none;
		color: white;
		margin-top: 30rpx;
		border-radius: 10rpx;
		padding: 14rpx 100rpx;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 28rpx;
	}


	/*弹出商品*/
	.video-goods {
		width: 360rpx;
		height: 160rpx;
		border-radius: 8rpx;
		background: #fff;
		position: fixed;
		bottom: 50rpx;
		left: 20rpx;
		padding: 0;
		z-index: 998;
		box-sizing: border-box;
	}

	.video-goods cover-image {
		width: 450rpx;
		height: 250rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.video-goods .icon-hide {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		color: rgba(0, 0, 0, .6);
		z-index: 999;
		width: 40rpx;
		height: 40rpx;
	}

	/*商户名称*/
	.video-info {
		position: absolute;
		bottom: 50rpx;
		color: #fff;
		font-size: 30rpx;
		left: 30rpx;
	}

	.shopname {
		font-size: 34rpx;
		font-weight: 500;
	}

	.video-info .videotitle {
		font-size: 28rpx;
		width: 500rpx;
		word-break: break-all;
		white-space: normal;
		margin-top: 5rpx;
	}


	/*迷你商品*/
	.video-item {
		position: relative;
		color: #fff;
		font-size: 35rpx;
		background: rgba(0, 0, 0, 0.6);
		padding: 10rpx 10rpx;
		margin-bottom: 10rpx;
		border-radius: 8rpx;
		z-index: 88;
		overflow: hidden;
		width: auto;
		display: inline-block;
	}

	.video-item .item-cart {
		float: left;
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.video-item .item-title {
		float: left;
		font-size: 28rpx;
		line-height: 40rpx;
		height: 40rpx;
		overflow: hidden;
		white-space: nowrap;
		word-wrap: break-word;
		max-width: 420rpx;
		overflow: hidden;
	}

	/* 以下为光盘的样式 */
	.video-disk {
		position: fixed;
		bottom: 10rpx;
		right: 10rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.video-disk .music-cover {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
		box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, .2);
		/* animation: rotate 5s linear infinite; */
		z-index: 2;
		box-sizing: border-box;
	}

	.video-disk .music-cover .music-disk {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.video-disk .music-cover .music-logo {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		position: absolute;
		opacity: 0.8;
		left: 10rpx;
		top: 10rpx;
	}

	.video-disk .note-wrap {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
	}

	.video-disk .note {
		position: absolute;
		width: 40rpx;
		height: 30rpx;
		left: -25rpx;
		bottom: 6rpx;
		opacity: 0;
		z-index: 999;
		-webkit-animation: note 1.8s linear .6s infinite;
		animation: note 1.8s linear .6s infinite;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(359deg)
		}
	}

	.video-disk .note:nth-child(2) {
		-webkit-animation: note 1.8s linear 1.2s infinite;
		animation: note 1.8s linear 1.2s infinite
	}

	.video-disk .note:nth-child(3) {
		-webkit-animation: note 1.8s linear 1.8s infinite;
		animation: note 1.8s linear 1.8s infinite
	}

	@keyframes note {
		0% {
			trnaform: translate(0, 0) rotate(0) scale(1);
			opacity: 1
		}

		50% {
			transform: translate(-24rpx, -30rpx) rotate(15deg) scale(.8);
			opacity: .8
		}

		100% {
			transform: translate(-16rpx, -60rpx) rotate(30deg) scale(.6);
			opacity: 0
		}
	}

	.cu-form-group .title {
		min-width: calc(4em + 30rpx);
	}

	.comment-popup {
		border-radius: 20rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		width: 750rpx;
		margin-bottom: 40rpx;
		font-size: 26rpx;
		.head{
			padding: 24rpx;
			text-align: center;
			border-bottom: 1rpx solid #f3f3f3;
		}
		.user-list{
		}
		.footer {
			background-color: #ffffff;
			border-top: 1rpx solid #f3f3f3;
			width: 750rpx;
			height: 55rpx;
			position: fixed;
			left: 0;
			bottom: 20rpx;
			padding: 20rpx 0;
			.search{
				width: 700rpx;
				margin: auto;
			}
		}
		.comment-box{
			display: flex;
			.comment-avatar{
			}
			.comment-content{
				width: 100%;
				.nickname{
					color: #999999;
					font-size: 26rpx;
					display: flex;
					padding: 2rpx 0;
					.reply-nickname1{
						padding-right: 10rpx;
					}
					.reply-nickname2{
						padding-left: 10rpx;
					}
				}
				.content{
					font-size: 30rpx;
				}
				.reply-box{
					font-size: 26rpx;
					color: #999999;
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					.reply{
						color: #681752;
						margin: 0 30rpx;
					}
					.like{
						display: flex;
						align-items: center;
						color: #999999;
						font-size: 26rpx;
						margin: 0 30rpx;
					}
					
				}
				.reply-item{
					margin: 24rpx 0;
					.reply-user{
						display: flex;
						align-items: center;
						padding: 2rpx 0;
					}
				}
			}
		}
	}

</style>
