<template>
	<view class="shortVideoPaly">
		<swiper class="swiper-box" :current="current" circular vertical @change='swiperChange'>
			<swiper-item v-for="(item,index) in videoList" :key='index'>
				<view class="swiper-item">
					<video :id='`video${index}`' @click="videoClick" @ended='videoEnded' class="video"
						:src="item.videoUrl"></video>
					<view class="des">
						<text>{{item.title}}</text>
						<!-- <text>{{item.remarks}}</text> -->
					</view>
					<!-- <view class="share">
						<m-icon type="dianzan"></m-icon>
						<m-icon type="shoucang"></m-icon>
						<m-icon type="share-fill"></m-icon>
					</view> -->
				</view>
			</swiper-item>
		</swiper>

		<m-return></m-return>

	</view>
</template>

<script>
	export default {
		data: () => ({
			videoContext: null,
			current: 0,
			videoList: []
		}),
		onLoad: async function(option) {
			const data = await this.goPageGetData()
			this.videoList = data.carVideoList
		},
		mounted() {
			this.videoContext = uni.createVideoContext('video0')
			this.videoContext.play()
			console.log(this.videoContext)
		},
		watch: {
			// current(newVal) {
			// 	if (newVal % 5 == 0) {
			// 		this.videoList.splice((newVal + 5) % 15, 5, ...[1, 1, 1, 1, 1])
			// 	}
			// }
		},
		methods: {
			swiperChange(e) {
				this.current = e.detail.current
				this.videoContext.pause()
				this.videoContext = uni.createVideoContext(`video${e.detail.current}`)
				this.videoContext.play()
			},
			videoClick() {
				console.log(this.videoContext)
			},
			videoEnded() {
				this.current = (this.current + 1) % this.videoList.length
			}
		}
	}
</script>

<style lang="scss">
	.shortVideoPaly {
		height: 100vh;
		width: 100vw;
		box-sizing: border-box;

		.swiper-box {
			width: 100%;
			height: 100%;

			.swiper-item {
				width: 100%;
				height: 100%;
				position: relative;

				.video {
					width: 100%;
					height: 100%;
					z-index: 0;
				}

				.des {
					width: 50%;
					// background-color: #ffffff;
					color: #FFFFFF;
					position: absolute;
					left: 20rpx;
					bottom: 100rpx;
					display: flex;
					flex-direction: column;
					z-index: 1;
				}

				.share {
					background-color: #ffffff;
					position: absolute;
					right: 20rpx;
					bottom: 100rpx;
					display: flex;
					flex-direction: column;
					height: 200rpx;
					justify-content: space-between;
					align-items: center;
					z-index: 1;
				}
			}

		}
	}
</style>
