<template>
	<view class="box">
		<view class="nodata" v-if="dataList.length===0">
			暂无内容
		</view>
		<view v-for="(item,index) in dataList" :key="index" class="img-box" style="position: relative;" v-if="dataList.length>0">
			<image :src="item.Path" mode="aspectFill" class="img" v-if="item.Type==1" @click="previewImage(index)"></image>
			<video :id="'myVideo'+index" :src="item.Path" style="width: 215rpx;height: 215rpx;"
			:controls='controls' 
			:show-center-play-btn='false'
			:show-fullscreen-btn='false' 
			@fullscreenchange='videoControl'
			v-if="item.Type==2"
			></video>
			<view  @click="enlarge(index)"
				style="position: absolute;left: 50%;top: 50%;margin-top: -49rpx;margin-left: -49rpx;width: 98rpx;height: 98rpx;border-radius: 20rpx;background-color: rgba(255,255,255,.4);display: flex;align-items: center;justify-content: center;" v-if="item.Type==2">
				<!-- 播放按钮 -->
				<image
					src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
					style="width: 37rpx;height: 44rpx;" mode=""></image>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id:0,
				
				boxOption: 0,
				navsOption: 0,
				titleStyle: {},
				active: 0,
				mainColor: '',
				likeStatus: false,
				controls:false,//显示默认控件
				dataList:[],
				preImg:[],
				videoContext:null
			}
		},
		
		onLoad(options) {
			uni.setNavigationBarTitle({
			    title: '相册详情'
			});
			this.mainColor = this.$uiConfig.mainColor;
			if(options.data){
			     let res = JSON.parse(decodeURIComponent(options.data))    
					this.dataList=res.data
					
					this.dataList.map(e=>{
						this.preImg.push(e.Path)
					})
						console.log(this.dataList)
			    }
		},
		methods: {
			
			previewImage(i) {
				console.log(i)
				uni.previewImage({
					urls: this.preImg,
					current: i,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},
			scroll(e) {
				this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
				this.titleStyle.opacity = ((e.detail.scrollTop - 100) < 0 ? 0 : Math.floor(e.detail.scrollTop - 100)) + "%"
				this.$forceUpdate()
			},
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},
			
			enlarge(i) {
				// 全屏
				this.videoContext = uni.createVideoContext('myVideo'+i);
				this.videoContext.requestFullScreen({
					direction:0
				})
			},
			videoControl(e){
				if(e.detail.fullScreen==false){
					this.videoContext.stop()
					this.controls=false
				}else{
					this.videoContext.play()
					this.controls=true
				}
			},
			
		},
		mounted() {
			
		}

	}
</script>

<style lang="scss" scoped>
		.box{
			margin: 30rpx;
			display: flex;
			flex-wrap: wrap;
			& .img-box:nth-child(3n){
				margin-right: 0rpx !important;
				background-color: #000000;
			}
			.img-box{
				width: 215rpx;
				height: 215rpx;
				border-radius: 12rpx;
				bottom: 10px;
				margin-right: 10px;
				margin-bottom: 10px;
				border: 1rpx solid #EEEEEE;
				overflow: hidden;
			}
			.img{
				width: 215rpx;
				height: 215rpx;
				border-radius: 12rpx;
			}
		}
		.nodata{
			width: 100%;
			text-align:center;
		}
</style>