<template>
	<view class="swiper_s">
		<swiper class="swiper_s"  :autoplay="false" indicator-active-color="#0DAE11" indicator-color="#ffffff" :indicator-dots="false"  :current="swiperCurrent" @change="swiperChange">
			<swiper-item v-for="(item,index) in list" :key="index">
				<view class="fnon_tit">
					<view class="text">{{ item.title?item.title:'' }}</view>
				</view>
				<!-- @click="click(item.url)" 跳转活动链接 -->
				<image class="swiper-image" v-if="isImageUrl(item.image)"  :src="item.image" mode="scaleToFill" />
			</swiper-item>
			
		</swiper>
		<!-- 自定义指示器 -->
		<view class="dots">
			<text 
				v-for="(dot, idx) in list.length" 
				:key="idx" 
				:class="['dot', { active: swiperCurrent === idx }]"
			/>
		</view>
	</view>	  
</template>

<script>
	// #ifdef APP
	import MyVideo from '@/components/fuyu-MixSwiper/MyVideo.vue'
	// #endif
	export default {
		components: {
			// #ifdef APP
			MyVideo
			// #endif
		},
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				swiperCurrent: 0, //轮播下标
				autoplaySwiper: false,
				isShow: true,
				videoIndex: null,
				videoId: null,
				dotsShow:true,
				currentItemType:''
			}
		},
		created() {
			
		},
		methods: {
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
				const currentItem = this.list[this.swiperCurrent];
				this.currentItemType = currentItem.showtype;
				if (this.currentItemType === 'video') {
					this.dotsShow = false
				} else {
					this.dotsShow = true
				}
				if (e.detail.current != this.videoIndex) {
					this.endVideo(this.videoId, 'swiper')
				}
			},
			click(e){
				uni.navigateTo({
					url: e
				});
			},
			isImageUrl(url) {
				// 定义常见的图片文件后缀
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg'];
				// 获取URL中的文件后缀
				const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
				// 检查文件后缀是否在图片文件后缀数组中
				return imageExtensions.includes(ext)
			},
			//当video播放得时候 覆盖曾隐藏，不能轮播
			plays(id, index) {
				// #ifndef APP
				let videoContext = uni.createVideoContext(`Video${id}`, this);
				videoContext.play()
				// #endif
				this.videoId = id
				this.videoIndex = index
				this.isShow = false
				this.autoplaySwiper = false
			},
			//加载视频时触发，解决小程序加载报错问题
			loadVideo(id) {
				let videoContext = uni.createVideoContext(`Video${id}`, this);
				videoContext.pause()
				videoContext.seek(0)
			},
			//当video播放结束得时候 进行初始化，恢复轮播
			endVideo(id, type) {
				// #ifndef APP
				let videoContext = uni.createVideoContext(`Video${id}`, this);
				videoContext.pause()
				// #endif
				this.isShow = true
				this.videoIndex = null
				this.videoId = null
				this.autoplaySwiper = true
				// if (!type) {
					// setTimeout(v => {
					// 	this.swiperCurrent++
					// }, 500)
				// }
			},
		}
	}
</script>
<style scoped lang="scss">
	.swiper_s {
		width: 100%;
		height: 100%;
	}
	
	
	.swiper-image,
	.swiper-video {
		width: 100%;
		height: 100%;
		border-radius: 36rpx;
		object-fit: contain;
	}
	.fnon_tit {
		position: absolute;
		left: 5%;
		font-family: "YouSheBiaoTiHei";
		font-weight: 400;
		font-size: 38rpx;
		color: #ffffff;
		text-align: center;
		font-style: normal;
		text-transform: none;
		z-index: 1;
		width: 630rpx;
		height: 117rpx;
		line-height: 100rpx;
		background: rgba(0, 0, 0, 0.24);
		border-radius: 36rpx;
		bottom: 30rpx;
		.text {
			position: relative; /* 确保文字在模糊背景之上 */
			z-index: 110; /* 确保文字位于最上层，高于伪元素 */
		}
	}
	.fnon_tit::after {
		content: "";
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		backdrop-filter: blur(4px); /* 调整模糊程度 */
		pointer-events: none; /* 确保模糊效果不会干扰点击事件 */
		border-radius: 36rpx;
		z-index: 10; /* 确保伪元素在背景和文字之间 */
	}
	.dots {
		position: absolute;
		bottom: 50rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	
		.dot {
			background-color: #ffffff ;
			width: 30rpx;
			height: 6rpx;
			border-radius: 0;
			margin-right: 10rpx;
			&.active {
				background:  #0DAE11;
				// transform: scale(0.9);
			}
		}
	}
</style>