<template>
	<view class="content">
		<view class="videoList">
            <z-paging  ref="paging" v-model="list" @query="queryList" :default-page-size="params.pageSize" :hide-empty-view="true" v-if="!nothing" use-page-scroll>
                <view v-for="(video) in list" :key="video.videoId" style="background: #FFFFFF; border-radius:10px;padding-bottom:32rpx;"
                class="box padding-lr margin-bottom-sm" @tap="toEdit(video.videoId)">
                    <view class="flex align-center justify-between" style="padding-top: 36rpx;">
                        <view class="flex align-center font-34">
                            <text style="font-weight: bold;">视频类型</text>
                            <text style="padding-left: 26rpx;padding-top: 4rpx;color: #ff4f20;">{{video.parentCategoryName}}</text>
                        </view>
                        <view style="padding: 20rpx 0rpx 20rpx 20rpx;" @tap.stop="showModal(video.videoId)">
                            <u-icon name="trash" color="#999999" size="32rpx"></u-icon>
                        </view>
                    </view>

                    <view style="padding-top: 10rpx;" class="flex align-center font-34">
                        <text style="font-weight: bold;">上传时间</text>
                        <text style="padding-left: 26rpx;color: #999999;">{{$timefilter('YY-MM-DD',video.createTime).replace(/-/g, ".")}}</text>
                    </view>

                    <view style="font-weight: bold;" class="font-34 padding-top-sm">
                        视频介绍
                    </view>

                    <view style="color: #999999; font-weight: 400; line-height: 20px;padding-top:10rpx;" class="break-word font-30">{{video.videoDesc}}</view>

                    <view class="videobox">
                        <video class="videoitem" :id="'myVideo'+video.videoId" :show-center-play-btn="false" :controls="(video.isPlay||video.fullScreen)"
                            :src="video.videoUrl" @play="playing" @ended="playEnding($event,video)" @fullscreenchange="fullscreenchange($event,video)" @loadedmetadata="loadedmetadata($event,video)">

                            <cover-image class="play-img" src="../../static/video/video-black.png" v-if="!video.isPlay" @tap.stop="playClick('myVideo'+video.videoId)"></cover-image>
                            <!-- <cover-image class="poster-img" :src="video.videoUrl+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast,ar_auto'" v-if="!video.isPlay&&!video.fullScreen" @tap.stop="playClick('myVideo'+video.videoId)"></cover-image> -->
                            <cover-image class="poster-img" :src="video.videoFaceUrl" v-if="!video.isPlay&&!video.fullScreen" @tap.stop="playClick('myVideo'+video.videoId)"></cover-image>
                        </video>
                    </view>

                </view>
            </z-paging>
			<view v-if="nothing" class="empty flex align-center flex-direction">
				<image src='../../static/video/video-empty.png' class="empty-img"></image>
				<view>暂无视频</view>
			</view>

            <u-modal v-model="show"  content='确认删除视频吗？' :showCancelButton="true" @confirm="deleteVideo" confirmColor="#ff4f20"></u-modal>
		</view>

	</view>
</template>

<script>
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	var time = null
	export default {
		mixins: [ZPagingMixin],
		data() {
			return {
				params:{
					pageSize:10,
					pageNum:1
				},

				list:[],
				show:false,
				videoId:"",
                nothing: false,
                isBack: false,
	



                oldScrollTop: 0,
                changeScroll: true,
                fullScrollTop: 0,
                outFullScreen: false,
				
			}
		},
		onShow() {
			
		},
		onLoad(options) {
            if(!this.$isNull(options.isBack)) {
                this.isBack = true
            } else {
                this.isBack = false
            }
        },
        beforeDestroy() {
            if(this.isBack) {
                uni.reLaunch({
                    url: '/pages/video/videoChoose?isBack=back'
                });
            }
        },

        onPageScroll(e) {
            let that = this
            // console.log("滚动距离为：" + e.scrollTop);

            if(this.changeScroll) {
                this.fullScrollTop = e.scrollTop
                if(Math.abs(e.scrollTop - this.oldScrollTop) >=100) {
                    this.oldScrollTop = e.scrollTop
                    let trailer = this.list;
                    
                    trailer.forEach(function(item, index) {	// 获取json对象并遍历, 停止视频
                        let temp = 'myVideo'+item.videoId;
                        if (!item.fullScreen&&item.isPlay) {
                            uni.createVideoContext(temp).pause(); //暂停视频播放事件
                            item.isPlay = false
                            item.fullScreen = false
                        }
                    })
                } 
            } else {
                if(that.outFullScreen) {
                    // 退出全屏时，恢复进入全屏前的页面位置，并恢复监听 changeScroll = true
                    that.changeScroll = true
                }
            }
        },
		methods: {
		    queryList(pageNo, pageSize) {
                let that = this;
                that.params.pageNum = pageNo;
                that.getVideoList()
            },
			showModal(videoId){
				this.show = true
				this.videoId = videoId
			},
			deleteVideo(){
				this.$u.api.deleteVideo(this.videoId).then(res => {
                    if(res.code==200) {
                        this.$refs.paging.reload()
                    }
				});
			},
			getVideoList(){
				let serverId = uni.getStorageSync('userInfo').serverId;
				let params = {
					...this.params,
					serverId
				}
				this.$u.api.videoGetList(params).then(res => {
                    if(res.code==200) {
                        res.rows.map(item=>{
                            item.isPlay = false;
                            item.fullScreen = false;
                            item.duration = "00:00"
                        })
						let arr = JSON.parse(JSON.stringify(res.rows))
                        this.nothing = this.params.pageNum==1&&arr.length==0
                        this.$refs.paging.complete(arr);
                    } else {
                        this.$refs.paging.complete(false);
                    }
				});
			},
            toEdit(videoId) {
                // uni.navigateTo({
                //     url: `./uploadVideo?type=album&videoId=${videoId}`
                // })
            },


            fullscreenchange(e,item) {
                // 进入退出全屏时停止监听滚动 changeScroll = false
                // console.log(e)
                this.changeScroll = false;
                if(e.detail.fullScreen) {
                    this.outFullScreen = false;
                } else if(!e.detail.fullScreen) {
                    // 退出全屏时，恢复进入全屏前的页面位置，并恢复监听 changeScroll = true
                    this.outFullScreen = true;
                    uni.pageScrollTo({
                        scrollTop: this.fullScrollTop,
                        duration: 0
                    })
                }
                item.fullScreen = e.detail.fullScreen

            },
            loadedmetadata(e,item) {
                console.log(e)
                // console.log(item)
                

                let secondTime = parseInt(e.detail.duration);// 秒
                // let secondTime = parseInt(3661);// 秒
                let minuteTime = 0;// 分
                let hourTime = 0;// 小时
                if(secondTime > 60) {//如果秒数大于60，将秒数转换成整数
                    //获取分钟，除以60取整数，得到整数分钟
                    minuteTime = parseInt(secondTime / 60);
                    //获取秒数，秒数取佘，得到整数秒数
                    secondTime = parseInt(secondTime % 60);
                    //如果分钟大于60，将分钟转换成小时
                    if(minuteTime > 60) {
                        //获取小时，获取分钟除以60，得到整数小时
                        hourTime = parseInt(minuteTime / 60);
                        //获取小时后取佘的分，获取分钟除以60取佘的分
                        minuteTime = parseInt(minuteTime % 60);
                    }
                }
            
                let result = "";
                let h = "00"
                let m = "00"
                let s = "00"
                
                s = parseInt(secondTime)<10?'0'+secondTime:secondTime;
                m = parseInt(minuteTime)<10?'0'+minuteTime:minuteTime
                h = parseInt(hourTime)<10?'0'+hourTime:hourTime

                if(secondTime > 0) {
                    result = m+':'+s
                }

                if(minuteTime > 0) {
                    result = m+':'+s
                }
                if(hourTime > 0) {
                    result = h+':'+m+':'+s
                }

                item.duration = result

                // console.log('result',result);


            },
            playing(e) {
                // console.log(e)
                let currentId = e.currentTarget.id;// 获取当前视频id
                // console.log("currentId", currentId);
                let trailer = this.list;
                trailer.forEach(function(item, index) {	// 获取json对象并遍历, 停止非当前视频
                    if (item.videoUrl != null && item.videoUrl != "") {
                        let temp = 'myVideo'+item.videoId;
                        if (temp != currentId) {
                            // console.log(temp);
                            uni.createVideoContext(temp).pause(); //暂停视频播放事件
                            item.isPlay= false
                        } else {
                            item.isPlay= true
                        }
                    }
                })
            },
            playEnding(e,item) {
                item.isPlay= false
            },

            playClick(idName) {
                // this.videoContent = uni.createVideoContext(idName);
                uni.createVideoContext(idName).seek(0)
                uni.createVideoContext(idName).play();
            },

		},
		
	}
</script>

<style>
    page {
		background: #f6f6f6;
        padding: 24rpx;
	}
</style>
<style lang="less" scoped>

	
	.content{
		width: 100%;
		height: 100vh;
	}



	.empty {
        width: 100%;
		height: 100%;
		font-size: 22rpx;
		color: #999;
	}

	.empty-img {
		width: 566rpx;
		height: 290rpx;
		margin-bottom: 42rpx;
		margin-top: 272rpx;
        margin-left: 52rpx;
	}
    .videobox {
        margin-top:24rpx;
        width: 640rpx;
        height: 360rpx;
        border-radius: 16rpx;
        overflow:hidden;
	}
    .poster-img {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 20;
        width: 100%;
        height: 100%;
        /deep/ .uni-cover-image {
           img {
                object-fit: cover;
                // object-fit: contain;
            } 
        }
    }
    .videoitem {
        position: relative;
        width: 100%;
        height: 100%;
    }

 
	.play-img {
		z-index: 22;
		position: absolute;
		width: 80rpx;
		height: 80rpx;
		top: calc(50% - 40rpx);
		left: calc(50% - 40rpx);
	}
 
	
</style>
