<template>
	<view>
		<scroll-view scroll-y="true" class="hotel-pic">
			<view class="content">
				<view class="left">
					<view v-for="(x,i) in jiList" :key="i" class="image-box" @click="previewImage(x.Path)">
						<image :src="x.Path" mode="widthFix"></image>
					</view>
				</view>
				<view class="right">
					<view v-for="(x,i) in ouList" :key="i" class="image-box" @click="previewImage(x.Path)">
						<image :src="x.Path" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList:[],
				jiList:[],
				ouList:[],
				allImageSrc:[]
			}
		},
		onLoad(options) {
			if(options.imgObj){
				this.imageList=JSON.parse(options.imgObj);
				this.getSeperate();
			}			
		},
		created() {
			uni.setNavigationBarTitle({
				title: "酒店图片",
			});		
		},
		mounted () {
			
		},
		methods: {
			getSeperate(){
				this.imageList.forEach((x,i)=>{
					this.allImageSrc.push(x.Path)
					if(i%2==0){
						this.jiList.push(x)
					}else{
						this.ouList.push(x)
					}
				})
			},
			previewImage(src) {
				uni.previewImage({
					urls: this.allImageSrc,
					current: src,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			}
		},
	}
</script>

<style>
	.hotel-pic{
		height: 100vh;
		width: 100vw;
	}
	.hotel-pic .content{
		display: flex;
		align-items: flex-start;
		padding: 44rpx;
		padding-top: 14rpx;
	}
	.hotel-pic .content .left{
		flex:1;
		margin-right: 15rpx;
	}
	.hotel-pic .content .right{
		flex:1;
		margin-left: 15rpx;
	}
	.hotel-pic .content .image-box{
		width:100%;
		margin-top: 30rpx;
	}
	.hotel-pic .content .image-box image{
		width: 100%;
		border-radius: 20rpx;
	}
</style>
