<template>
	<u-mask :show="allShow" @click="close">
		<view class="swiper-box">
			<view class="color-ff flex justify-between align-center padding">
				<u-icon name="close" color="#fff" size="40"></u-icon>
				<view class="text-lg font-bold"><span>{{currentIndex+1}}</span>/{{tempList.length}}</view>
			</view>
			<view class="swiper-item">
				<swiper class="swiper" style="height: calc(100vh - 180rpx)" @change="swiperChange" :current="currentIndex">
					<swiper-item v-for="(item,indexurl) in tempList" :key="indexurl" @tap.stop="swiperClickSw(item.url)">
						<view class="swiper-item">
							<image v-if="item.type=='001'" :src="item.url" mode="aspectFit"></image>

							<view class="swiper-video" v-if="item.type=='002'">
								<!-- 封面 -->
								<image v-if="item.type=='002'&&!isVodeoPlaySw" :src="item.faceImg" mode="aspectFit"></image>
								<!-- 播放按钮 -->
								<image src="../../static/common/play.png" v-if="item.type=='002'&&!isVodeoPlaySw" class="play-btn-img"></image>
								<!-- 播放时显示视频 -->
								<video id="myVideoS" v-show="item.type=='002'&&isVodeoPlaySw" :src="item.url.split('?')[0]"
								:show-center-play-btn="false" :poster="item.url"
								:initial-time="initialTime"
								@ended="videoPause" @play="videoPlay" @pause="videoPause" :show-fullscreen-btn='false'
								:enable-progress-gesture='false' controls :key="swiperKey">
									<cover-view class="controls-title" @tap.stop="swiperClickSw(item.url)">
										<!-- 点击停止播放 -->
									</cover-view>
								</video>
							</view>

						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</u-mask>
</template>

<script>
	export default {
		data() {
			return {
				videoplaySw: {},
				initialTime: 0,
				isVodeoPlaySw: false,
				swiperKey: 1,
				show: true,
				allShow: false,
				currentIndex: 0
			}
		},
		props: {
            //是否显示
			tempList: {
				type: Array,
				default: []
			},
			//是否显示
			maskShow: {
				type: Boolean,
				default: true
			},
			
			swiperIndex: {
				type: Number,
				default: 0
			},
		},
		watch: {
			maskShow() {
                this.allShow=(this.maskShow&&this.show&&!this.isCamera);
            },
            show() {
                this.allShow=(this.maskShow&&this.show&&!this.isCamera);
            },
			swiperIndex() {
				this.currentIndex = this.swiperIndex;
			}
		},
		methods: {
			close() {
				setTimeout(() => {
					this.isVodeoPlaySw = false;
					this.swiperKey++;
					this.videoplaySw = uni.createVideoContext('myVideoS');
					this.videoplaySw.pause();
					this.$emit('closeSwiper');
				}, 20)
            },
			//轮播切换
			swiperChange(e) {
				// console.log(e)
				if(this.allShow) {
					let index = e.detail.current;
					let url = this.tempList[index].url;
					this.currentIndex = index;
					// console.log(url)
					if(url.toUpperCase().indexOf('MP4')!=-1) {
						setTimeout(() => {
							this.isVodeoPlaySw = false;
							this.swiperKey++;
							this.videoplaySw = uni.createVideoContext('myVideoS');
							this.videoplaySw.pause();
							
						}, 20)
					}
				}
			},
			videoPause() {
				this.isVodeoPlaySw = false;
				this.swiperKey++;
				this.videoplaySw = uni.createVideoContext('myVideoS');
				this.videoplaySw.pause();
			},
			videoPlay() {
				this.isVodeoPlaySw = true;
			},
			swiperClickSw(url) {
				if(url.toUpperCase().indexOf('MP4')!=-1) {
					if (!this.isVodeoPlaySw) {
						this.isVodeoPlaySw = true;
						
						setTimeout(() => {
							this.videoplaySw = uni.createVideoContext('myVideoS');
							this.videoplaySw.play();
						}, 200)
					} else {
						setTimeout(() => {
							this.isVodeoPlaySw = false;
							this.swiperKey++;
							this.videoplaySw = uni.createVideoContext('myVideoS');
							this.videoplaySw.pause();
							
						}, 200)
					}
				}
				
				
			},
		}
	}
</script>

<style lang="less" scoped>
.controls-title {
		width: 100%;
		height: 100%;
		// background: rgba(0,123,677,0.9);
	}
.swiper-box {
	height: 100vh;
	padding-top: 80rpx;
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: rgba(0,0,0,1);
	z-index: 99999;
	position: fixed;
	top: 0;
	left: 0;
	.close-img {
		width: 60rpx;
		height: 60rpx;
		
	}
	.swiper-item {
		flex: 1;
		height: calc(100vh - 180rpx);
		.swiper-video {
			width: 100%;
			height: 100%;
			position: relative;
		}
		.play-btn-img {
			position: absolute;
			top: calc(50% - 40rpx);
			left: calc(50% - 40rpx);
			width: 80rpx;
			height: 80rpx;
		}
	}

}
</style>