<template>
	<view class="carousel">
		<swiper circular="true" duration="400" touchable @change="swiperchange" class="swiper">
			<swiper-item v-for="(item, index) in goodsData.imgList" :key="index" class="swiper-item" @click="preview(goodsData.imgList,index)">
				<view class="image-wrapper">
					<image :src="item" class="loaded" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="dots" v-if="goodsData.imgList.length > 0">
			<text>{{currentIndex}}</text> / <text>{{goodsData.imgList.length}}</text>
		</view>
		<view class="video_btn" @click="onshowVideo" v-if="goodsData.videos">
			<text>{{minutes}}'{{seconds}}'</text>
			<!-- 这里的视频时间 建议后端上传视频时进行计算 返回给前端 前端兼容多端的情况下计算起来比较复杂 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 1,
				showVideo: false,
				minutes:'00',
				seconds:'10',
				isH5: false ,//针对H5做处理
				platform:'',
				videos:''
			}
		},
		props: {
			goodsData: {
				type: Object,
				default: () => ({
					imgList: []
				})
			}
		},
		created() {
			this.platform = uni.getSystemInfoSync().platform  //判断当前是安卓还是ios
		},
		methods: {
			onshowVideo() {
				// #ifndef H5
				this.showVideo = true
				// #endif
				// #ifdef H5
				// h5 在真机上测试
				if(this.platform == 'android'){ //判断是安卓还是ios来对视频做适配
					this.isH5 = true
				}else{
					this.showVideo = true
				}
				// #endif
				this.$emit('setShowVideo',this.showVideo,this.isH5)
			},
			swiperchange(e) {
				this.currentIndex = e.detail.current + 1
			},
			preview(imgs, index) { //预览图片
				uni.previewImage({
					current: index,
					urls: imgs
				})
			},
			
		}
	}
</script>
<style scoped lang="scss">
	.carousel {
		position: relative;
		overflow: hidden;
		.dots {
			height: 40upx;
			line-height: 40upx;
			font-size: 24upx;
			text-align: center;
			background-color: rgba(0, 0, 0, .2);
			position: absolute;
			bottom: 30upx;
			right: 0;
			z-index: 20;
			color: #FFFFFF;
			padding: 0 20upx;
			border-radius: 20upx 0 0 20upx;
		}
	}

	.swiper {
		width: 100vw;
		height: 100vw;
		z-index: 100;
	}

	.loaded {
		width: 100vw;
		height: 100vw;
		display: block;
	}

	.video_btn {
		width: 165upx;
		height: 60upx;
		background: url(data:image/png;base64,[encoded data, 6548 characters]) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		bottom: 20upx;
		left: 50%;
		transform: translateX(-50%);
		text-align: right;
		line-height: 60upx;
		padding: 0 20upx;
		font-size: 24upx;
		letter-spacing: 2upx;

		&:active {
			opacity: .8;
		}
	}
</style>
