<template>
	<view class="videoPlayer" @click="playClick">
		<!--  muted="true" -->
		<!-- controls -->
		<video :id="'myVideo'+index" class="videobox" :controls="false" :loop="true" :src="video.videoUrl" :autoplay="autoPlay" @play="videoPlay" :show-center-play-btn="false"
		:poster="video.videoFaceUrl">
        <!-- :poster="video.videoFaceUrl" -->
			<cover-image class="play-img" src="../../static/video-black.png" v-if="!play"></cover-image>
            <!--  @click.stop="playthis" -->
            <cover-view class="left-box">
                <!-- 商家 -->
                <cover-view class="author flex align-center" v-if="$isNull(video.serverId)">
                    <cover-image :src='video.merchantAvatar' class="header-img" v-if="!$isNull(video.merchantAvatar)"></cover-image>
                    <cover-image class="header-img" src="../../static/avatar_icon.png" v-else></cover-image>
                    <cover-view>{{video.merchantName}}</cover-view>
                </cover-view>
                <!-- 服务人员 -->
                <cover-view class="author flex align-center" v-if="!$isNull(video.serverId)">
                    <cover-image :src='video.serverAvatar' class="header-img" v-if="!$isNull(video.serverAvatar)"></cover-image>
                    <cover-image class="header-img" src="../../static/avatar_icon.png" v-else></cover-image>
                    <cover-view>{{video.serverName}}</cover-view>
                </cover-view>
                <cover-view class="title" v-if="!$isNull(video.videoDesc)">
                    {{video.videoDesc}}
                </cover-view>

                <cover-view class="flex align-center justify-center margin-top-sm" v-if="first">
                    <cover-view style="font-size:30rpx;">向上滑动查看视频</cover-view>
                    <cover-image style="width:62rpx;height:46rpx;margin-left:22rpx;" src="../../static/slide-icon.png" v-if="first"></cover-image>
                </cover-view>

            </cover-view>



			<!-- <cover-view class="title-box flex align-center padding-lg" v-if="showFullTitle" :class="portrait?'portrait-title':''">
				<view class="padding-sm" @tap.stop="exitFullScreen">
					<image src='../../static/back-icon.png' class="back-img"></image>
				</view>
				<cover-view class="title-ell flex-sub" v-if="!$isNull(video.videoDesc)">
					 {{video.videoDesc}}
				</cover-view>
			</cover-view> -->


		</video>

		<!-- <view @tap.stop="requestFullScreen" class="full-btn flex align-center justify-center" v-if="!isFullScreen">
			<image src='../../static/full-icon.png' class="full-img" @tap.stop="requestFullScreen"></image>
			<view>全屏观看</view>
		</view> -->


	</view>
</template>

<script>
var time = null
	export default {
		props:['video','index','first'],
		components: {
			
		},
		name: "videoPlayer",
		data() {
			return {
				play:false,
				autoPlay:false,
				// isFullScreen: false,
				// portrait: "",
				// showFullTitle: false,
				// dblClick: false,
			};
		},
		mounted() {
			this.$nextTick(() => {
				let idName = "myVideo"+this.index
				this.videoContext = uni.createVideoContext(idName,this)
				this.auto()
				// console.log(this.index)
				// console.log(this.videoContext,'oo')
			})
			// this.$nextTick(() => {
			// 		uni.onWindowResize(res => {
			// 			console.log('res',res)
			// 			// portrait竖屏  landscape横屏  竖屏   将状态值存储到这个this.landscape变量中 
			//          //这里获取的是变化前的上一个屏幕是竖屏还是横屏，拿不到当前屏幕状态
			// 			this.portrait = res.deviceOrientation
			// 		});	
			// 	})
			
			
		},
		methods:{
			auto(){
                let that = this;
                if(this.index === 0){
                    // that.autoPlay = true
                    setTimeout(function(){
                        console.log(that.videoContext)
                        // that.autoPlay = true 
                        that.videoContext.seek(0)
                        that.videoContext.play()
                        that.play = true
                    },500)
                    
                    
                }
			},
			// click(){
			// 	let that = this
			// 	clearTimeout(time)
			// 	that.dblClick = !that.dblClick
			// 	time = setTimeout(() => {
			// 		//300ms之内dblClick为true为单击
			// 		if (that.dblClick) {
			// 			//单击
			// 			// console.log('lklk',that.play)
			// 			if(!that.isFullScreen) {
			// 				if(that.play === false){
			// 					that.playthis()
			// 				}else{
			// 					that.pauseVideo()
			// 				}
			// 			} else {
			// 				that.showFullTitle = !that.showFullTitle
			// 				setTimeout(function(){
			// 					that.showFullTitle = false
			// 				},2000)
			// 			}
			// 		} else {
			// 			//双击
			// 			if(that.isFullScreen) {
			// 				if(that.play === false){
			// 					that.playthis()
			// 				}else{
			// 					that.pauseVideo()
			// 				}
			// 			}
			// 		}
			// 		that.dblClick = false
			// 	}, 300)
			// },
            playClick() {
                let that = this
                if(that.play === false){
                    that.playthis()
                }else{
                    that.pauseVideo()
                }
            },
			videoPlay() {
				if(this.play === false){
					// console.log('play')
					this.play = true
				}
			},
			playVideo(){
				
				if(this.play === false){
					// console.log('play')
					this.videoContext.seek(0)
					this.videoContext.play()
					this.play = true
				}
			},
			pauseVideo(){
				
				if(this.play === true){
					// console.log('pause')
					this.videoContext.pause()
					this.play = false
				}
			},
			playthis(){
				if(this.play === false){
					this.videoContext.play()
					this.play = true
				}
			},
			// requestFullScreen() {
			// 	this.videoContext.requestFullScreen();
			// 	this.isFullScreen = true
			// 	this.showFullTitle = false
			// },
			// exitFullScreen() {
			// 	this.videoContext.exitFullScreen();
			// 	this.isFullScreen = false
			// 	this.showFullTitle = false
			// }
		}
	}
</script>

<style lang="less" scoped>
	.videoPlayer {
		width: 100%;
		height: 100%;
		// padding-top: 300rpx;
		color: #fff;
	}

	.videobox {
		width: 100%;
		height: 100%;
		// position: relative;
	}
    .left-box {
        z-index: 20;
        position: fixed;
        bottom: 0;
        left: 0px;
        width: 100%;
        padding-left: 30rpx;
        padding-bottom: 50rpx;
        background: pink;
        .author {
            font-size: 30rpx;
        }
        .header-img {
            width: 54rpx;
            height: 54rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }
        .title{
            width: calc(100% - 60rpx);
            margin-top: 30rpx;
            line-height: 38rpx;
            font-size: 26rpx;
            word-break: break-all;
            word-wrap: break-word;
            white-space: pre-wrap;
        }
        
    }

	
	// .full-btn {
	// 	width: 186rpx;
	// 	height: 58rpx;
	// 	background: #000000;
	// 	border: 2rpx solid #F1F1F1;
	// 	border-radius: 29rpx;
	// 	font-size: 24rpx;
	// 	// margin-top: 50rpx;
	// 	margin-left: calc(50% - 94rpx);
	// 	.full-img {
	// 		width: 26rpx;
	// 		height: 26rpx;
	// 		margin-right: 10rpx;
	// 		display: inline-block;
	// 	}
	// }
	.play-img {
		z-index: 20;
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		top: calc(50% - 40rpx);
		left: calc(50% - 40rpx);
	}
	// .title-box {
	// 	z-index: 20;
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	padding-right: 30rpx;
	// 	background: rgba(0, 0, 0, 0.3);
	// 	padding-top: 80rpx;
	// 	.back-img {
	// 		width: 22rpx;
	// 		height: 38rpx;
	// 	}
	// 	.title-ell {
	// 		// width: calc(100% - 60rpx - 42rpx);
	// 		width: 50%;
	// 		margin: 0;

	// 		word-break: break-all;
	// 		word-wrap: break-word;
	// 		white-space: pre-wrap;
	// 	}
	// }
	// .portrait-title {
	// 	top: 0rpx !important;
	// }
</style>

