<template>
	<view class="invite_gift_container" :class="`item-${itemIndex}`">
		<!-- 主标题 -->
		<text class="invite_gift_title" :class="`item-${itemIndex}`">邀请得好礼</text>
		
		<!-- 邀请卡片 -->
		<view class="invite_card" :class="`item-${itemIndex}`">
			<!-- 卡片内容区域 -->
			<view class="card_content">
				<!-- 卡片标题 -->
				<text class="card_title" :class="`item-${itemIndex}`">邀请好友注册得好礼</text>
				
				<!-- 描述文字 -->
				<text class="card_description" :class="`item-${itemIndex}`">成功邀请一位好友注册即可获得XXX</text>
				
				<!-- 去邀请按钮 -->
				<button class="invite_button" :class="`item-${itemIndex}`" @tap="handleInviteClick" open-type="share">
					<text class="invite_button_text">去邀请</text>
				</button>
			</view>
			<!-- 3D星星角色 -->
			<view class="star_character">
				<image 
					class="star_img" 
					:src="$baseUrl + 'integral/1023/invate_star_character1023.png'" 
					mode="aspectFit"
				/>
			</view>
			<!-- 邀请记录按钮 -->
			<view class="record_button" :class="`item-${itemIndex}`" @click="handleRecordClick">
				<text class="record_text" :class="`item-${itemIndex}`">邀请记录</text>
				<image class="record_arrow" :class="`item-${itemIndex}`" :src="$baseUrl + 'integral/1023/yaoqingjiluIcon.png'" mode="aspectFit" />
			</view>
			
			<!-- 3D星星角色 -->
			<!-- <view class="star_character">
				<image 
					class="star_img" 
					:src="$baseUrl + 'integral/1023/star_character.png'" 
					mode="aspectFit"
				/>
			</view> -->
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits, onMounted } from 'vue';

// Props 定义
const props = defineProps({
	itemIndex: {
		type: Number,
		default: 0
	}
});

// Emits 定义
const emit = defineEmits(['invite', 'record']);

// 在 onMounted 中打印 itemIndex
onMounted(() => {
	console.log('InviteGift itemIndex:', props.itemIndex);
});

// 去邀请按钮点击事件
const handleInviteClick = () => {
	console.log('去邀请按钮点击');
	
	emit('invite');
};



// 邀请记录按钮点击事件
const handleRecordClick = () => {
	console.log('邀请记录按钮点击');
	emit('record');
};
</script>

<!-- <script>
// 微信小程序分享配置 - 使用 Options API
export default {

	// 分享配置
	onShareAppMessage() {
		return {
			title: '积分分享',
			path: '/pages/invate/sharepage',
			imageUrl: 'https://course.feihe.com/momclub-picture/integral/1023/invate_star_character1023.png'
		};
	}
}
</script> -->
<style lang="less" scoped>
@import '@/components/integralArea/InviteGift.less';
</style>
