<!-- 福利 -->

<template>
	<page-container title="福利">
		<banner :type-id="6" :height="326"></banner>
		<view class="grid-container" style="padding: 0 32rpx; margin-top: 40rpx;">
			<view class="grid-item" v-for="(item, index) in list" :key="item.id" @click="toPage(item)"
				style="height: 184rpx;">
				<image v-if="item.image" :src="item.image" mode="aspectFill" class="grid-item-bg"></image>
				<text v-if="!item.image">{{ item.name }}</text>
			</view>
		</view>
	</page-container>
</template>

<script>
import { getWelfareMenuList } from '@/common/server/welfare.js';
import PageContainer from '@/components/page-container/page-container.vue'

export default {
	components: {
		PageContainer
	},
	data() {
		return {
			list: []
		}
	},
	onShareAppMessage() {
		let imageUrl = this.$config.getShareImageUrl();
		// 使用小写 id，兼容新版 .NET API
		const userinfo = uni.getStorageSync('userinfo') || {};
		const pid = userinfo.id || userinfo.ID || '';
		return {
			imageUrl: imageUrl,
			title: this.$config.getAppSetting('share_title') || "哈尼盲盒上线,来就送！",
			path: '/pages/shouye/index?pid=' + pid
		}
	},
	methods: {
		// 获取福利屋菜单列表
		async getWelfareList() {
			// API: welfare_house_list
			const res = await getWelfareMenuList();
			if (res.status === 1 && res.data) {
				this.list = res.data;
			} else {
				uni.showToast({
					title: res.msg || '获取福利列表失败',
					icon: 'none'
				});
			}
		},

		//跳转页面
		toPage(item) {
			if (item.url) {
				console.log(item);
				uni.setStorageSync('fuliwu_title', item.name)
				this.$customRouter.navigateTo(item.url);
				// this.$c.to({
				// 	type:1,
				// 	url: item.url,

				// });
			}
		}
	},
	onShow() {
		this.current = 0
		const curPages = getCurrentPages()[0]; // 获取当前页面实例
		if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
			this.$mp.page.getTabBar().setData({
				selected: 1
			});
		}
	},
	onLoad() {
		this.getWelfareList();
	}
}
</script>

<style lang="scss">
.grid-container {
	display: grid;
	grid-template-columns: repeat(2, 324rpx);
	/* 三列，每列宽度相等 */
	gap: 40rpx 42rpx;
	/* 网格之间的间隔 */
	animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.grid-item {
	position: relative;

	text-align: center;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	animation-fill-mode: both;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	&::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		transform: translate(-50%, -50%) scale(0);
		opacity: 0;
		transition: transform 0.6s ease-out, opacity 0.6s ease-out;
	}

	&:active::after {
		transform: translate(-50%, -50%) scale(2);
		opacity: 0;
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.8);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.grid-item-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	transition: transform 0.3s ease;
}

.grid-item text {
	z-index: 2;
	color: #333;
	font-size: 28rpx;
	transition: all 0.3s ease;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

// 为每个网格项添加延迟动画
.grid-item {
	@for $i from 1 through 10 {
		&:nth-child(#{$i}) {
			animation-delay: #{$i * 0.1}s;
		}
	}
}
</style>