<template>
	<view>
		<view class="img-box" v-if="imgList.length == 1">
			<u-image @click="onPreviewTap(file)" border-radius="10" width="460rpx" height="560rpx" :src="file"></u-image>
			<!-- #ifdef MP -->
			<view v-if="isAd" class="lock-box2" @click="onAdPreviewTap(file)">
				<u-icon name="lock" size="36"></u-icon>
				<text class="text">观看视频解锁</text>
			</view>
			<!-- #endif -->
		</view>
		<view class="img-box" v-if="imgList.length > 1">
		    <block v-for="(img,index) in imgList">
				<view @click="onPreviewTap(img)" class="img" v-if="index < 2">
					<u-image border-radius="10" width="270rpx" height="270rpx" :src="img"></u-image>
				</view>
			</block>
			
			<view class="more" v-if="imgList.length > 2">
				<u-icon name="photo"></u-icon>
				<text>+{{imgList.length-2}}</text>
			</view>
			
			<!-- #ifdef MP -->
			<view v-if="isAd" class="lock-box" @click="onAdPreviewTap(file)">
				<u-icon name="lock" size="36"></u-icon>
				<text class="text">观看视频解锁</text>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		props: {
			file: {
			  type: String,
			  default: ''
			},
			ad: {
			  type: Boolean,
			  default: false
			},
		},
		data() {
			return {
				isAd: this.ad 
			}
		},
		created() {
			
		},
		computed: {
			imgList() {
				return this.file.split(',');
			},
		},
		methods: {
			// 预览图片
			onPreviewTap(url) {
				uni.previewImage({
				    current: url,
				    urls: this.imgList,
				})
			},
			// 预览图片
			onAdPreviewTap(url) {
				this.$emit('preAd', (res)=> {
				   if(res){
					   this.isAd = false;
					   uni.previewImage({
					       current: url,
					       urls: this.imgList,
					   })
				   }
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.img-box {
		display: flex;
		position: relative;
		width: fit-content;
		
		.img {
			margin-right: 10rpx;
		}
		
		.more {
			position: absolute;
			right: 20rpx;
			bottom: 10rpx;
			background-color: #333333a6;
			color: #fff;
			font-size: 20rpx;
			padding: 4rpx 14rpx;
			border-radius: 6rpx;
		}
		
		.lock-box {
			position: absolute;
			background-color: #00000094;
			left: 0;
			right: 10rpx;
			bottom: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			border-radius: 6rpx;
			flex-direction: column;
			
			.text {
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}
		
		.lock-box2 {
			position: absolute;
			background-color: #00000094;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			border-radius: 6rpx;
			flex-direction: column;
			
			.text {
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}
	}
	
</style>