<template>
	<view class="">
		<view class="search-box" v-if="searchNeed">
			<input class="search-inp" type="text" v-model="keyword">
			<button class="search-btn" @click="search">搜索</button>
		</view>
		<scroll-view class="tabs-bar" :scroll-x="true">
			<view class="tabs-bar-item" v-for="(item1,index1) in tabList" :key="index1"
				:class="(current_index==index1&&cc_id=='6')?'active1': (current_index==index1?'active2':'')"
				@click="changeIndex(index1)"
				:style="cc_id=='6'?'margin-right:20px;':''">
				{{item1.name}}
			</view>
			<!-- cc_id=='6'是校园活动，生活服务的样式和校园活动一样 -->
		</scroll-view>
		<view class="tabs-content">
			<swiper class="tabs-banner" :indicator-dots="true" v-if="bannerList.length>0">
				<swiper-item v-for="(item2,index2) in bannerList" :key="index2" @click="navigatorTo(item2.link)">
					<image :src="item2.thumb" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<scroll-view class="tabs-video" :scroll-x="true">
				<view v-for="(item3,index3) in videoList" :key="index3" class="tabs-video-item">
					<view style="">
						<video @click="handleV(item3)" :src="item3.video_link" object-fit="cover"
						 :show-center-play-btn="false" :controls="false" :direction="0" :poster="item3.video_cover"></video>
						
					</view>
					<view class="video-txt">
						{{item3.title}}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<PopManager :show="videoshow" type="center">
			<view v-if="videoshow && cc_id<5" class="status_bar"></view>
			<view v-if="videoshow" style="width: 100vw;height: 100vh;position: relative;background-color: #000;">
				<video id="myvideo" :src="videolint"
					 :style="updateWH" class="myvideo" :show-play-btn="true" object-fit="cover"
				  @click.stop="videoControl" :show-fullscreen-btn="false" :autoplay="true" :direction="0"
					 @loadedmetadata="changeSize" @ended="play=false"></video>
				<view class="videoNavBar">
				 	<text class="iconfont icon-roundleftfill" style="font-size: 48upx;" @click="hideVideo"></text>
				</view>
				<view class="videoTxt">
					<view class="text-area">
						<!-- <image src="../../../static/chooseCade/BG.png" mode=""
						 style="width: 80upx;height: 80upx;background: #FFF;border-radius: 50%;overflow: hidden;"></image> -->
						{{videoTxt}}
					</view>
					<view class="dis-flex comment-wrapper">
						<button open-type="share" :id="currentVideo.id"
							style="margin: 0;background: transparent;padding: 0;line-height: normal;font-size: 13px;color: #333;height: 36rpx;"
							@click.stop="share">
							<image style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" :src="imageRootNew+'share-two.png'" mode=""></image>
							{{currentVideo.share}}
						</button>
						<view class="" @click.stop="showComment">
							<image style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" :src="imageRootNew+'fa-comment.png'" mode=""></image>
							<text v-if="currentVideo.listTotal">{{currentVideo.listTotal}}</text>
							<text v-else>0</text>
						</view>
						<view class="" @click.stop="fabulous">
							<image v-if="!currentVideo.is_like" style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" :src="imageRootNew+'appreciate-grey.png'" mode=""></image>
							<image v-else style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" :src="imageRootNew+'appreciate-red.png'" mode=""></image>
							{{currentVideo.likenum||0}}
						</view>
					</view>
				</view>
			</view>
		</PopManager>
		<!-- 评论区弹窗 -->
		<view class="comment-area" :class="commentShow?'commentShow':''">
			<view style="text-align: center;line-height: 40px;">
				共{{currentVideo.listTotal}}条评论
				<text style="float: right;font-size: 20px;margin-right: 20upx;" @click="hideComment">×</text>
			</view>
			<scroll-view scroll-y="true" class="comment-a-list">
				<view v-if="currentVideo.CommentList&&currentVideo.CommentList.length>0">
					<view v-for="(item1,index1) in currentVideo.CommentList" :key="index1" class="comment-item">
						<view style="width: 100%;"><text>{{item1.content}}</text></view>
						<view style="font-size: 11px;color: #999;margin-right: 20upx;">{{item1.createtime}}</view>
						<view class="reply" @click="editReply(index1)">回复</view>
						
						<view class="comment-item-child" v-if="item1.childCommentList" v-for="(item2,index2) in item1.childCommentList" :key="index2">
							<view style="width: 100%;"><text>{{item2.content}}</text></view>
							<view style="font-size: 11px;color: #999;margin-right: 20upx;">{{item2.createtime}}</view>
							<view class="reply" @click="editReply(index1, index2)">回复</view>
						</view>
						<view style="width: 100%;font-size: 12px;margin-top: 10upx;color: #666;" v-if="item1.is_query" @click="getChildCommentList(index1, item1.id)">
							<text v-if="item1.comment_twoPage==1">---展开回复</text><text v-else-if="item1.comment_twoPage>0">---更多回复</text>
						</view>
					</view>
				</view>
				<view class="" v-else style="text-align: center;">
					暂无评论
				</view>
				
				<view class="" v-if="currentVideo.CommentList.length!=currentVideo.listTotal"
					style="text-align: center;margin: 10px 0px;color: #666;" @click="showMoreComment">
					展开更多评论
				</view>
			</scroll-view>
			<view class="comment-a-b">
				<textarea v-model="editComment" :placeholder="placeholderText" class="comment-a-b-inp" placeholder-class="comment-a-b-inp-p"
				 :fixed="true" :auto-height="true" :adjust-position="false" />
				<view class="comment-a-b-btn" @click="submitComment">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import PopManager from '@/components/template/PopManager';
	export default{
		data(){
			return {
				keyword: '',
				current_index: 0,
				tabList: [],
				child_id: 0,
				bannerList: [],
				videoList: [],
				videoshow: false,
				videolint: '',
				videoTxt: '',
				currentVideo: {
					listTotal: 0,
					CommentList: []
				},
				commentShow: false,
				currentVideoW: '',
				currentVideoH: '',
				play: true,
				editComment: '',
				pid: '',// 当前要回复的评论的id
				oneid: '',// 当前要回复的评论的一级评论id
				placeholderText: '输入评论',
				comment_onePage: 1,
			}
		},
		components: {
			PopManager
		},
		props: {
			pageType: {
				type: Number | String,
				default: ''
			},
			cc_id: {
				// 1~4是商品，7~9是招聘就业，6校园活动
				type: Number | String,
				default: 0
			},
			searchNeed: {
				type: Boolean,
				default: false
			}
		},
		computed:{
			updateWH(){
				if(this.currentVideoW>this.currentVideoH){
					// console.log({ width:'100vw', height: `calc(${this.currentVideoH} / ${this.currentVideoW} * 100vw)` });
					return `width:100vw; height: calc(${this.currentVideoH} / ${this.currentVideoW} * 100vw);top: 50%;transform: translateY(-50%);`;
				}
				if(this.currentVideoW<this.currentVideoH){
					// console.log({ height:'100vh', width: `calc(${this.currentVideoW} / ${this.currentVideoH} * 100vh)` });
					// return `height:calc(100vh - 140rpx); width: calc(${this.currentVideoW} / ${this.currentVideoH} * (100vh - 140rpx))`;
					return `height:calc(100vh - 140rpx); width: 100vw`;
				}
			},
		},
		created() {
			this.getTabData();
		},
		mounted() {
			// 页面初次渲染！  createVideoContext uni video自带 上下文 如果不懂可以去百度
			this.videoContext = uni.createVideoContext('myvideo', this);
			// this.videoContext.requestFullScreen();
		},
		methods: {
			getTabData(){
				App._post_form(
					`&p=cultivateClass&do=getCultivateClassChildList`,
					{cc_id: this.cc_id},
					res => {
						if(res.data.length>0){
							this.tabList = res.data;
							console.log(res.data);
							this.child_id = res.data[0].id;
							this.getInfoData();
							this.$emit('changeChildType',this.child_id);
						}
					},
					false,
					() => {
						// this.loadlogo = true;
					}
				);
			},
			getInfoData(){
				App._post_form(
					`&p=cultivateClass&do=getCultivateClassInfo`,
					{cc_id: this.child_id},
					res => {
						this.bannerList = res.data.advs;
						this.videoList = res.data.video;
						// this.videoList = [...res.data.video, ...res.data.video, ...res.data.video, ...res.data.video];
					},
					false,
					() => {
						// this.loadlogo = true;
					}
				);
			},
			changeIndex(i){
				this.current_index = i;
				this.child_id = this.tabList[i].id;
				this.getInfoData();
				this.keyword = '';
				this.$emit('changeChildType',this.child_id);
			},
			navigatorTo(link){
				console.log(23232)
				uni.navigateTo({
					url:'/'+link
				})
			},
			// 重置当前视频资源和视频评论
			handleV(content){
				console.log(111, content);
				this.videoshow = true;
				this.videolint = content.video_link;
				this.videoTxt = content.title;
				this.currentVideo = {...content, CommentList: [], listTotal: 0,};
				// this.videoContext.requestFullScreen({
				// 	direction:0
				// })
				
				this.play = true;
				this.editComment = '';
				this.oneid = "";
				this.pid = '';
				this.comment_onePage = 1;
				this.placeholderText = '输入评论';
				// 获取视频评论
				let data = {
					video_id: this.currentVideo.id,
					oneid: '',//当前评论的id（注：打开二级评论时 必传）
					pindex: this.comment_onePage,
					psize: 10
				}
				this.getVideoComment(data);
			},
			// 获取一级评论
			getVideoComment(data){
				App._post_form(
					`&p=cultivateClass&do=getVideoComment`,
					data,
					res => {
						console.log(res);
						if(this.comment_onePage===1){
							for(let item of res.data.list){
								this.currentVideo.CommentList.push({
									...item,
									comment_twoPage: 1//二级评论的页数
								})
							}
							this.currentVideo.listTotal = res.data.total;
						}else{
							for(let item of res.data.list){
								this.currentVideo.CommentList.push({
									...item,
									comment_twoPage: 1//二级评论的页数
								})
							}
							this.currentVideo.listTotal = res.data.total;
						}
						this.comment_onePage++;
					},
					false,
					() => {
						// this.loadlogo = true;
					}
				);
			},
			// 展开更多评论
			showMoreComment(){
				let data = {
					video_id: this.currentVideo.id,
					oneid: '',//当前评论的id（注：打开二级评论时 必传）
					pindex: this.comment_onePage,
					psize: 10
				}
				this.getVideoComment(data);
			},
			// 获取更多回复/展开回复/更多回复
			getChildCommentList(indexA, id){
				let data = {
					video_id: this.currentVideo.id,
					oneid: id,//当前评论的id（注：打开二级评论时 必传）
					pindex: this.currentVideo.CommentList[indexA].comment_twoPage,
					psize: 10
				};
				App._post_form(
					`&p=cultivateClass&do=getVideoComment`,
					data,
					res => {
						console.log(res);
						if(res.data.list.length>0){
							
						}
						if(this.currentVideo.CommentList[indexA].comment_twoPage === 1){
							this.currentVideo.CommentList[indexA].childCommentList = res.data.list;
						}else{
							this.currentVideo.CommentList[indexA].childCommentList = [...this.currentVideo.CommentList[indexA].childCommentList, ...res.data.list];
						}
						if(res.data.total == this.currentVideo.CommentList[indexA].childCommentList.length){
							this.currentVideo.CommentList[indexA].comment_twoPage = 0;
						}else{
							this.currentVideo.CommentList[indexA].comment_twoPage++;
						}
						console.log(this.currentVideo.CommentList[indexA].comment_twoPage, '当前评论comment_twoPage');
					},
					false,
					() => {
						// this.loadlogo = true;
					}
				);
			},
			showComment(){
				this.commentShow=true;
			},
			hideComment(){
				this.commentShow=false;
				this.editComment = "";
				this.oneid = "";
				this.pid = '';
				this.placeholderText = '输入评论';
			},
			hideVideo(){
				this.videoshow = false;
				this.hideComment();
			},
			videoControl(e){
				console.log(e);
				if(this.play){
					this.play = false;
					this.videoContext.pause();
				}else{
					this.play = true;
					this.videoContext.play();
				}
			},
			search(){
				this.$emit('search', this.keyword)
			},
			share(){
				App._post_form(
					`&p=cultivateClass&do=shareNum`,
					{id: this.currentVideo.id},
					res => {
						this.currentVideo.share++;
					},
					false,
					() => {
						// this.loadlogo = true;
					}
				);
			},
			fabulous(item){
				App._post_form(
					`&p=cultivateClass&do=fabulous`,
					{id: this.currentVideo.id},
					res => {
						this.currentVideo.is_like = !this.currentVideo.is_like;
						this.videoList.map(item=>{
							if(item.id == this.currentVideo.id){
								item.is_like = this.currentVideo.is_like;
								if(item.is_like){
									item.likenum ++;
									uni.showToast({
										title:'点赞成功',
										icon:'none'
									})
								}else{
									item.likenum --;
									uni.showToast({
										title:'取消点赞',
										icon:'none'
									})
								}
							}
						})
					},
					false,
					() => {
						// this.loadlogo = true;
					}
				);
			},
			submitComment(){
				let _this = this;
				let data = {
					video_id: this.currentVideo.id,
					text: this.editComment,
					pid: this.pid,
					oneid: this.oneid
				}
				App._post_form(
					`&p=cultivateClass&do=comment`,
					data,
					res => {
						uni.showToast({
							title:'评论成功',
							icon:'none'
						})
						
						// 获取视频评论
						let data1 = {
							video_id: _this.currentVideo.id,
							oneid: '',//当前评论的id（注：打开二级评论时 必传）
							pindex: 1,
							psize: 10
						}
						_this.comment_onePage = 1;
						
						//评论要审核的，请求了也不一定能显示
						// _this.getVideoComment(data1);
						//评论要审核的，手动插入页面不对
						// if(_this.placeholderText == '输入评论'){
						// 	this.currentVideo.CommentList.unshift();
						// 	this.currentVideo.listTotal++;
						// }
						
						//评论要审核的，请求了也不一定能显示
						// if(_this.placeholderText == '回复评论'){
						// 	let indexA;
						// 	for(let i = 0;i<_this.currentVideo.CommentList.length;i++){
						// 		if(_this.currentVideo.CommentList[i].id==_this.oneid){
						// 			indexA = i;
						// 		}
						// 	}
						// 	_this.currentVideo.CommentList[indexA].comment_twoPage = 1;
						// 	_this.getChildCommentList(indexA, _this.oneid)
						// }
						
						_this.editComment = "";
						_this.oneid = "";
						_this.pid = '';
						_this.placeholderText = '输入评论';
					},
					false,
					() => {
						// this.loadlogo = true;
					}
				);
			},
			// 点击回复
			editReply(index1, index2){
				console.log(index1, index2);
				this.oneid = this.currentVideo.CommentList[index1].id;
				if(index2){
					this.pid = this.currentVideo.CommentList[index1].childCommentList[index2].id;
				}else{
					this.pid = this.currentVideo.CommentList[index1].id;
				}
				this.placeholderText = '回复评论'
				console.log(this.pid,'this.pid，当前要回复的评论的id');
				console.log(this.oneid,'this.oneid，当前要回复的评论的一级评论id');
				
				// this.placeholderText = '输入评论';
			},
			changeSize(e){
				// console.log(e.detail.width, e.detail.height, '视频尺寸');
				this.currentVideoW = e.detail.width;
				this.currentVideoH = e.detail.height;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.search-box{
		width: 700upx;
		height: 34px;
		margin: 10px auto;
		border: 1px solid #509DFD;
		border-radius: 30px;
		background-color: #fff;
		display: flex;
		align-items: center;
		.search-inp{
			flex-grow: 1;
			padding: 0px 10px 0px 20px;
			font-size: 14px;
		}
		.search-btn{
			width: 120upx;
			height: 30px;
			background-color: #509DFD;
			border-radius: 15px;
			color: #fff;
			font-size: 12px;
			padding: 0px;
			margin-right: 2px;
		}
	}
	.tabs-bar{
		width: 100%;
		height: 40px;
		padding: 0px 10upx;
		box-sizing: border-box;
		white-space: nowrap;
		
		::-webkit-scrollbar{
			display: none;
		}
		
		.tabs-bar-item{
			display: inline-block;
			line-height: 20px;
			padding: 10px;
			font-size: 14px;
			color: #666;
			&.active1{
				color: #333;
				font-size: 18px;
				position: relative;
			}
			&.active1::after{
				content: '';
				width: 26px;
				height: 4px;
				position: absolute;
				bottom: 0px;
				left: 50%;
				transform: translateX(-50%);
				background-color: #509DFD;
				border-radius: 2px;
			}
			&.active2{
				font-weight: bold;
				color: #333;
				position: relative;
			}
			&.active2::after{
				content: '';
				width: 20px;
				height: 3px;
				position: absolute;
				bottom: 0px;
				left: 50%;
				transform: translateX(-50%);
				background-color: #f00;
			}
		}
	}
	.tabs-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		
		.tabs-banner{
			width: 100%;
			height: 300upx;
			border-radius: 20upx;
			transform: translate3d(0, 0, 0);
			overflow: hidden;
			background-color: #fff;
			margin-bottom: 40upx;
			
			image{
				width:100%;
			}
		}
		.tabs-video{
			width: 100%;
			white-space: nowrap;
			
			::-webkit-scrollbar{
				display: none;
			}
			
			.tabs-video-item{
				width: 200upx;
				display: inline-block;
				margin-right: 20upx;
			}
			video{
				width: 200upx;
				height: 300upx;
				border-radius: 20upx;
				overflow: hidden;
			}
			.video-txt{
				width: 100%;
				font-size: 14px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
	.status_bar{
		height: calc(var(--status-bar-height) * 2);
		width: 100%;
		background-color: #000;
	}
	.videoNavBar{
		width: 100vw;
		position: absolute;
		left: 0upx;
		// top: calc(var(--status-bar-height) * 2);
		// 保留校园活动导航头的写法↑
		top: 0px;
		z-index: 1;
		color: #999;
		padding: 16upx 30upx 16upx;
	}
	.myvideo{
		position: absolute;
	}
	.videoTxt{
		width: 100vw;
		position: absolute;
		left: 0upx;
		bottom: 0;
		z-index: 1;
		font-size: 28upx;
		padding: 20upx 0upx 80upx;
		box-sizing: border-box;
		color: #ddd;
		// background-color: rgba(255,255,255,0.1);
		white-space: break-spaces;
		
		.text-area{
			padding: 70px 30upx 70upx;
			background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.4));
		}
		.comment-wrapper{
			height: 25px;
			margin: 5px auto 0px;
			justify-content: space-between;
			font-size: 13px;
			color: #333;
			padding: 0px 30upx;
		}
	}
	.comment-area{
		position: fixed;z-index: 1000;
		// bottom: 0px;
		bottom: -60vh;
		width: 100vw;height: 60vh;left: 0px;
		background-color: #FFF;
		border-radius: 10px 10px 0px 0px;
		display: flex;flex-direction: column;
    justify-content: start;
		transition: 0.5s;
		
		&.commentShow{
			bottom: 0px;
			transition: 0.5s;
			
			.comment-a-b{
				bottom: 0px;
				transition: 0.5s;
			}
		}
		
		.comment-a-list{
			font-size: 14px;
			margin: 10px auto;
			height: calc(60vh - 120px);
			
			.comment-item{
				display: flex;
				// justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				padding: 10upx 30upx;
				
				.comment-item-child{
					// width: 80vw;
					margin-left: 30px;
					display: flex;
					align-items: center;
					padding: 10rpx 0px;
					flex-wrap: wrap;
				}
				.reply{
					padding: 4rpx 10rpx;
					border-radius: 30px;
					font-size: 11px;
					background: #ececec;
				}
			}
		}
		.comment-a-b{
			position: fixed;z-index: 1001;
			left: 0px;
			transition: 0.5s;bottom: -60vh;
			width: 100vw;min-height: 40px;
			padding-bottom: 20px;
			display: flex;
			align-items: flex-end;
			background-color: #FFF;
			
			.comment-a-b-inp{
				flex: 1;
				padding: 10rpx 20rpx;
				margin: 0rpx 30rpx;
				background: #ececec;
				border-radius: 15px;
				font-size: 14px;
				// line-height: 30px;
			}
			/deep/.comment-a-b-inp-p{
				color: #ccc;
			}
			.comment-a-b-btn{
				width: 60px;
				height: 30px;
				line-height: 30px;
				border-radius: 30px;
				background: #ccc;
				text-align: center;
				margin-right: 30rpx;
			}
		}
	}
</style>