<template>
	<div class="container">
		<van-row>
			<van-col span="24">
				<van-image style="width: 100%; height: 18rem; background-color: #eeeeee;" fit="cover" position="left"
					:src="getImageUrl(images[0])" />
			</van-col>
		</van-row>
		<van-row class="grid">
			<van-col span="24">
				<van-grid column-num="3" :border="false">
					<van-grid-item :key="index" v-for="(item, index) in award" :icon="getImageUrl(item.img)"
						:text="item.name" :url="item.url" @click="previewImage(item.url)">
					</van-grid-item>
				</van-grid>

			</van-col>
		</van-row>
		<van-row>
			<van-col span="24">
				<van-image style="width: 100%; height: 18rem; background-color: #eeeeee;" fit="cover" position="left"
					:src="getImageUrl(images[2])" />
			</van-col>
		</van-row>
	</div>
</template>

<script setup>
	import {
		onMounted,
		ref,
		computed
	} from 'vue';

	import {
		LoadUserInfoAPI,
		LoadRegAPI,
		EditRegAPI,
	} from '../../services/index.js';

	import {
		setToken,
		getToken,
		removeToken,
		setUserinfo,
		getUserinfo,
		getReginfo,
		setReginfo,		
		setUsername,
		getUsername,
		setOpenid,
		getOpenid
	} from "../../utils/wxtools.js";

	import {
		useRouter
	} from "vue-router";

	const router = useRouter()

	const images = ref(["image/sacrifice1.png", "image/sacrifice2.png", "image/sacrifice3.png"]);

	//chance中奖率   
	const award = ref([{
			img: 'image/menu1.png',
			url: '/ancestralHall#/ancestralHall',
			name: '祠堂管理',
			chance: 0,
			tips: '',
		},
		{
			img: 'image/menu2.png',
			url: '/genealogy#/genealogy',
			name: '宗谱',
			chance: 100,
			tips: '',
		},
		{
			img: 'image/menu3.png',
			url: '/photoAlbum#/photoAlbum',
			name: '相册',
			chance: 0,
			tips: '',
		},
		{
			img: 'image/menu3.png',
			url: '/family#/family',
			name: '家风',
			chance: 0,
			tips: '',
		},
		{
			img: 'image/menu3.png',
			url: '/gaya#/gaya',
			name: '祖训',
			chance: 0,
			tips: '',
		},
		{
			img: 'image/menu4.png',
			url: '/fete#/fete',
			name: '祭祀',
			chance: 0,
			tips: '提示',
		}
	]);

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

	function previewImage(url) {
		// 预览图片
		console.log(url)
	}

	onMounted(async () => {
		const reg = await LoadRegAPI();
		setReginfo(reg.result);
		setOpenid(reg.result.openid);
		const user = await LoadUserInfoAPI();

		//跳转注册
		if (reg.result.status === "0" && !(reg.result.mobile === null || reg.result.mobile === "")) {
			router.push("/check");
		} else if (reg.result.mobile === null || reg.result.mobile === "") {
			router.push("/reg");
		} else {

		}
		console.log(reg);
	})
</script>

<style lang="scss">
	.grid {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		border-top: 2upx solid rgba(172, 172, 172, .2);
		width: 100%;
		// min-height: 2200upx;
		min-height: 200px;
		// background-color: #136eb7;		
		background: url("/src/assets/image/sacrifice2.png") no-repeat;
		background-size: 100% 100%;
	}

	/* 添加这段样式后，Primary Button 会变成红色 */
	:root:root {
		--van-grid-item-content-background: rgb(0, 0, 0, 0);
		--van-grid-item-icon-size: 44px;
		--van-grid-item-text-font-size: 14px;
		--van-grid-item-text-color: white;
	}
</style>