<template>
	<div>
		<van-nav-bar title="祭祀" />
		<van-tabs v-model:active="active">
			<van-tab title="禀报" style="text-align: center;">
				<br />
				<van-image style="width: 100%; height: 18rem; background-color: #eeeeee;" fit="cover" position="left"
					:src="getImageUrl('image/fete1.png')" />
				<br />
				<van-row justify="left" align="left" style="text-align: left;">
					<van-col span="20" offset="4">
						<div>
							<span style="color: coral;">口中默念：某某氏门中列祖列宗在上，</span><br />
							<span style="color: coral;">今天某年某月某日，某某氏 字辈</span><br />
							<span style="color: coral;">（姓名 人）前来祭拜列祖列宗</span><br />
						</div>
					</van-col>
				</van-row>
				<br />
				<div style="margin: 16px;">
					<van-button round block type="warning" @click="toNext()">
						下一步
					</van-button>
				</div>
			</van-tab>
			<van-tab title="上供">
				<br />
				<van-image style="width: 100%; height: 18rem; background-color: #eeeeee;" fit="cover" position="left"
					:src="getImageUrl('image/fete1.png')"></van-image>
				<br />
				<van-image style="width: 100%; height: 8rem; background-color: #eeeeee;" fit="cover" position="left"
					:src="getImageUrl('image/fete2.png')" />
				<br />
				<div style="margin: 16px;">
					<van-button round block type="warning" @click="toNext()">
						下一步
					</van-button>
				</div>
			</van-tab>
			<van-tab title="家风祖训">
				<br />
				<div style="color: coral;background-image: getImageUrl('image/fete1.png');">
					<span>积善之家，必有余庆；积不善之家，必有余殃。</span><br />
				</div>
				<van-image style="width: 100%; height: 8rem; background-color: #eeeeee;" fit="cover" position="left"
					:src="getImageUrl('image/fete3.png')" />
				<br />
				<van-image style="width: 100%; height: 8rem; background-color: #eeeeee;" fit="cover" position="left"
					:src="getImageUrl('image/fete3.png')" />
				<br />
				<div style="margin: 16px;">
					<van-button round block type="warning" @click="toNext()">
						下一步
					</van-button>
				</div>
			</van-tab>
			<van-tab title="上香">
				<br />
				<van-image style="width: 100%; height: 18rem; background-color: #eeeeee;" fit="cover" position="left"
					:src="getImageUrl('image/fete1.png')"></van-image>
				<br />
				<van-image style="width: 100%; height: 20%; background-color: #eeeeee;" fit="cover" position="left"
					:src="getImageUrl('image/fete4.png')" />
				<br />
				<div style="margin: 16px;">
					<van-button round block type="warning" @click="toNext()">
						下一步
					</van-button>
				</div>
			</van-tab>
			<van-tab title="磕头">
				<br />
				<van-image style="width: 100%; height: 18rem; background-color: #eeeeee;" fit="cover" position="left"
					:src="getImageUrl('image/fete1.png')"></van-image>
				<br />
				<van-image style="width: 100%; height: 20%; background-color: #eeeeee;" fit="cover" position="left"
					:src="getImageUrl('image/fete5.png')" />
				<br />
				<div style="margin: 16px;">
					<van-button round block type="warning" @click="toNext()">
						下一步
					</van-button>
				</div>
			</van-tab>
			<van-tab title="礼毕">
				<br />
				<van-image style="width: 100%; height: 18rem; background-color: #eeeeee;" fit="cover" position="left"
					:src="getImageUrl('image/fete1.png')" />
				<br />
				<van-row justify="left" align="left" style="text-align: left;">
					<van-col span="20" offset="4">
						<div>
							<span style="color: coral;">口中默念：某某人祭拜完毕，祈请列
							</span><br />
							<span style="color: coral;">祖列宗护佑后人家业兴旺、事业发达、</span><br />
							<span style="color: coral;">学业有成，身体健康、和睦顺遂。</span><br />
							<span style="color: coral;">后人愿将所有的福德善业回向给某某氏</span><br />
							<span style="color: coral;">门中列祖列宗，祝愿列祖列宗早生净土、</span><br />
							<span style="color: coral;">早日成就。</span><br />
						</div>
					</van-col>
				</van-row>
				<br />
				<div style="margin: 16px;">
					<van-button round block type="warning">
						完成祭祀
					</van-button>
				</div>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	const router = useRouter();

	const active = ref(0);
	const list = ref([{
			id: 0,
			name: '曾祖辈'
		},
		{
			id: 1,
			name: '祖父辈'
		},
		{
			id: 2,
			name: '父辈'
		},
		{
			id: 3,
			name: '平辈'
		}

	]);


	function toNext() { //点击事件
		active.value++;
	}

	const getImageUrl = (name) => {
		return new URL(`/src/assets/${name}`, import.meta.url).href
	}
</script>

<style lang="scss">
	.nav {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #e2f2f2;
		font-size: 30rpx;
		// color: orange;
		letter-spacing: 2.14rpx;
	}

	.nav-list {
		width: 100rpx;
		height: 100%;
		margin-top: 40rpx;
		opacity: .9;
	}

	.nav-list .name {
		color: blue;
	}

	.nav-list .line {
		margin-top: 10rpx;
		width: 100rpx;
		height: 4rpx;
		background-color: blue;
	}

	/* 内容 */
	.content {
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 30rpx;
	}
</style>