<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, watch } from 'vue';
import { jump, JumpType } from '../../utils';
import md from '../../md.js';
// Props 定义
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	inviteCount: {
		type: Number,
		default: 1
	},
	prizeName: {
		type: String,
		default: '奖品名称奖品名称'
	},
	prizeImage: {
		type: String,
		default: ''
	},
	prizeType: {
		type: String,
		default: ''
	},
	memberId: {
		type: String,
		default: ''
	}
});

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

// 监听 visible 值的变化
watch(() => props.visible, (newVal, oldVal) => {
	console.log('InvitePrizePanel visible 值变化:', { newVal, oldVal });
	
	// 当 visible 变为 true 时执行埋点
	if (newVal) {
		md.sensorPopLogTake({
			xcxPopExposure: "true",
			toolName: "邀请组件",
			popName: "邀请成功弹窗"
		});
	}
});

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

// 查看邀请记录按钮点击事件
const handleRecordClick = () => {
	md.sensorPopLogTake({
		xcxPopClick: "true",
		toolName: "邀请组件",
		popName: "邀请成功弹窗",
		buttonName: "查看邀请明细"
	});

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

// 查看奖品按钮点击事件
const handlePrizeClick = () => {
	md.sensorPopLogTake({
		xcxPopClick: "true",
		toolName: "邀请组件",
		popName: "邀请成功弹窗",
		buttonName: "查看奖品"
	});

	console.log('查看奖品按钮点击');
	if(props.prizeType === 'credits') {
		const urlStr = 'https://mom.feihe.com/member/mine/newPointDetail?crmId={crmid}&appCode=XMH';
		const url = urlStr.replace("{crmid}", props.memberId);
		console.log('积分明细链接：==', url)

		jump({
			type: 3,
			url: url
		})
	} else {
		jump({
			type: 2,
			url: '/subPackages/xmhMainProcess/mine/index',
			extra: { envVersion: "release", appId: "wx4205ec55b793245e"}//, embedded: true }
		});
	}
	emit('prize');
};
</script>

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