<template>
	<view>
		<swiper @longpress="openBs()" :style="{height:winHeight}" :circular="false" class="swipers" @change="change"
			:current="current" :vertical="true" :indicator-dots="false" :autoplay="false" :interval="0" :duration="1">
			<swiper-item class="swipers-item" v-for="(item,index) in videoList" :key="item.courseDetailsId">
				<view class="swipers-items">
					<!-- 视频 -->
					<!-- #ifndef MP-TOUTIAO -->
					<!-- #ifdef MP-WEIXIN -->
					<video :show-fullscreen-btn="false" @controlstoggle="controlstoggles" @timeupdate="timeupdate"
						@waiting="waiting()" object-fit="cover" v-if="current == index" :play-strategy="2"
						:show-loading="true" codec="software" :muted="false" :show-center-play-btn="true" :loop="false"
						@ended="ended" @play="videoPlay('myVideo'+item.courseDetailsId)"
						:enable-progress-gesture="false" :ref="'myVideo'+item.courseDetailsId"
						:id="'myVideo'+item.courseDetailsId" :src="item.wxCourseDetailsId?item.wxUrl:item.videoUrl"
						:poster="item.titleImg" :autoplay="item.autoPlay" initial-time="0"
						class="swipers-items-video"></video>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<video :show-fullscreen-btn="false" @click.stop.prevent="isSelectType" :controls="false"
						@controlstoggle="controlstoggles" @timeupdate="timeupdate" @waiting="waiting()"
						object-fit="cover" v-if="current == index" :play-strategy="2" :show-loading="true"
						codec="software" :muted="false" :show-center-play-btn="true" :loop="false" @ended="ended"
						@play="videoPlay('myVideo'+item.courseDetailsId)" :enable-progress-gesture="false"
						:ref="'myVideo'+item.courseDetailsId" :id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"
						:poster="item.titleImg" :autoplay="item.autoPlay" initial-time="0" class="swipers-items-video"
						@contextmenu.prevent="disableContextMenu"></video>
					<!-- #endif -->

					<!-- #endif -->
					<!-- #ifdef MP-TOUTIAO -->
					<video-player :show-fullscreen-btn="false" @controlstoggle="controlstoggles" @error="videoError"
						version="1" @ended="ended" object-fit="cover" @play="videoPlay('myVideo'+item.courseDetailsId)"
						:autoplay="item.autoPlay" :id="'myVideo'+item.courseDetailsId"
						:ref="'myVideo'+item.courseDetailsId" :album-id="item.dyCourseDetailsId"
						:episode-id="item.dyEpisodeId" :cloud-type="playType" :three-party-cloud="item.videoUrl"
						:poster="item.titleImg" :loop="false" class="swipers-items-video"
						v-if="current == index"></video-player>
					<!-- #endif -->

					<!-- :autoplay="item.autoPlay" -->
					<!-- 没有视频权限则显示封面图 -->
					<image v-else @click="showPay = true" :src="item.titleImg" class="swipers-items-imgsbg"
						mode="aspectFill"></image>
					<!-- 视频信息 -->
					<view class="swipers-items-info" :style="[tabBarStyle]">
						<!-- 标题 -->
						<view v-if="item.title" class="swipers-items-info-title">
							{{item.title}}
						</view>
						<!-- 简介 -->
						<view v-if="item.content" class="swipers-items-info-content" v-html="item.content">

						</view>
						<!-- 集数 -->
						<view class="swipers-items-info-num" @click="goCourse(item.courseId,item.courseDetailsId)">
							查看更多续集 >
						</view>
					</view>
					<!-- 右侧操作 -->
					<view class="swipers-items-right" :style="[tabBarStyles]">
						<view class="swipers-items-right-item">
							<view class="swipers-items-right-item-img" @click.stop="dianzan(item)">
								<u-icon name="heart-fill" v-if="item.isGood!=null && item.isGood!=0" color="red"
									size="60"></u-icon>
								<u-icon name="heart-fill" v-else color="#ffffff" size="60"></u-icon>

							</view>
							<view class="swipers-items-right-item-txt">
								{{item.goodNum}}
							</view>
						</view>
						<!-- #ifndef MP-KUAISHOU -->
						<view class="swipers-items-right-item" @click="share(item)">
							<view class="swipers-items-right-item-img">
								<image src="../../static/images/me/share.png" mode=""></image>
							</view>
							<view class="swipers-items-right-item-txt">
								分享
							</view>
						</view>
						<!-- #endif -->

						<view class="swipers-items-right-item" v-if="item.isCollect==null || item.isCollect == 0">
							<view class="swipers-items-right-item-img" @click.stop="shoucang(item)">
								<image src="../../static/images/me/shuqian.png" style="height: 60rpx;" mode=""></image>
							</view>
							<view class="swipers-items-right-item-txt">
								追剧
							</view>
						</view>
						<view class="swipers-items-right-item" v-else>
							<view class="swipers-items-right-item-img" @click.stop="shoucang(item)">
								<image src="../../static/images/me/shuqian_s.png" style="height: 60rpx;" mode="">
								</image>
							</view>
							<view class="swipers-items-right-item-txt">
								已追
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- #ifdef APP -->
		<tki-qrcode ref="qrcode" v-if="isStart" :val="erweima" :size="200" background="#ffffff" foreground="#000"
			pdground="#000" :onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
		<!-- @success：成功事件  imgSrc：图片地址 QrSrc：二维码图片地址  
		Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
		<cc-poster v-if="haibaoShow==true && erweima" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
			:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<tki-qrcode ref="qrcode" v-if="isStart" :val="erweima" :size="200" background="#ffffff" foreground="#000"
			pdground="#000" :onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
		<!-- @success：成功事件  imgSrc：图片地址 QrSrc：二维码图片地址  
		Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
		<cc-poster v-if="haibaoShow==true && erweima" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
			:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
		<!-- #endif -->



		<!-- #ifdef MP-WEIXIN -->
		<cc-poster v-if="haibaoShow==true && qrCodeData" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
			:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<cc-poster v-if="haibaoShow==true && qrCodeData" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
			:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
		<!-- #endif -->
		<u-popup width="686" v-model="showImg" mode="center" border-radius="14">
			<image :show-menu-by-longpress='true' @click="priveImage(haibaoImg)" @longpress="saveImage()"
				:src="haibaoImg" style="width: 100%;" mode="widthFix"></image>
		</u-popup>
		<uni-popup ref="popupBs" :safe-area="true" background-color="#ffffff">
			<view class="bs">
				<text class="bs-title">倍速：</text>
				<view class="bs-se">
					<view class="bs-se-i" @click="BsChange(index)" :class="nowBs==index?'bsActive':''"
						v-for="(item,index) in subList" :key="index">
						{{item.name}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from '../../common/config.js'
	import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue';
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				nowBs: 1, //当前倍速
				subList: [{
					name: '0.5x',
					num: 0.5
				}, {
					name: '1x',
					num: 1
				}, {
					name: '1.25x',
					num: 1.25
				}, {
					name: '1.5x',
					num: 1.5
				}],
				isStart: false, //是否开始生成二维码
				erweima: '',
				qrCodeData: '',
				haibaoImg: '',
				showImg: false,
				haibaoShow: false,
				title: '',
				imgSrc: '',
				current: 0,
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 0.5)'
				},
				show: false,
				videoList: [],
				isVIP: false, //是否是vip
				courseId: '',
				meunList: [], //菜单
				meunTop: 0, //返回图标距离顶部的距离
				num: 1, //当前播放的集数
				showPay: false, //购买视频的弹窗
				videoContextId: '', //记录播放的视频组件的id
				page: 1,
				pages: 1,
				limit: 5,
				courseId: 0,
				courseDetailsId: 0,
				isopen: false, //是否是公众号页面
				winHeight: '100vh',
				playType: 1,
				showControls: true, //是否显示控制中心
				timerCon: null,
				randomNum: 0,
				playFlag: false,

			};
		},
		computed: {
			// 移动视频信息的样式
			tabBarStyle() {
				let style = {
					// 滑块在页面渲染后第一次滑动时，无需动画效果
					'transition-duration': `${1}s`,
				};
				if (this.showControls) { //显示控制栏的时候
					style.transform = `translate(${20}rpx, 0)`
				} else {
					style.transform = `translate(${-750}rpx, 0)`
				}
				return style;
			},
			// 移动视频右侧按钮的样式
			tabBarStyles() {
				let style = {
					// 滑块在页面渲染后第一次滑动时，无需动画效果
					'transition-duration': `${1}s`,
				};
				if (this.showControls) { //显示控制栏的时候
					style.transform = `translate(${-20}rpx, 0)`
				} else {
					style.transform = `translate(${750}rpx, 0)`
				}
				return style;
			}
		},
		created() {
			const sysInfo = uni.getSystemInfoSync()
			//获取可是区域高度
			const winHeight = sysInfo.windowHeight
			if (winHeight && winHeight > 0) {
				this.winHeight = winHeight + 'px'
			} else {
				this.winHeight = '100vh'
			}
		},
		onShow() {
			this.showControls = true
			// #ifndef MP-KUAISHOU
			clearTimeout(this.timerCon)
			this.timerCon = null
			this.timerCon = setTimeout(() => {
				this.showControls = false
				this.$forceUpdate()
			}, 4000)
			// #endif

			try {
				this.playType = Number(uni.getStorageSync('playType'))
			} catch (e) {
				//TODO handle the exception
				this.playType = 1
			}
			this.page = 1
			this.randomNum = Math.floor(Math.random() * 33);
			this.getDataList()

		},
		onHide() {
			this.$nextTick(() => {
				if (this.videoContext) { //判断之前是否有视频的上下文
					this.meunList = [];
					this.videoList = [];
					this.videoContext.stop();
					this.videoContext = null;
					this.current = 0;
				}
			})
		},
		onShareAppMessage(res) {
			return {
				path: '/pages/video/video?invitation=' + this.invitationCode + '&qdCode=' + this
					.qdCode + '&id=' + this.courseId + '&courseDetailsId=' + this
					.courseDetailsId, //这是为了传参   onload(data){let id=data.id;} 
				title: this.getVideoTitle(),
				imageUrl: this.getVideoImageUrl()
			}
		},
		onShareTimeline(res) {
			return {
				path: '/pages/video/video?invitation=' + this.invitationCode + '&qdCode=' + this
					.qdCode + '&id=' + this.courseId + '&courseDetailsId=' + this
					.courseDetailsId, //这是为了传参   onload(data){let id=data.id;} 
				title: this.getVideoTitle(),
				imageUrl: this.getVideoImageUrl()
			}
		},
		onLoad(e) {
			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				//是公众号页面
				this.isopen = true;
			} else {
				this.isopen = false;
			}
			// #endif
			// #ifdef MP-WEIXIN
			if (e.scene) { //这里为线上操作
				//此处的二维码  page/index/index?brokerId=123
				let scene = decodeURIComponent(e.scene);
				scene = scene.split(',')
				uni.setStorageSync('invitation', scene[0])
				this.courseId = scene[1]
				this.courseDetailsId = scene[2]
				if (scene[3]) {
					uni.setStorageSync('qdCodeion', scene[3])
				}
				this.getDataList(this.courseId, this.courseDetailsId);
			}
			// #endif
			if (e.invitation) {
				uni.setStorageSync('invitation', e.invitation)
			}
			if (e.id) {
				this.courseId = e.id
			}
			console.log(e)
			if (e.courseDetailsId) {
				this.courseDetailsId = e.courseDetailsId
			}
			if (e.qdCode) {
				uni.setStorageSync('qdCodeion', e.qdCode)
			}
			// this.getDataList()
		},
		onReady() {
			// #ifdef MP-WEIXIN
			let info = uni.getMenuButtonBoundingClientRect()
			this.meunTop = info.top + ((info.height - 19) / 2)
			// #endif
			// #ifndef MP-WEIXIN
			this.meunTop = 37
			// #endif
		},
		watch: {
			//监听当前播放的集数
			current(newData, oldData) {
				//分页
				if ((newData + 1) == (this.limit * this.page)) { //最后一条了
					if (this.page < this.pages) {
						this.page += 1
						this.getDataList()
					}

					console.log(this.videoList, '2222222222')
					this.$forceUpdate()
				}
			},
			showControls(val) {
				// #ifndef MP-WEIXIN || MP-KUAISHOU || H5
				if (this.showControls == true) {
					clearTimeout(this.timerCon)
					this.timerCon = null
					this.$nextTick(() => {
						this.timerCon = setTimeout(() => {
							this.showControls = false
							this.$forceUpdate()
						}, 5000)
					})

				}
				// #endif
				// #ifdef H5
				let el = document.querySelector('.uni-video-bar');
				console.log(el, '2222222')
				if (el) {
					if (val) {
						el.style = 'display:block !important;';
					} else {
						el.style = 'display:none !important;';
					}
				}
				// #endif
			},
		},
		methods: {
			disableContextMenu(event) {
				event.preventDefault();
			},
			priveImage(url) {
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase();
				if (ua.indexOf('micromessenger') == -1) {
					uni.previewImage({
						urls: [url]
					})
				}
				// #endif
			},
			//获取当前播放视频的封面图
			getVideoImageUrl() {
				console.log(this.videoList[this.current].titleImg)
				return this.videoList[this.current].titleImg

			},
			//获取当前播放视频的标题
			getVideoTitle() {
				return this.videoList[this.current].courseDetailsName
			},
			//抖音保存海报
			saveImage() {
				let that = this
				// #ifdef MP-TOUTIAO || MP-KUAISHOU
				uni.saveImageToPhotosAlbum({
					filePath: that.haibaoImg,
					success: function() {
						uni.showToast({
							title: '已保存'
						})
					},
					fail() {
						uni.showToast({
							title: '保存失败，请重试',
							icon: 'none'
						})
					}
				});
				// #endif
			},
			isSelectType(e) {
				// console.log(e)
				// #ifndef MP-WEIXIN || MP-KUAISHOU
				this.showControls = !this.showControls
				this.$forceUpdate()
				// #endif

			},
			//显示/隐藏适配控制器的回调
			controlstoggles(e) {
				// #ifndef MP-KUAISHOU
				this.showControls = e.detail.show
				// #endif

				console.log(e.detail.show, '显示/隐藏控制栏')
			},
			//获取微信的播放链接
			getsrc(videoUrl, wxCourseDetailsId) {
				// #ifdef MP-WEIXIN
				let data = {
					wxCourseDetailsIds: wxCourseDetailsId // 注意：这里应该是单数，除非后端确实接收复数形式  
				};
				this.$Request.postJson('/app/course/selectWxVideoUrl', data).then(res => {
					if (res.code == 0) {
						this.videoList[this.current].wxUrl = res.data[0].mp4_url
					} else {
						this.videoList[this.current].wxUrl = videoUrl
					}
				});
				// #endif
				// #ifndef MP-WEIXIN
				this.videoList[this.current].wxUrl = videoUrl
				// #endif

			},
			videoError(e) {
				console.log(e, '11111111111')
			},
			//打开倍速弹框
			openBs() {
				console.log('打开倍速')
				this.$refs.popupBs.open('bottom')
			},
			//切换倍速
			BsChange(index) {
				this.nowBs = index
				this.videoContext.playbackRate(this.subList[index].num)
				this.$refs.popupBs.close()
				uni.showToast({
					title: '已切换' + this.subList[index].num + '倍播放',
					icon: 'none',
					duration: 2000
				})
			},
			//播放进度变化回掉
			timeupdate(e) {
				//隐藏loding
				// #ifdef H5
				uni.hideLoading()
				// #endif
				if (e.detail.currentTime > e.detail.duration*0.9) {
					if ( this.playFlag) {
						this.playFlag = false
						this.$Request.getT('app/course/viewCourse', {
							courseId: this.courseId,
							courseDetailsId: this.courseDetailsId,
							type: 'end'
						}).then(res => {
							console.log('播放结束')
						})
					}
				}
			},
			//缓冲中
			waiting(e) {
				//在h5状态下视频出现缓冲则显示loding
				// #ifdef H5
				uni.showLoading()
				// #endif
			},
			openShow() {
				this.show = true
				this.$nextTick(() => {
					this.scrollIntoViews = this.scrollIntoView
				})

			},
			//生成失败
			posterError() {
				this.haibaoImg = ''
				this.showImg = false
				// 生成完成后初始化分享
				this.haibaoShow = false
				this.isStart = false
				this.imgSrc = ''
				uni.showToast({
					title: '海报生成失败',
					mask: false,
					duration: 2000,
					icon: "none"
				});
			},
			/**
			 * @param {String} path //返回的二维码地址
			 */
			qrR(path) {
				this.qrCodeData = path
				this.haibaoShow = true
			},
			/**生成成功
			 * @param {String} img 成功回调的图片
			 */
			posterSuccess(img) {
				console.log(img)
				this.haibaoImg = img.tempFilePath
				this.showImg = true
				// 生成完成后初始化分享
				this.haibaoShow = false
				this.isStart = false
				this.imgSrc = ''
				uni.hideLoading()
				uni.showToast({
					title: '长按图片保存海报',
					mask: false,
					duration: 2000,
					icon: "none"
				});
			},
			//分享
			share(item) {
				this.imgSrc = item.titleImg
				let qdCode = ""
				if (uni.getStorageSync('qdCode')) {
					qdCode = uni.getStorageSync('qdCode')
				} else {
					qdCode = ""
				}
				this.title = item.title ? item.title : ''
				// #ifndef MP-WEIXIN
				let urls = config.APIHOST2 + '/pages/video/video?id=' + item.courseId + '&courseDetailsId=' + item
					.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode') + '&qdCode=' + qdCode
				this.erweima = urls
				this.isStart = true
				// #endif


				// #ifdef MP-WEIXIN
				let that = this
				let data = {
					invitationCode: uni.getStorageSync('invitationCode') + ',' + item.courseId + ',' + item
						.courseDetailsId + ',' + qdCode,
					page: 'pages/video/video'
				}
				uni.downloadFile({
					url: config.APIHOST + '/app/invite/mpCreateQr?invitationCode=' + data.invitationCode +
						'&page=' + data.page,
					success(res) {
						if (res.statusCode === 200) {
							that.qrCodeData = res.tempFilePath
							that.haibaoShow = true
						} else {
							uni.showToast({
								title: '分享失败',
								icon: 'none'
							})
						}
					}
				})
				// #endif
			},
			// 跳转资源详情
			goCourse(e, courseDetailsId) {
				let userId = uni.getStorageSync('userId')
				if (userId) {
					// uni.navigateTo({
					// 	url: '/pages/index/course/courseDet?id=' + e
					// });
					uni.navigateTo({
						url: '/me/detail/detail?id=' + e + '&courseDetailsId=' + courseDetailsId
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},
			//收藏
			shoucang(item) {
				if (uni.getStorageSync('token')) {
					let data = {
						courseId: item.courseId,
						courseDetailsId: item.courseDetailsId,
						classify: 1,
						type: item.isCollect == 0 ? 1 : 0
					}
					this.$Request.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {
						if (res.code == 0) {
							if (data.type == 1) {
								item.isCollect = 1
							} else {
								item.isCollect = 0
							}
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},
			//点赞
			dianzan(item) {
				if (uni.getStorageSync('token')) {
					let data = {
						courseId: item.courseId,
						courseDetailsId: item.courseDetailsId,
						classify: 2,
						type: item.isGood == 0 ? 1 : 0
					}
					this.$Request.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {
						if (res.code == 0) {
							if (data.type == 1) {
								item.isGood = 1
								item.goodNum += 1
							} else {
								item.isGood = 0
								item.goodNum -= 1
							}
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}

			},
			// 资源详情
			getDataList() {
				let data = {
					page: this.page,
					limit: this.limit,
					token: uni.getStorageSync('token') ? uni.getStorageSync('token') : '',
					randomNum: this.randomNum
				}
				// #ifdef MP-WEIXIN
				data.wxShow = 1
				// #endif
				// #ifdef MP-TOUTIAO
				data.dyShow = 1
				// #endif
				this.$Request.getT('/app/course/selectCourseDetailsList', data).then(res => {
					if (res.code == 0) {
						this.pages = res.data.totalPage
						if (res.data.list) {
							let arr = JSON.parse(JSON.stringify(res.data.list))
							arr.map((item, index) => {
								// item.num = index + 1
								item.autoPlay = true
							})
							//菜单数组
							if (this.page == 1) {
								this.videoList = arr
							} else {
								this.videoList = [...this.videoList, ...arr]
							}
							if (this.page == 1) {
								let numIdCurr = this.videoList[0].courseDetailsId;
								this.courseId = this.videoList[0].courseId
								this.courseDetailsId = this.videoList[0].courseDetailsId;
								this.videoContextId = 'myVideo' + numIdCurr;

								this.$nextTick(() => {
									this.videoContext = uni.createVideoContext(this.videoContextId, this);
									this.videoContext.play();
								})

								if (uni.getStorageSync('token')) { //如果有token则插入
									//插入历史记录
									this.setHistor(this.videoList[this.current].courseId, this.videoList[this
											.current]
										.courseDetailsId)
								}
							}
							this.getsrc(this.videoList[this.current].videoUrl, this.videoList[this.current]
								.wxCourseDetailsId)
							this.$forceUpdate()
						}
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none'
						});
					}

				})
			},
			//记录观看记录
			setHistor(courseId, courseDetailsId) {
				//如果没有登录则不进行记录直接return
				if (!uni.getStorageSync('token')) {
					return
				}
				let data = {
					courseId: courseId,
					courseDetailsId: courseDetailsId,
					classify: 3,
					type: 1
				}
				this.$Request.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {})
			},
			//swiper上下切换事件
			change(e) {
				//拿出当前的swiper索引
				let current = Number(e.detail.current)
				//考虑向上滑动的时候
				if (current == 2 && this.current == 0) {
					//向上滑到头的时候先拿第一条数据的courseDetailsId
					let courseDetailsId = this.videoList[0].courseDetailsId
					// 根据courseDetailsId在meunList中找到这个数据的下标
					let indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
					if (indexs != -1) { //找到了，indexs就是对应下标
						//先判断meunList数组剩下的元素是否够三条
						const lengths = (this.meunList.slice(0, indexs)).length
						if (lengths >= 3) { //够三条
							// 因为轮播图开启了首尾衔接,所以在滑动到尾部重新进入第一页之前替换全部数据为之前的三条
							//因为slice(str,end)，包含str，不包含end，所以拿三条数据则-3
							this.videoList = this.meunList.slice(indexs - 3, indexs)
						} else { //不够三条
							let arr = new Array(3)
							switch (lengths) {
								//只有一条
								case 1:
									//只有一条的时候需要给数组补两条凑够三条，把meunList数组的前两条拿出来补在后面
									arr[2] = this.meunList[indexs - 1] //把剩下的一条取出来放到要滑动的那一页
									//因为剩下的数据不够了，则拿meunList末尾的两条数据补齐
									//第二个用最后一条数据
									arr[1] = this.meunList[this.meunList.length - 1]
									//第一个用倒数第二条数据
									arr[0] = this.meunList[this.meunList.length - 2]
									//赋值
									this.videoList = arr
									break;
									//只有二条
								case 2:
									//还剩下两条数据的时候
									//把剩下的倒数第一条取出来放到要滑动的那一页
									arr[2] = this.meunList[indexs - 1]
									//把剩下的最后一条放到第二个元素
									arr[1] = this.meunList[indexs - 2]
									//最后一个元素则由meunList的最后一条补齐
									arr[0] = this.meunList[this.meunList.length - 1]
									//最后赋值
									this.videoList = arr
									break;
								default:
									//一条都没有的时候 [1,2,3,4,5,6]
									//直接把meunList末尾的三条放入数组即可
									this.videoList = this.meunList.slice(-3)
									break;
							}
						}
					}
				}
				//考虑向下滑动
				if ((current == 0 && this.current == 2) || (current == 0 && this.current ==
						0)) { //是否滑动到第一条，虽然刚进入页面current为0，但是首次不触发
					//拿出当前的courseDetailsId
					let courseDetailsId = this.videoList[2].courseDetailsId
					//记录当前数据在meunList中的下标
					//根据courseDetailsId找出meunList中对应的数据的下标
					let indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
					if (indexs != -1) { //找到了，indexs就是对应下标
						//先判断meunList数组剩下的元素是否够三条
						const lengths = (this.meunList.slice(indexs + 1, this.meunList.length)).length
						if (lengths >= 3) { //够三条
							// 因为轮播图开启了首尾衔接,所以在滑动到尾部重新进入第一页之前替换全部数据为之后的三条
							this.videoList = this.meunList.slice(indexs + 1, indexs + 4)
						} else { //不够三条
							let arr = new Array(3)
							switch (lengths) {
								//只有一条
								case 1:
									//只有一条的时候需要给数组补两条凑够三条，把meunList数组的前两条拿出来补在后面
									arr[0] = this.meunList[indexs + 1]
									arr[1] = this.meunList[0]
									arr[2] = this.meunList[1]
									this.videoList = arr
									break;
								case 2:
									//只有二条
									arr[0] = this.meunList[indexs + 1]
									arr[1] = this.meunList[indexs + 2]
									arr[2] = this.meunList[0]
									this.videoList = arr
									break;
								default:
									//刚好没有数据了 直接拿meunList的前三条数据
									this.videoList = this.meunList.slice(0, 3)
									break;
							}
						}
					}
				}
				this.courseId = this.videoList[current].courseId
				this.courseDetailsId = this.videoList[current].courseDetailsId
				//获取当前播放的视频在菜单数组中的位置
				let scrollIndex = this.meunList.findIndex(ite => ite.courseDetailsId == this.videoList[current]
					.courseDetailsId);
				//记录当前播放位置
				this.scrollIntoView = 'video' + scrollIndex;
				this.current = current
				this.$nextTick(() => {
					this.getsrc(this.videoList[this.current].videoUrl, this.videoList[this.current]
						.wxCourseDetailsId)
					//插入历史记录
					this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
						.courseDetailsId)
					// 把选择的视频的自动播放设置为true
					this.videoList[this.current].autoPlay = true
					//让当前选择的视频播放
					this.startPlay(this.current)
					//更新视图
					this.$forceUpdate()
				})


			},
			startPlay(current) {
				if (this.videoContext) { //判断之前是否有视频的上下文
					this.videoContext.stop();
					this.videoContext = null;
				}
				let numIdCurr = this.videoList[current].courseDetailsId;
				// 播放时记录当前播放的id
				this.videoList[current].autoPlay = true
				this.videoContextId = 'myVideo' + numIdCurr;
				this.videoContext = uni.createVideoContext(this.videoContextId, this);
				if (this.videoContext) {
					this.$nextTick(() => {
						//播放当前的
						this.videoContext.play();
						this.$forceUpdate();
					})
				}


			},
			//在播放时候的回调
			videoPlay(videoId) {
				this.$Request.getT('app/course/viewCourse', {
					courseId: this.courseId,
					courseDetailsId: this.courseDetailsId,
					type: 'start'
				}).then(res => {
					this.playFlag = true
					console.log('播放开始')
				})
			},
			//监听视频播放完成
			ended() {
				if (this.current == 2) {
					this.current = 0
				} else {
					//拿出当前的courseDetailsId
					let courseDetailsId = this.videoList[this.current].courseDetailsId;
					//拿出当前播放视频的courseDetailsId对应meunList的下标
					let indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
					if (indexs < (this.meunList.length - 1)) { //判断是否是最后一个，如果不是则继续翻下一页
						this.current += 1
					}
				}

			},
			//返回
			goBack() {
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #000;
	}

	.bs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		padding-bottom: 100rpx;
	}

	.bs-title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.bs-se {
		display: flex;
		align-items: center;
		background-color: #eeeeef;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.bs-se-i {
		width: 100rpx;
		padding: 16rpx 0;
		text-align: center;
	}

	.bsActive {
		background-color: #ffffff;
		border-radius: 6rpx;
	}

	.list {
		width: 100%;
		height: 100%;
		background-color: #202020;
		color: #ffffff;

		.list-title {
			height: 100rpx;
			width: 100%;
			// padding-top: 30rpx;
			font-size: 32rpx;
			font-weight: bold;

			.list-title-icon {
				padding-left: 30rpx;
				padding-right: 30rpx;
			}

		}

		.list-item {
			padding: 0 30rpx;

			.list-item-box {
				width: 100%;
				line-height: 90rpx;
				background-color: #ffffff;
				color: #000;
				font-weight: bold;
				text-align: center;
				margin-top: 40rpx;
				border-radius: 20rpx;
			}

		}

		.list-box {
			width: 100%;
			height: calc(100% - 100rpx);
		}

		.list-box-item {
			width: calc(100% - 40rpx);

			margin: 0 auto;
			margin-bottom: 20rpx;
		}

		.list-box-item-l {
			width: 140rpx;
			height: 100%;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 160rpx;
				border-radius: 10rpx;
			}
		}

		.list-box-item-r {
			width: calc(100% - 160rpx);
			height: 100%;
			color: #ffffff;
			font-size: 32rpx;

			.list-box-item-r-title {
				width: 100%;
				font-weight: bold;
			}

			.list-box-item-r-titles {
				margin-top: 10rpx;

			}

			.list-box-item-r-content {
				width: 100%;
				color: rgba(255, 255, 255, 0.6);
				margin-top: 10rpx;
				overflow: hidden; //超出的文本隐藏
				display: -webkit-box;
				-webkit-line-clamp: 2; // 超出多少行
				-webkit-box-orient: vertical;
			}
		}
	}

	.swipers {
		width: 100%;

		.swipers-item {
			width: 100%;
			height: 100%;
		}

		.swipers-items {
			width: 100%;
			height: 100%;
			position: relative;
			background-color: #000;
		}

		.swipers-items-imgsbg {
			position: absolute;
			width: 100%;
			height: 90%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.swipers-items-video {
			width: 100%;
			height: 100%;
		}

		.swipers-items-back {
			position: absolute;
			// top: 75rpx;
			left: 20rpx;
			z-index: 999;
		}

		.swipers-items-info {
			width: 80%;
			height: auto;
			position: absolute;
			bottom: 100rpx;
			left: 20rpx;
			color: #ffffff;
			font-size: 30rpx;
			z-index: 999;

			.swipers-items-info-content {
				margin-top: 10rpx;
				font-size: 26rpx;
			}

			.swipers-items-info-num {
				margin-top: 20rpx;
			}
		}

		.swipers-items-right {
			width: 60rpx;
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translate(0, -50%);
			z-index: 999;

			.swipers-items-right-item {
				width: 100%;
				margin-bottom: 40rpx;
			}

			.swipers-items-right-item-img {
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.swipers-items-right-item-txt {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #ffffff;
				font-weight: bold;
				margin-top: 10rpx;
			}
		}
	}
</style>