<template>
	<view style="flex: 1">
		<list
			:pagingEnabled="true"
			:show-scrollbar="false"
			@scroll="listScroll"
			@scrollend="scroll"
			:scrollable="true"
		>
			<cell
				:recycle="false"
				v-for="(item, index) in playerList"
				:key="index"
				:data-index="index"
				:style="{ height: screenHeight + 'px' }"
			>
				<video
					ref="videoDetail"
					id="videoDetail"
					:object-fit="item.width >= item.height ? 'contain' : 'fill'"
					:src="item.url"
					:controls="false"
					:enable-progress-gesture="false"
					v-if="playerCur === index"
					loop
					autoplay
					show-loading="true"
					style="width: 750rpx"
					:style="{ height: screenHeight + 'px' }"
					@click="playOrPause"
					@play="onplay"
					@error="onerror"
					@timeupdate="onTimeUpdate"
				></video>
				<image
					:lazy-load="true"
					:fade-show="false"
					v-if="!item.play"
					:src="item.firstFrameImg"
					:mode="item.width >= item.height ? 'aspectFit' : 'scaleToFill'"
					style="width: 750rpx; filter: blur(10px)"
					:style="{ height: screenHeight + 'px' }"
				></image>
				<!-- 播放按钮 -->
				<view
					v-else-if="!playStatus"
					class="abs-box"
					:style="{ height: screenHeight + 'px' }"
				>
					<image
						:fade-show="true"
						src="/static/images/playvd.png"
						class="play-btn"
					></image>
				</view>
				<!-- 进度条 -->
				<view
					v-if="playerCur === index"
					class="progress-bar"
					@touchstart="startDrag"
					@touchmove="onDragging"
					@panend="endDrag"
				>
					<view class="progress-background"></view>
					<view
						class="progress-foreground"
						:class="isDragging ? '' : 'anm'"
						:style="{ width: progressWidth + 'px' }"
					></view>
				</view>

				<!-- 浮动时间提示 -->
				<view
					class="float-time"
					v-if="isDragging"
					:style="{ left: floatLeft + 'px' }"
				>
					<text style="color: #fff">{{ formatTime(floatTime) }}</text>
				</view>

				<view class="publish-info-box">
					<view class="">
						<text class="publish-info-vloger-name">@{{ item.vlogerName }}</text>
						<text class="publish-info-content">{{ item.content }}</text>
						<view class="publish-info-music-box">
							<image
								src="/static/images/icon-fire.png"
								class="icon-fire"
							></image>
							<text class="muisc-words">{{ item.vlogerName }}的原声创作</text>
						</view>
					</view>
					<!-- <view
						class=""
						style="flex-direction: row"
					>
						<image
							src="/static/images/cd-play-4.gif"
							style="width: 150rpx; height: 150rpx; opacity: 0.8"
						></image>
					</view> -->
				</view>
				<!-- 视频展示右侧的操作按钮, 头像 - 点赞 - 评论 - 转发 -->
				<view class="operation-box">
					<view class="operation-face-box">
						<image
							:src="item.vlogerFace"
							class="user-face"
							@click="goUserInfoSeeSee(item.vlogerId)"
						></image>
					</view>
					<image
						v-if="!item.doIFollowVloger && userId != item.vlogerId"
						src="/static/images/icon-follow.png"
						@click="followMe(item.vlogerId)"
						class="follow-me"
					></image>
					<view class="like-box">
						<image
							v-if="!item.doILikeThisVlog"
							src="/static/images/icon-unlike.png"
							@click="likeOrDislikeVlog(1)"
							class="icon"
						></image>
						<image
							v-if="item.doILikeThisVlog"
							src="/static/images/icon-like.png"
							@click="likeOrDislikeVlog(0)"
							class="icon"
						></image>
						<text class="some-counts">{{ item.likeCounts }}</text>
					</view>
					<view class="comment-and-share-box">
						<image
							src="/static/images/icon-comments.png"
							@click="commentToggle"
							class="icon"
						></image>
						<text class="some-counts">{{ thisVlogTotalComentCounts }}</text>
					</view>
					<view class="comment-and-share-box">
						<image
							src="/static/images/icon-share.png"
							@click="shareToggle"
							class="icon"
						></image>
						<text class="some-counts">分享</text>
					</view>
				</view>
			</cell>
		</list>
		<!-- </uni-list> -->

		<view v-if="thisVlog != null && thisVlog != {}">
			<uni-popup
				ref="comment"
				type="comment"
			>
				<uni-popup-comments
					:thisVlogerId="thisVlogerId"
					:thisVlogId="thisVlogId"
				></uni-popup-comments>
			</uni-popup>
			<uni-popup
				ref="share"
				background-color="#fff"
				type="share"
			>
				<uni-popup-share
					:thisVlogerId="thisVlogerId"
					:thisVlogId="thisVlogId"
					:vlogUrl="thisVlog.url"
					:isPrivate="thisVlog.isPrivate"
				></uni-popup-share>
			</uni-popup>
		</view>
	</view>
</template>

<script>
let system = uni.getSystemInfoSync();
import uniPopupComments from '@/uni_modules/uni-popup/components/uni-popup-comments/uni-popup-comments.vue';
import storage from '@/utils/storage.js'; //缓存
import { graceNumber } from '@/utils/tools.js';
import api from '@/config/api.js';
import { vlogDetail, vlogLike, vlogUnLike, vlogComment, vlogFollow, vlogTotalLikedCounts } from '@/api/vlog';

export default {
	components: {
		uniPopupComments
	},
	props: {
		screenHeight: {
			default: 0
		},
		src: {
			default: false
		},
		playStatus: {
			default: false
		},
		vlogId: {
			default: false
		}
	},
	data() {
		return {
			thisVlog: {}, // 当前的短视频对象
			thisVlogId: '', // 当前的短视频主键id
			thisVlogerId: '', // 当前的短视频博主的主键id
			userId: '',

			playerCur: 0,
			page: 0,
			totalPage: 0,
			// videoList:[
			// 	{
			// width:750,//视频宽
			// height:300,//视频高
			// 		play:true, // 是否自动播放
			// 		cover:'/static/video/c1.jpg', //首帧图
			// url:'/static/video/v1.mp4', // 视频地址
			// vlogerName:'我是vlogerName', // 博主名称
			// vlogerFace: '/static/face/face-cat.png', // 博主头像
			// content:'我是content', //视频内容
			// vlogerId:123,//博主id
			// doIFollowVloger:false, //是否关注博主
			// doILikeThisVlog:false, //是否喜欢视频

			// 	}
			// ],
			playerList: this.videoList,
			thisVlogTotalComentCounts: 0,

			videoContext: {},
			currentIndex: 0,
			contentOffsetY: 0,
			times: new Date().getTime(),
			objectFit: 'fill',
			isIOS: uni.getSystemInfoSync().platform == 'ios',

			duration: 0,
			currentTime: 0,
			progressWidth: 0,
			floatTime: 0,
			floatLeft: 0,
			isDragging: false
		};
	},
	created() {
		if (!this.isIOS) {
			this.objectFit = 'cover';
		}
		let myUserInfo = storage.getVlogUserInfo() || null;
		if (myUserInfo != null) {
			this.userId = myUserInfo.id;
		}
		// 查询首页短视频列表
		this.displayVideoPaging(this.page + 1, true);
		// let videoContext = uni.createVideoContext("videoDetail");
		// this.videoContext = videoContext;
	},
	watch: {
		refreshList(value) {
			let me = this;
			let newList = value;
			if (newList != null && newList != undefined && newList.length > 0) {
				me.playerList = newList;
			}

			// 重置
			this.playerCur = 0;
			this.currentIndex = 0;
			this.contentOffsetY = 0;
		},
		playStatus: function (val) {
			let me = this;
			if (!val) {
				me.videoContext.pause();
			} else {
				me.videoContext.play();
			}
		}
	},
	methods: {
		//进度start
		formatTime(sec) {
			const m = Math.floor(sec / 60);
			const s = Math.floor(sec % 60);
			return `${m}:${s < 10 ? '0' : ''}${s}`;
		},
		onTimeUpdate(e) {
			// console.log(e);
			if (e.detail.currentTime > 0.2) {
				this.doplay(e.detail.currentTime);
			}
			if (this.isDragging) return;
			this.currentTime = e.detail.currentTime;
			this.duration = e.detail.duration;
			this.updateProgress();
		},
		updateProgress() {
			const percent = this.currentTime / this.duration;
			this.progressWidth = Math.floor(system.screenWidth * percent);
			// console.log(this.progressWidth);
		},
		startDrag(e) {
			this.isDragging = true;
		},
		onDragging(e) {
			const touchX = e.touches[0].pageX;
			const max = system.screenWidth;
			const clampedX = Math.max(0, Math.min(touchX, max));

			this.progressWidth = clampedX;
			const percent = clampedX / max;
			this.floatTime = percent * this.duration;

			// 浮动提示偏移，避免越界
			const floatBoxWidth = 60;
			this.floatLeft = Math.max(0, Math.min(clampedX - floatBoxWidth / 2, max - floatBoxWidth));
		},
		endDrag() {
			const percent = this.progressWidth / system.screenWidth;
			const seekTime = percent * this.duration;
			if (!this.duration || isNaN(seekTime)) {
				console.warn('duration 未就绪或 seekTime 非法');
				this.isDragging = false;
				return;
			}
			// 避免重复 seek
			if (Math.abs(seekTime - this.currentTime) > 0.2) {
				this.videoContext.seek(seekTime);
			}
			this.isDragging = false;
		},
		// 喜欢, 点赞的list重新设置
		reLikePlayList(vlogId) {
			let me = this;
			let playerList = me.playerList;
			for (let i = 0; i < playerList.length; i++) {
				let vlog = playerList[i];
				if (vlog.vlogId == vlogId) {
					vlog.doILikeThisVlog = true;
					playerList.splice(i, 1, vlog);
				}
			}
			me.playerList = playerList;
		},
		reDislikePlayList(vlogId) {
			let me = this;
			let playerList = me.playerList;
			for (let i = 0; i < playerList.length; i++) {
				let vlog = playerList[i];
				if (vlog.vlogId == vlogId) {
					vlog.doILikeThisVlog = false;
					playerList.splice(i, 1, vlog);
				}
			}
			me.playerList = playerList;
		},

		reChangeVlogLikedCountsInPlayList(vlogId, counts) {
			let me = this;
			let playerList = me.playerList;
			for (let i = 0; i < playerList.length; i++) {
				let vlog = playerList[i];
				if (vlog.vlogId == vlogId) {
					vlog.likeCounts = counts;
					playerList.splice(i, 1, vlog);
				}
			}
			me.playerList = playerList;
		},

		async refreshVlogCounts() {
			var me = this;
			if (me.playerList.length == 0) {
				return;
			}
			var currentIndex = me.playerCur;
			var vlog = me.playerList[currentIndex];
			var result = await vlogTotalLikedCounts(vlog.vlogId);
			if (result.data.status == 200) {
				let counts = result.data.data;
				me.reChangeVlogLikedCountsInPlayList(vlog.vlogId, counts);
			} else {
				uni.showToast({
					title: result.data.msg,
					duration: 3000,
					icon: 'none'
				});
			}
		},
		async likeOrDislikeVlog(isLike) {
			var me = this;
			var myUserInfo = storage.getVlogUserInfo() || null;
			var currentIndex = me.playerCur;
			var vlog = me.playerList[currentIndex];
			if (myUserInfo == null) {
				uni.navigateTo({
					url: '/pages/passport/login',
					animationType: 'slide-in-bottom'
				});
				return;
			}
			var userId = myUserInfo.id;

			if (isLike == 1) {
				// 点赞视频
				var result = await vlogLike({
					userId,
					vlogerId: vlog.vlogerId,
					vlogId: vlog.vlogId
				});
				if (result.data.status == 200) {
					me.reLikePlayList(vlog.vlogId);
					me.refreshVlogCounts();
				} else {
					uni.showToast({
						title: result.data.msg,
						icon: 'none',
						duration: 3000
					});
				}
			} else if (isLike == 0) {
				var result = await vlogUnLike({
					userId,
					vlogerId: vlog.vlogerId,
					vlogId: vlog.vlogId
				});
				if (result.data.status == 200) {
					me.reDislikePlayList(vlog.vlogId);
					me.refreshVlogCounts();
				} else {
					uni.showToast({
						title: result.data.msg,
						icon: 'none',
						duration: 3000
					});
				}
			}
		},
		// 关注后的list重新设置
		reFollowPlayList(vlogerId) {
			let me = this;
			let playerList = me.playerList;
			for (let i = 0; i < playerList.length; i++) {
				let vlog = playerList[i];
				if (vlog.vlogerId == vlogerId) {
					vlog.doIFollowVloger = true;
					playerList.splice(i, 1, vlog);
				}
			}
			me.playerList = playerList;
		},
		// 取关后的list重新设置
		reCancelPlayList(vlogerId) {
			let me = this;
			let playerList = me.playerList;
			for (let i = 0; i < playerList.length; i++) {
				let vlog = playerList[i];
				if (vlog.vlogerId == vlogerId) {
					vlog.doIFollowVloger = false;
					playerList.splice(i, 1, vlog);
				}
			}
			me.playerList = playerList;
		},
		// 关注博主
		async followMe(vlogerId) {
			let me = this;
			let myUserInfo = storage.getVlogUserInfo() || null;
			if (myUserInfo == null) {
				uni.navigateTo({
					url: '/pages/passport/login',
					animationType: 'slide-in-bottom'
				});

				return;
			}

			let userId = myUserInfo.id;
			var result = await vlogFollow(userId, vlogerId);
			if (result.data.status == 208) {
				me.reFollowPlayList(vlogerId);
			} else {
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
			}
		},

		goUserInfoSeeSee(userId) {
			// 是否是当前登录的用户
			let myUserId = '';
			var info = storage.getVlogUserInfo() || null;
			if (info != null) {
				myUserId = info.id;
			}
			if (myUserId == userId) {
				uni.switchTab({
					url: '/pages/me/me'
				});
			} else {
				uni.navigateTo({
					url: '/pages/me/vlogerInfo?userPageId=' + userId
				});
			}
		},
		downloadVlog() {
			var me = this;
			var currentIndex = me.playerCur;
			var vlog = me.playerList[currentIndex];
			var pendingLength = vlog.url;
		},

		onplay: function (e) {
			if (uni.getSystemInfoSync().platform == 'ios') {
				this.doplay(0.1);
			}
		},
		timeupdate: function (e) {
			if (e.detail.currentTime > 0.2) {
				this.doplay(e.detail.currentTime);
			}
		},

		playOrPause() {
			let me = this;
			let playStatus = this.playStatus;

			if (!playStatus) {
				me.videoContext.pause();
			} else {
				me.videoContext.play();
			}
			this.playStatus = !playStatus;
		},

		async displayVideoPaging(page, needClearList) {
			let me = this;
			let vlogId = me.vlogId;

			let myUserInfo = storage.getVlogUserInfo() || null;
			let userId = '';
			if (myUserInfo != null) {
				userId = myUserInfo.id;
			}

			var result = await vlogDetail(vlogId, userId);
			if (result.data.status == 200) {
				let vlog = result.data.data;
				let playerList = [];
				playerList.push(vlog);
				me.playerList = playerList;
				if (this.videoContext != null && playerList.length > 0) {
					let videoContext = uni.createVideoContext('videoDetail');
					this.videoContext = videoContext;
				}
				me.freshCommentCounts();
				me.setThisVlogInfo();
			} else {
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
			}
		},

		doplay: function (time) {
			if (time > 0) {
				this.playerList[this.playerCur].play = true;
			}
		},
		onchange: function (index) {
			if (index != this.playerCur) {
				this.playerList[this.playerCur].play = false;
				this.playerCur = index;
			}
			this.setThisVlogInfo();
		},

		// 设置当前vlog的信息
		setThisVlogInfo() {
			let me = this;
			if (me.playerList != null && me.playerList != undefined && me.playerList.length > 0) {
				let currentIndex = me.playerCur;
				let vlog = me.playerList[currentIndex];
				this.thisVlog = vlog;
				this.thisVlogId = vlog.vlogId;
				this.thisVlogerId = vlog.vlogerId;
			}
		},
		async freshCommentCounts() {
			var me = this;
			var uinfo = storage.getVlogUserInfo() || null;
			if (uinfo != null) {
				var userId = uinfo.id;
			}
			if (me.playerList == null || me.playerList == undefined || me.playerList.length == 0) {
				return;
			}
			var currentIndex = me.playerCur;
			var vlog = me.playerList[currentIndex];
			var vlogId = vlog.vlogId;
			var result = await vlogComment(vlogId);
			if (result.data.status == 200) {
				me.thisVlogTotalComentCounts = result.data.data;
			} else {
				me.thisVlogTotalComentCounts = 0;
			}
		},
		commentToggle() {
			this.$refs.comment.open();
			uni.hideTabBar({
				animation: true
			});
		},
		shareToggle() {
			this.$refs.share.open();
			uni.hideTabBar({
				animation: true
			});
		}
	}
};
</script>

<style scoped>
.progress-bar {
	height: 60rpx;
	width: 750rpx;
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;
	z-index: 99999;
}

.progress-background {
	position: absolute;
	bottom: 0;
	width: 750rpx;
	height: 2px;
	background-color: #ccc;
	z-index: 3;
}

.progress-foreground {
	z-index: 2;
	height: 2px;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
}
.anm {
	transition: width 0.25s linear;
}

.float-time {
	position: fixed;
	bottom: 2px;
	width: 60px;
	height: 30px;
	background-color: rgba(0, 0, 0, 0.3);
	color: white;
	text-align: center;
	align-items: center;
	justify-content: center;
	line-height: 30px;
	font-size: 12px;
	border-radius: 4px;
	z-index: 5;
}

.abs-box {
	width: 750rpx;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}
.play-btn {
	position: absolute;
	width: 120rpx;
	height: 120rpx;
}
.icon {
	width: 80rpx;
	height: 80rpx;
	opacity: 0.9;
}

.user-face {
	width: 100rpx;
	height: 100rpx;
	border-radius: 100rpx;
}

.play-cd {
	width: 150rpx;
	height: 150rpx;
	opacity: 0.8;
}
.refresh-info-txt {
	color: #f1f1f1;
	text-align: center;
	font-size: 12px;
}
.publish-info-box {
	position: absolute;
	bottom: 120rpx;
	left: 0;
	right: 0;
	padding-left: 20rpx;
	padding-right: 20rpx;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.publish-info-vloger-name {
	color: #ffffff;
	font-size: 40rpx;
	font-weight: 600;
	padding: 10rpx;
}
.publish-info-music-box {
	flex-direction: row;
	align-items: center;
}
.publish-info-content {
	color: #ffffff;
	font-size: 28rpx;
	font-weight: 400;
	padding: 10rpx;
	lines: 5;
	width: 520rpx;
	text-overflow: ellipsis;
}
.icon-fire {
	width: 36rpx;
	height: 36rpx;
}
.muisc-words {
	color: #ffffff;
	font-size: 28rpx;
	padding: 10rpx;
	width: 400rpx;
}
.some-counts {
	font-size: 24rpx;
	font-weight: 500;
	text-align: center;
	color: #ffffff;
	margin-top: 2rpx;
}
.operation-box {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	align-items: center;
	justify-content: center;
	padding-right: 20rpx;
}
.operation-face-box {
	border-radius: 100rpx;
	border-color: #ffffff;
	border-width: 3rpx;
}
.follow-me {
	width: 40rpx;
	height: 40rpx;
	border-radius: 10px;
	position: relative;
	top: -20rpx;
}
.like-box {
	flex-direction: column;
	align-items: center;
	margin-top: 30rpx;
}
.comment-and-share-box {
	flex-direction: column;
	align-items: center;
	margin-top: 45rpx;
}
</style>
