<template>
	<view>
		<view class="page-head">
			<view class="page-head-hd">
				<view class="service-head-top-left">
					<!-- <image class="service-back" @click="fanhui" src="../../static/fanhui.png"></image> -->
					<image class="page-head-img" src="../../static/videoimg.png"></image>
				</view>
				<view class="page-head-mian">
					<view class="page-head-ft">
						<view class="page-head-xuan" @click="xuanzhe">
							<image class="service-viedeimg" src="../../static/videoimg1.png"></image>
							选择
						</view>	
						<view class="page-head-xuan" @click="setVideo">
							<image class="service-viedeimg" src="../../static/videoimg2.png"></image>
							发布视频
						</view>
						
					</view>	
				</view>	
			</view>	
		</view>	
		<scroll-view :style="'width: 100%; height: '+ (windowHeight) +'px; background-color: #f5f5f5;'" :scroll-y="true" @scrolltolower="scrolltolower" :lower-threshold="lowerThreshold">
			<view style="display: flex; flex-direction: row; flex-wrap: wrap;padding-top: 46px;">
				<checkbox-group class="checkbox-group" @change="checkboxChange">
					<view class="checkbox-group-list" v-for="(list,index) in dataList" :key="index">
						<view class="data-list">
							<image v-if="checkboxShow==1" @click="towxh5Video(list)" :src="list.picPath" mode="aspectFill" style="width: 100%; height: 100%;border-radius: 10rpx;"></image>
							<image v-if="checkboxShow==0" :src="list.picPath" mode="aspectFill" style="width: 100%; height: 100%; border-radius: 10rpx;"></image>
							<checkbox v-if="checkboxShow==0" class="check-list" style="border-radius:50%;" activeBackgroundColor="#029d88" color="#029d88" :value="list.id.toString()" :checked="checkbox"/>
						</view>
					</view>
				</checkbox-group>
			</view>
		</scroll-view>
		<view class="shanchu" v-if="checkboxShow==0" @click="deleteVodeo">
			<image class="service-deleimg" src="../../static/dele.png"></image>
			<span>删除</span>
		</view>	
		<uni-popup style="width: 100%;height: 100vh;" type="center" ref="pinglun" @touchmove.stop.prevent="moveHandle">
			<view style="width: 100%;height: 100%;">
				<video
					id="myVideo"
					style="width: 100%;height: 100%;"
					:show-fullscreen-btn='false'
					:enable-play-gesture='true'
					:autoplay="true"
					:show-play-btn='false'
					:show-center-play-btn='false'
					 @click="jieshu"
					:src="filePath"></video>
				<view class="videoConten">{{contentVideo}}</view>
				<view class="videoHover" v-if="playShow==true" @click="kaishi">
					<image class="playState" src="@/static/play.png"></image>
				</view>
				<view class="guanbi" @click="guanbi">
					<image src="@/static/closeimg.png"></image>
				</view>	
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkboxShow:1,
				checkbox:false,
				windowWidth: 0,
				windowHeight: 0,
				dataList: [],
				lowerThreshold: 0,
				page: 1,
				limit:10,
				filePath:'',
				playShow:false,
				videoId:0,
				couponId:'',
				contentVideo:''
			}
		},
		onLoad() {
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			if(uni.getSystemInfoSync().platform == 'ios'){
				var model = uni.getSystemInfoSync().model
				if(model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !== 'iPhone8'){
					this.windowHeight = (uni.getSystemInfoSync().screenHeight)-125
				} else {
					this.windowHeight = uni.getSystemInfoSync().screenHeight
				}
			} else {
				this.windowHeight = uni.getSystemInfoSync().screenHeight
			}
			this.get()
		},
		methods: {
			deleteVodeo(){
				var data={
					ids:this.couponId
				}
				this.$Request.get("/app/shipinquan/delete",data).then(res => {
					if (res.code == 0) {
						this.page=1;
						this.get()
						uni.showToast({
							title:'删除成功！',
						})
						this.checkboxShow=1;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.checkboxShow=0;
					}
				});
			},
			checkboxChange(e){
				this.couponId=e.detail.value.join(",")
			},
			xuanzhe(){
				this.checkboxShow=!this.checkboxShow
			},
			guanbi(){
				this.playShow=false;
				const videoContext = uni.createVideoContext('myVideo', this);
				videoContext.pause(); // 播放视频
				this.$refs.pinglun.close("center")
			},
			jieshu(){
				this.playShow=true;
				const videoContext = uni.createVideoContext('myVideo', this);
				videoContext.pause(); // 播放视频
			},
			kaishi(){
			  this.playShow=false;
			  const videoContext = uni.createVideoContext('myVideo', this);
			  videoContext.src = this.filePath; // 设置视频源
			  videoContext.play(); // 播放视频
			},
			towxh5Video(item){
				this.playShow=false;
				console.log(" this.playShow", this.playShow)
				this.filePath=item.filePath;
				this.contentVideo=item.content
				this.videoId=item.id
				this.$refs.pinglun.open("center")
			},
			setVideo(){//发布视频
				uni.navigateTo({
					url:'/pages/video/setVideo'
				})
			},
			fanhui(){//返回
				uni.switchTab({
					url:'/pages/my/index'
				})
			},
			
			towxh5Videos(index){
				let list = []
				let videoNumber = 36;//（请输入 6 的倍数，来控制 DOM 节点的总视频数量）
				let dotNumber = videoNumber/2;
				let inf = (index+1) - dotNumber;
				console.log('点击了第'+(index+1)+'个视频.');
				let beforeLocation = 0;
				let afterLocation = 0;
				let location = 0;
				if(inf <= 0){
					beforeLocation = 0;
					location = index;
					for(let i=0;i<=index;i++){
						list.push(this.dataList[i]);
					}
				} else {
					beforeLocation = inf;
					location = index - inf;
					for(let i=inf;i<=index;i++){
						list.push(this.dataList[i]);
					}
				}
				let onf = this.dataList.length - (index+1)
				console.log('下方视频数：'+onf);
				if(onf <= dotNumber){
					if(onf !== 0){
						afterLocation = this.dataList.length - 1;
						for(let i=index+1;i<this.dataList.length;i++){
							list.push(this.dataList[i]);
						}
					} else {
						afterLocation = this.dataList.length - 1;
					}
				} else {
					afterLocation = index+dotNumber;
					for(let i=index+1;i<=index+dotNumber;i++){
						list.push(this.dataList[i]);
					}
				}
				console.log('总视频数：'+list.length);
				console.log('\n\n第一个视频下标：'+beforeLocation+'.\n'+'最后一个视频下标：'+afterLocation+'.\n\n');
				uni.setStorageSync("List",this.dataList);
				uni.setStorageSync("dataList",list);
				uni.navigateTo({
					url: './wxh5infoVideo/wxh5infoVideo?option='+location+'&page='+this.page+'&index='+index,
				})
			},
			scrolltolower(){
				// 这里就是数据加载完以后再向后端发送数据的地方
				this.page++;
				var data={
					createBy:uni.getStorageSync('userId'),
					page: this.page,
					limit:this.limit,
				}
				this.$Request.get("/app/shipinquan/list", data).then(res => {
					if (res.code == 0) {
						var msg = res.data.list
						for (let i = 0; i < msg.length; i++) {
							this.dataList.push(msg[i])
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
				// uni.request({
				// 	url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
				// 	method: 'POST',
				// 	data:{
				// 		info: 'get_video'
				// 	},
				// 	success: (res) => {
				// 		var msg = res.data.data
				// 		for (let i = 0; i < msg.length; i++) {
				// 			this.dataList.push(msg[i])
				// 		}
				// 	}
				// })
			},
			get(){
				var data={
					 createBy:uni.getStorageSync('userId'),
					page: this.page,
					limit:this.limit,
				}
				this.$Request.get("/app/shipinquan/list", data).then(res => {
					if (res.code == 0) {
							this.dataList=res.data.list
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
				// uni.request({
				// 	url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
				// 	method: 'POST',
				// 	data:{
				// 		info: 'get_video'
				// 	},
				// 	success: (res) => {
				// 		var msg = res.data.data
				// 		// console.log(msg)
				// 		this.dataList = msg;
				// 	}
				// })
			}
		}
	}
</script>

<style scoped>
	.shanchu{
		width: 100%;
		height: 48px;
		position: fixed;
		bottom: 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
	}
	.check-list{
		position: absolute;
		bottom: 0;
		left: 0;
		margin-left: 5px;
		margin-bottom: 5px;
	}
	.data-list{
		padding:4rpx;
		width:100%; 
		height:100%; 
		background-color: #fff; 
	}
	.checkbox-group-list{
		position: relative;
		width: 33%; 
		height: 350upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 5upx;
		margin-left: 1px;
	}
	.checkbox-group{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	/deep/.uni-checkbox-input{
		border-radius: 50%;
		width: 23px;
		height: 24px;
	}
	.page-head-xuan{
		margin-left: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 24rpx;
		color: #333;
	}
	.page-head-mian{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.videoConten{
		width: 70%;
		position: absolute;
		bottom: 0px;
		margin-bottom: 60px;
		height: 30px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 定义文本的行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		margin-left: 15px;
		
	}
	.videoHover{
		width: 76px;
		height: 76px;
		position: absolute;
		top: 0px;
		margin-top: 70%;
		margin-left: 40%;
	}
	.videoHover image{
		width: 100%;
		height: 100%;
	}
	.guanbi{
		width: 30px;
		height: 30px;
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 15px;
		margin-right: 9px;
	}
	.guanbi image{
		width: 100%;
		height: 100%;
	}
	/deep/.uni-popup__wrapper-box{
		height: 100%;
		width: 100%;
	}
	/deep/.uni-transition{
		width: 100%;
		height: 100%;
	}
	.page-head__title{
		font-weight: 700;
		font-size: 16px;
		opacity: 1;
		line-height: 30px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #000;
	}
	
	.page-head-ft{
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-webkit-flex-direction: row-reverse;
		flex-direction: row-reverse;
		font-size: 13px;
		box-sizing: border-box;
		margin-right: 20rpx;
	}
	.btn-icon{
		color: rgb(0, 0, 0);
		font-size: 27px;
		overflow: hidden;
		min-width: 1em;
		display: inline-block;
		font: normal normal normal 14px/1 unibtn;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		box-sizing: border-box;
	}
	.page-head-btn{
		position: relative;
		width: auto;
		margin: 0 2px;
		word-break: keep-all;
		white-space: pre;
		cursor: pointer;
		box-sizing: border-box;
	}
	.page-head-hd{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		font-size: 16px;
		width: 100%;
		justify-content: space-between;
	}
	.page-head{
		    position: fixed;
		    left: var(--window-left);
		    right: var(--window-right);
		    height: 44px;
		    height: calc(44px + constant(safe-area-inset-top));
		    height: calc(44px + env(safe-area-inset-top));
		    padding: 7px 3px;
		    padding-top: calc(7px + constant(safe-area-inset-top));
		    padding-top: calc(7px + env(safe-area-inset-top));
		    display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		    overflow: hidden;
		    -webkit-box-pack: justify;
		    -webkit-justify-content: space-between;
		    justify-content: space-between;
		    box-sizing: border-box;
		    z-index: 998;
		    color: #fff;
		    background-color: #fff;
		    -webkit-transition-property: all;
		    transition-property: all;
			color: rgb(0, 0, 0);
	}
	.service-back{
		width: 20px;
		height: 36rpx;
		margin-right:5px;
		margin-left: 10rpx;
	}
	.service-head-top-left{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.page-head-img{
		width: 120rpx;
		height: 40rpx;
	}
	.service-viedeimg{
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
	.service-deleimg{
		width: 40rpx;
		height:40rpx;}
</style>
