<template>
	<view style="display: flex;">
		<view class="left_area">
			<image :src="itemInfos.avatar" mode="" class="avatar" @click.stop="goHome"></image>
		</view>
		<view class="right_area">
			<view class="text-wrapper">
				<view class="dis-flex" style="justify-content: space-between;">
					<!-- <image :src="itemInfos.avatar" mode="" class="avatar" @click.stop="goHome"></image> -->
					<view style="flex: 1;line-height: 18px;">
						<view class="name"><text>{{itemInfos.nickname}}</text><text class="label" v-if="itemInfos.idType">{{itemInfos.idType}}</text></view>
						<view style="color: #999999;font-size: 12px;">{{itemInfos.createtime+' '}}<text v-if="itemInfos.addr">{{itemInfos.addr}}</text></view>
					</view>
					<view class="btn" v-if="itemInfos.mid!=='0' && !itemInfos.is_interest && !itemInfos.is_it_mine" @click.stop="interest">+关注</view>
					<view class="btn2" v-if="itemInfos.is_interest && !itemInfos.is_it_mine" @click.stop="interestCancel">取消关注</view>
				</view>
				<view style="margin: 5px 0;font-size: 14px;color: #333;">
					<view style="color: #ffd900;line-height: 20px;">
						<text v-if="itemInfos.onetype">#{{itemInfos.onetype}}#</text>
						<text v-if="itemInfos.one_name">{{' '+'#'+itemInfos.one_name}}#</text>
						<text v-if="itemInfos.share_title">{{' '+'#'+itemInfos.share_title}}#</text>
					</view>
					<view class="text-main" :class="showAllText===2?'show_all':''">
						<text class="main">{{ itemInfos.content }}</text>
						<text class="all" v-if="showAllText===1" @click.stop="changeShowAll(2)">全文</text>
						<text class="all" v-if="showAllText===2" @click.stop="changeShowAll(1)">收起</text>
					</view>
				</view>
			</view>
			<view class="dis-flex img-wrapper" v-if="!itemInfos.video_link">
				<view v-for="(item,index) in itemInfos.img" :key="index" class="img-item">
					<image :src="item" mode="aspectFill" @click.stop="imgPre(index,itemInfos.img)"></image>
				</view>
				<view style="width: 25vw;"></view>
				<view style="width: 25vw;"></view>
			</view>
			<view class="dis-flex video-wrapper" v-if="!!itemInfos.video_link&&itemInfos.img.length==0"
			 style="position: relative;">
				<!-- <image v-if="showPoster" class="videoPlay" :src="itemInfos.video_img_link" mode="aspectFill" @click.stop="changeShowPoster"></image> -->
				<!-- 借video播放按钮,替换人工封面 -->
				<!-- <video v-if="showPoster" object-fit="cover" :src="itemInfos.video_link" @click.stop="changeShowPoster"
				 class="videoPlay" :poster='itemInfos.video_img_link'></video>
				<video v-else object-fit="contain" id="myvideo" autoplay :src="itemInfos.video_link" @click.stop=""
				 class="videoPlay"></video> -->
				
				<video object-fit="contain" :id="'myvideo'+index" :src="itemInfos.video_link" @click.stop=""
				 class="videoPlay" :poster='itemInfos.video_img_link' @loadedmetadata="changeSize" 
				 :style="{width:videoWidth, height: videoHeight}" @play="stopOther()"></video>
				<!-- 一版视频和封面一致的 -->
				 
				<!-- <view class="videoPlay" style="position: absolute;left: calc(46vw - 315rpx);top: 0;"
				 @click.stop="playing(itemInfos.video_link)">
				</view> 旧版的点击立即全屏播放 -->
			</view>
			<view class="dis-flex comment-wrapper" style="font-size: 12px;height: auto;color: #999;" v-if="itemInfos.address_info">
				<text class="iconfont icon-daohang1"></text>
				<text style="flex:1;">{{itemInfos.address_info}}</text>
			</view>
			<view class="dis-flex comment-wrapper">
				<button open-type="share" :id="itemInfos.id"
				 style="margin: 0;background: transparent;padding: 0;line-height: normal;font-size: 13px;" @click.stop="share">
					<image style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/share-two.png" mode=""></image>
					{{itemInfos.share}}
				</button>
				<view class="" @click.stop="commentShow=true">
					<image style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/fa-comment.png" mode=""></image>
					<text v-if="itemInfos.comment_list.total">{{itemInfos.comment_list.total}}</text>
					<text v-else>0</text>
				</view>
				<view class="" @click.stop="fabulous">
					<image v-if="!itemInfos.is_fabulous" style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/appreciate-grey.png" mode=""></image>
					<image v-else style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/appreciate-red.png" mode=""></image>
					{{itemInfos.fabulous_num}}
				</view>
			</view>
		</view>
		
		<!-- 评论弹窗 -->
		<view style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 9;
		background-color: rgba(0,0,0,.3);" v-if="commentShow" @click.stop="commentShow=false"></view>
		<view class="reply-wrapper" v-if="commentShow">
			<textarea @click.stop class="my-text" v-model="text" name="" id="" cols="30" rows="10" placeholder="评论"></textarea>
			<button type="primary" style="margin: 20rpx 80rpx;border-radius: 50px;" @click.stop="submit">发送</button>
		</view>
		<!-- 全屏视频 -->
		<!-- <PopManager :show="videoshow" @clickmask="videoshow = false" type="center">
			<view v-if="videoshow" class="videoshow">
				<video id="myvideo" :src="videolint" @fullscreenchange="videoControl"  style="width: 100%;height: 100%;"
				 :poster='itemInfos.video_img_link' @click.stop="" :show-fullscreen-btn="false" autoplay ></video>
				 <view  style="position: absolute;left: 30upx;top: 80upx;color: #ffffff;padding: 10upx 20upx;border-radius: 60upx;background-color: rgba(255,255,255,0.3);" @click.stop="videoshow = false">
				 	<text class="iconfont icon-roundleftfill" style="font-size: 36upx;"></text>
					<text class="f-36">返回</text>
				 </view>
			</view>
		</PopManager> 旧版的点击立即全屏播放-->
	</view>
</template>

<script>
import PopManager from '@/components/template/PopManager';
import App from '@/common/js/app.js';
export default {
	name: 'picText',
	data() {
		return {
			itemInfos: {},
			commentShow: false,
			text: '',
			videoshow: false,
			videolint: '',
			showAllText: 0,
			showPoster: true,
			videoWidth: '0px',
			videoHeight: '0px',
			listVideoHeight: '40vw',
			detailVideoHeight: '60vw',
			videoContext: '',
			query: ''
		}
	},
	components:{
		PopManager
	},
	props:{
		info:{
			type: Object,
			require: true
		},
		isDetail: {
			type: Boolean,
			default: false
		},
		index: {// 当前帖子在列表中的索引
			type: Number | String
		},
		currentPlay: {// 当前播放的视频在列表中的索引
			type: Number | String
		},
		stopVideo: {
			type: Number
		},
	},
	watch: {
		info: {
			handler(newVal, oldVal){
				this.itemInfos = newVal;
				if(this.itemInfos.content.length > 44){
					this.showAllText = 1;
				}
			},
			deep: true,
			immediate: true
		},
		stopVideo: {
			handler(newVal, oldVal){
				if(!!this.itemInfos.video_link){
					// this.videoContext.stop();
					
					if(this.index!==this.currentPlay){
						// 正在播放其他视频
						this.videoContext.stop();
					}else{
						// 滚动页面
						this.query.select('.video-wrapper').boundingClientRect(data=>{
							if(data){
								console.log(data.top,'视频在屏幕的高度');
								if(this.isDetail && (data.top==0 || data.top<0) && this.index==this.currentPlay){// 详情页
									console.log('视频暂停');
									this.videoContext.stop();
								}else if(!this.isDetail && (data.top==90 || data.top<90) && this.index==this.currentPlay){// 首页
									console.log('视频暂停');
									this.videoContext.stop();
								}
							}
						}).exec();
					}
				}
			}
		}
	},
	methods: {
		imgPre(index, imgs){
			uni.previewImage({
				current: imgs[index],
				urls: imgs,
				fail(err) {
					console.log(111, err)
				}
			});
		},
		share(){
			
		},
		// 提交评论
		submit(){
			let _this = this, 
			data = {
				text: _this.text,
				id: _this.itemInfos.id
			};
			App._post_form('&p=pocket&do=comment', data, res => {
				_this.commentShow = false;
			
				App.showSuccess('评论成功', () => {
					// _this.isComment = false;
				})
				if(_this.itemInfos.comment_total){// 图文详情页需要展示评论
					let plPush = {
						nickname: uni.getStorageSync('userinfo').nickname,
						mid:res.data.amid,
						id:res.data.cid,
						content: _this.text,
						list:[],
						avatar: uni.getStorageSync('userinfo').avatar,
						createtime: _this.getTimeData(new Date().getTime())
					};
					_this.$emit('addComment', plPush)
				}
			
				_this.text = '';
			},fail=>{
				// _this.isComment = false;
				// if (fail.data.message == '未绑定手机号') {
				// 	//#ifdef H5
				// 	_this.popShow = true;
				// 	//#endif
				// 	//#ifndef H5
				// 	_this.vxshow = true;
				// 	//#endif
					
				// }
			});
		},
		// 点赞
		fabulous() {
			let _this = this;
			let data = {
				id: _this.itemInfos.id
			};
			App._post_form('&p=pocket&do=fabulous', data, res => {
				if (_this.itemInfos.is_fabulous == 1) {
					uni.showToast({
						icon: 'none',
						title: '取消点赞',
						duration: 2000
					});
					_this.itemInfos.is_fabulous = 0;
					_this.itemInfos.fabulous_num--;
				} else {
					uni.showToast({
						icon: 'none',
						title: '点赞成功',
						duration: 2000
					});
					_this.itemInfos.is_fabulous = 1;
					_this.itemInfos.fabulous_num++;
				}
			});
		},
		goHome(){
			if (this.itemInfos.mid > 0) {
				App.navigationTo({
					url: 'pages/subPages/homepage/homepage/homepage?mid=' + this.itemInfos.mid + '&checkType=' + 1
				});
			}
		},
		videoControl(e){
			console.log(e)
			if(e.detail.fullScreen){  //e.detail.fullScreen是否为全屏
				this.videoContext.play();
			}else{
				//停止播放
				// this.videoContext.stop();   各位老板不要选择stop 选择了stop 缩小视频还会自动播放
				this.videoContext.pause();
			}
		},
		playing(lint) {
			this.videoshow = true;
			this.videolint = lint;
			// 获取当前视频id
			// let currentId = e.currentTarget.dataset.id
			// uni.createVideoContext获取视频上下文对象
			this.videoContext.requestFullScreen({
				direction:0
			})    
		},
		interest(){
			let data = {
				interest_mid: this.itemInfos.mid
			};
			App._post_form('&p=member&do=addInterestMember', data, res => {
				uni.showToast({
					title: res.message
				})
				this.itemInfos.is_interest = true;
			})
		},
		interestCancel(){
			let data = {
				interest_mid: this.itemInfos.mid
			};
			App._post_form('&p=member&do=cancelInterestMember', data, res => {
				uni.showToast({
					title: res.message
				})
				this.itemInfos.is_interest = false;
			})
		},
		// 时间戳转年月日时分
		getTimeData(dataValue) {
			let date = new Date(dataValue) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			let Y = date.getFullYear() + '-'
			let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
			let D = date.getDate() + ' '
			let h = date.getHours() + ':'
			let m = date.getMinutes()
			let s = date.getSeconds()
			return Y + M + D + h + m;
		},
		changeShowAll(type){
			if(this.showAllText == type) return;
			this.showAllText = type;
		},
		changeShowPoster(){
			this.showPoster = false;
			// this.playing(this.itemInfos.video_link);
			// this.videoContext.play();
		},
		changeSize(e){
			console.log(e.detail.width, e.detail.height, e.detail.duration);
			if(e.detail.width > e.detail.height){
				this.videoWidth = '77vw';
				this.videoHeight = e.detail.height/e.detail.width*77+'vw';
				// console.log(this.videoWidth, this.videoHeight)
			}else if(e.detail.width < e.detail.height){
				if(this.isDetail){
					this.videoHeight = this.detailVideoHeight;
					this.videoWidth = e.detail.width/e.detail.height*60+'vw';
				}else{
					this.videoHeight = this.listVideoHeight;
					this.videoWidth = e.detail.width/e.detail.height*40+'vw';
				}
				// console.log(this.videoWidth, this.videoHeight)
			}
		},
		stopOther(){
			this.$emit('changePlay', this.index);
		}
	},
	onReady(){
		// 页面初次渲染！  createVideoContext uni video自带 上下文 如果不懂可以去百度
		this.videoContext = wx.createVideoContext('myvideo'+this.index, this);
		// console.log(this.videoContext)
		// this.videoContext.requestFullScreen();
		this.query = uni.createSelectorQuery().in(this);
	},
}
</script>

<style lang="scss" scoped>
.dis-flex{
	display: flex;
	align-items: center;
}
.left_area{
	width: 15vw;
	.avatar{
		width: 40px;
		height: 40px;
		background: #d1d1d1;
		border-radius: 50%;
		margin: 8px calc(7.5vw - 20px);
	}
}
.right_area{
	
}
.text-wrapper{
	width: 77vw;
	padding-top: 5px;
	margin: 5px auto;
	.avatar{
		width: 40px;
		height: 40px;
		background: #d1d1d1;
		border-radius: 50%;
		margin-right: 8px;
	}
	.name{
		font-size: 14px;
		font-weight: bold;
	}
	.label{
		display: inline-block;
		padding: 2px 8px;
		background-color: #ffeaf1;
		border-radius: 5px;
		font-size: 13px;
		color: #ff0f43;
		font-weight: normal;
		line-height: 16px;
		margin-left: 7px;
	}
	.btn{
		width: 56px;
		line-height: 26px;
		border-radius: 18px;
		color: #ff0f43;
		background-color: #ffeaf1;
		border: 1px solid #ff0f43;
		text-align: center;
		font-size: 12px;
	}
	.btn2{
		width: 72px;
		line-height: 26px;
		border-radius: 18px;
		color: #ff0f43;
		background-color: #ffffff;
		border: 1px solid #ff0f43;
		text-align: center;
		font-size: 12px;
	}
	.text-main{
		max-height: 72px;
		line-height: 22px;
		overflow: hidden;
		
		.main{
			width: 100%;
			display: -webkit-box;//将盒子转换为弹性盒子
			-webkit-box-orient: vertical;//文本显示方式，默认水平
			-webkit-line-clamp: 2;//设置显示多少行
			overflow: hidden;
		}
		.all{
			color: #69aee2;
			margin-left: 5rpx;
		}
	}
	.text-main.show_all{
		max-height: none;
		
		.main{
			display: inline-block;
		}
	}
}

.img-wrapper{
	justify-content: space-between;
	flex-wrap: wrap;
	width: 77vw;
	margin: 6px auto 5px;
	.img-item{
		width: 25vw;
		height: 25vw;
		margin-bottom: 1vw;
		border-radius: 5px;
		overflow: hidden;
	}
	image{
		width: 100%;
		height: 100%;
		background-color: #d1d1d1;
	}
	.videoPlay {
		// width: 630upx;
		// height: 450upx;
	}
}
.video-wrapper{
	justify-content: flex-start;
	width: 77vw;
	margin: 6px auto 5px;
}
.comment-wrapper{
	width: 77vw;
	height: 25px;
	margin: 0 auto 6px;
	justify-content: space-between;
	font-size: 13px;
	color: #333;
}
.reply-wrapper{
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 9;
	width: 560rpx;
	height: 430rpx;
	background-color: #fff;
	border-radius: 20px;
	transform: translate(-50%, -50%);
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,.05);
	
	.my-text{
		padding: 50rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
	}
}

.videoshow{
	width: 100vw;
	height: 100vh;
	position: relative;
}
</style>
