<template>
	<div>
		<van-nav-bar title="相册" />
		<van-row justify="left" align="left" style="text-align: left;">
			<van-col span="3" offset="1">
				<van-image style="width: 60rpx; height: 60rpx;background-color: #e2f2f2;"
					:src="getImageUrl(addimage)" @click="viewClick('/photoAlbumAdd')" />
			</van-col>
		</van-row>
		<van-row justify="center" align="center" style="text-align: center;">
			<van-col span="12">
				<div style="width: 100%;" v-for="(item,i) in leftList" :key="i">
					<van-image class="image" :src="getImageUrl(item.url)" mode="widthFix"></van-image>
					<div class="image-title">{{item.name}}</div>
				</div>
			</van-col>
			<van-col span="12">
				<div style="width: 100%;" v-for="(item,i) in rightList" :key="i">
					<van-image class="image" :src="getImageUrl(item.url)" mode="widthFix"></van-image>
					<div class="image-title">{{item.name}}</div>
				</div>
			</van-col>
		</van-row>
	</div>
	<!-- 	<view>
		<view class="flex-item" style="text-align: left;margin-left: 20rpx;margin-top:20rpx;height: 60rpx;">
			<image style="width: 60rpx; height: 60rpx;" :src="addimage" @click="viewClick('/pages/sacrifice/photoAlbum/add')">
			</image>
		</view>
		<view class="page">
			<view class="left" ref="left">
				<view style="width: 100%;" v-for="(item,i) in leftList" :key="i">
					<image class="image" :src="item.url" mode="widthFix"></image>
					<view class="image-title">{{item.name}}</view>
				</view>
			</view>
			<view class="right" ref="right">
				<view style="width: 100%;" v-for="(item,i) in rightList" :key="i">
					<image class="image" :src="item.url" mode="widthFix"></image>
					<view class="image-title">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view> -->
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	const router = useRouter();
	
	const addimage = ref("image/ancestralHall2.png");


	const leftList = ref([{
			id: 0,
			url: 'image/demo/photoAlbum1.png',
			name: '祖父钱文忠'
		},

		{
			id: 2,
			url: 'image/demo/photoAlbum1.png',
			name: '祖父钱文忠'
		}

	]);
	const rightList = ref([{
			id: 1,
			url: 'image/demo/photoAlbum2.png',
			name: '晚年生活'
		},
		{
			id: 3,
			url: 'image/demo/photoAlbum2.png',
			name: '晚年生活'
		}

	]);

	function viewClick(url) { //点击事件
		router.push(url);
	}
	
	const getImageUrl = (name) => {
		return new URL(`/src/assets/${name}`, import.meta.url).href
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		display: flex;
		align-items: flex-start;
		padding: 0 1%;
		box-sizing: border-box;
	}

	.left,
	.right {
		margin: 0 auto;
		width: 48%;
	}

	.image {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}
</style>