<template>
	<view class="invite_prize_panel_overlay" v-if="visible" @click="handleClose">
		<view class="invite_prize_panel_container" @click.stop>
			<!-- 弹窗内容 -->
			<view class="panel_content">
				<!-- 主标题 -->
				<text class="panel_title">恭喜您成功邀请{{ inviteCount }}位好友注册</text>
				
				<!-- 奖品图片区域 -->
				<view class="prize_image_area">
					<image 
						class="prize_image" 
						:src="prizeImage || $baseUrl + 'integral/1023/invate_star_character1023.png'" 
						mode="aspectFit"
					/>
				</view>
				
				<!-- 奖品名称 -->
				<text class="prize_name">{{ prizeName || '奖品名称奖品名称' }}</text>
				
				<!-- 按钮区域 -->
				<view class="button_area">
					<!-- 查看邀请记录按钮 -->
					<view class="record_button" @click="handleRecordClick">
						<text class="record_button_text">查看邀请记录</text>
					</view>
					
					<!-- 查看奖品按钮 -->
					<view class="prize_button" @click="handlePrizeClick">
						<text class="prize_button_text">查看奖品</text>
					</view>
				</view>
			</view>
			
			<!-- 关闭按钮 -->
			<view class="close_button" @click="handleClose">
				<text class="close_icon">×</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import { jump } from '../../utils';

// Props 定义
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	inviteCount: {
		type: Number,
		default: 1
	},
	prizeName: {
		type: String,
		default: '奖品名称奖品名称'
	},
	prizeImage: {
		type: String,
		default: ''
	}
});

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

// 关闭弹窗
const handleClose = () => {
	emit('close');
};

// 查看邀请记录按钮点击事件
const handleRecordClick = () => {
    jump({
        type: 1,
        url: '/pages/invate/invaterecords'
    });
	console.log('查看邀请记录按钮点击');
	emit('record');
};

// 查看奖品按钮点击事件
const handlePrizeClick = () => {
	console.log('查看奖品按钮点击');
	emit('prize');
};
</script>

<style lang="less" scoped>
@import '@/components/integralArea/InvitePrizePanel.less';
</style>
