<template>
	<view class="act915page" v-if="!loading">
		<span class="act915pagebg" :style="getBackgroundStyle()"></span>
		<span class="act915pagegoods1" :style="{ backgroundImage: `url(${$baseUrl}${getImageUrl('goods1')})` }"
			@click="handleGoods1Click"></span>
		<!-- 商品3区域 - 分成3个点击区域 -->
		<view class="act915pagegoods3-container">
			<span class="act915pagegoods3bg"
				:style="{ backgroundImage: `url(${$baseUrl}${getGoodsImage('goods3')})` }"></span>

			<!-- 三个商品点击区域 -->
			<view class="act915pagegoods3products">
				<!-- 商品1 - 左侧 -->
				<view class="act915pagegoods3product product-left" @click="handleGoods3Click(1)"></view>

				<!-- 商品2 - 中间 -->
				<view class="act915pagegoods3product product-center" @click="handleGoods3Click(2)"></view>

				<!-- 商品3 - 右侧 -->
				<view class="act915pagegoods3product product-right" @click="handleGoods3Click(3)"></view>
			</view>
		</view>
		<!-- 商品列表2区域 - 分成6个点击区域 -->
		<view class="act915pagegoodslist2-container">
			<span class="act915pagegoodslist2bg"
				:style="{ backgroundImage: `url(${$baseUrl}${getGoodsImage('goodslist2')})` }"></span>

			<!-- 6个商品点击区域 -->
			<view class="act915pagegoodslist2products">
				<!-- 商品1 - 第一行左侧 -->
				<view class="act915pagegoodslist2product product-1" @click="handleGoodsList2Click(1)"></view>

				<!-- 商品2 - 第一行中间 -->
				<view class="act915pagegoodslist2product product-2" @click="handleGoodsList2Click(2)"></view>

				<!-- 商品3 - 第一行右侧 -->
				<view class="act915pagegoodslist2product product-3" @click="handleGoodsList2Click(3)"></view>

				<!-- 商品4 - 第二行左侧 -->
				<view class="act915pagegoodslist2product product-4" @click="handleGoodsList2Click(4)"></view>

				<!-- 商品5 - 第二行中间 -->
				<view class="act915pagegoodslist2product product-5" @click="handleGoodsList2Click(5)"></view>

				<!-- 商品6 - 第二行右侧 -->
				<view class="act915pagegoodslist2product product-6" @click="handleGoodsList2Click(6)"></view>
			</view>
		</view>
		<!-- 商品列表1区域 - 分成6个点击区域 -->
		<view class="act915pagegoodslist1-container">
			<span class="act915pagegoodslist1bg"
				:style="{ backgroundImage: `url(${$baseUrl}${getGoodsImage('goodslist1')})` }"></span>

			<!-- 6个商品点击区域 -->
			<view class="act915pagegoodslist1products">
				<!-- 商品1 - 第一行左侧 -->
				<view class="act915pagegoodslist1product product-1" @click="handleGoodsList1Click(1)"></view>

				<!-- 商品2 - 第一行中间 -->
				<view class="act915pagegoodslist1product product-2" @click="handleGoodsList1Click(2)"></view>

				<!-- 商品3 - 第一行右侧 -->
				<view class="act915pagegoodslist1product product-3" @click="handleGoodsList1Click(3)"></view>

				<!-- 商品4 - 第二行左侧 -->
				<view class="act915pagegoodslist1product product-4" @click="handleGoodsList1Click(4)"></view>

				<!-- 商品5 - 第二行中间 -->
				<view class="act915pagegoodslist1product product-5" @click="handleGoodsList1Click(5)"></view>

				<!-- 商品6 - 第二行右侧 -->
				<view class="act915pagegoodslist1product product-6" @click="handleGoodsList1Click(6)"></view>
			</view>
		</view>

		<div class="act915pageinvitecon">
			<button class="act915pageinviteconbg" @click="handleInviteClick"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl('inviteConBg')})` }"
				open-type="share"></button>


			<div class="act915pageinviteconstatus">
				<!-- 根据邀请人数动态显示状态 -->
				<span v-if="invitedCount >= 1" class="act915pageinviteconstatusyes1"
					:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl('inviteConStatusYes1')})` }"></span>
				<span v-else class="act915pageinviteconstatusno1"
					:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl('inviteConStatusNo1')})` }"></span>

				<span v-if="invitedCount >= 2" class="act915pageinviteconstatusyes2"
					:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl('inviteConStatusYes2')})` }"></span>
				<span v-else class="act915pageinviteconstatusno2"
					:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl('inviteConStatusNo2')})` }"></span>
			</div>
		</div>

		<span class="act915pagelotterybanner"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl('lotteryBanner')})` }"
			@click="handleLotteryClick"></span>

		<!-- Banner轮播图 -->
		<swiper class="act915pagebanner" :indicator-dots="true" :autoplay="false" :circular="true" :interval="3000"
			:duration="500">
			<swiper-item v-for="(banner, index) in bannerList" :key="index" @click="handleBannerClick(index)">
				<image class="act915pagebanneritem" :src="$baseUrl + getBannerImage(banner)" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- Full screen mask for new users -->
		<view class="mask-background" v-if="showMask">
			<button class="auth-button" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">

			</button>
		</view>

		<!-- 抽奖成功弹窗 -->
		<DrawSucModal :visible="showDrawSucModal" :award-name="currentAwardName" @close="handleDrawSucModalClose"
			@happy-get="handleHappyGet" />
	</view>

</template>

<script setup>
import { ref, onMounted, computed, getCurrentInstance } from 'vue'
import { fetchAct915JSON, getAct915Home } from '@/api/activity0915/index.js'
import { useHomeStore } from '@/stores/home'; // Assuming homeStore path
import { useUserStore } from '@/stores/user'; // Import userStore
import { invitationAssist } from '@/api/activity0915/index.js'; // Import invitationAssist
import { jump } from '../../utils/index.js'; // Import jump function
import DrawSucModal from '../lottery/components/drawSucModal/drawSucModal.vue'; // Import DrawSucModal if needed

// 组件名称
defineOptions({
	name: 'Act915Page'
})



// 定义分享函数
const getShareData = (type) => {
	console.log('getShareData 被调用', type)
	const { proxy } = getCurrentInstance()
	const $baseUrl = proxy.$baseUrl
	const shareTitle = invitationText.value || '星妈会超级品牌周来啦！666积分兑换爱本纤纤3日装！'
	const shareImage = invitationImageUrl.value || $baseUrl + 'Act915Page/v2/act915ShareImg.png'

	const sharePath = type.from == 'button' ? `/activity0915/act0915/act0915?invitationCode=${invitationCode.value}` : `/activity0915/act0915/act0915`

	console.log('分享参数:', {
		title: shareTitle,
		imageUrl: shareImage,
		path: sharePath,
		invitationCode: invitationCode.value
	})

	return {
		title: shareTitle,
		path: sharePath,
		imageUrl: shareImage
	}
}



// 响应式数据
const currentState = ref('normal') // 页面状态
const config = ref({}) // 配置对象
const bannerList = ref([]) // Banner列表
const loading = ref(true) // 加载状态

// 邀请相关数据
const showMask = ref(false);
const showDrawSucModal = ref(false);
const currentAwardName = ref('');
const invitationCode = ref('');
const invitationText = ref('');
const invitationImageUrl = ref('');
const invitedCount = ref(0);
const nextRewardNeedCount = ref(2);
const unclaimedPrizes = ref([]);
const receivedPrizes = ref([]);
const isLogin = ref(false);

// 获取store实例
const homeStore = useHomeStore();
const userStore = useUserStore();



// 获取背景样式的辅助函数
const getBackgroundStyle = () => {
	const backgroundImage = getImageUrl('background')
	if (backgroundImage) {
		// 获取全局属性
		const { proxy } = getCurrentInstance()
		const $baseUrl = proxy.$baseUrl
		return {
			backgroundImage: `url(${$baseUrl}${backgroundImage})`
		}
	} else {
		// 如果背景图片不存在，使用渐变背景
		return {
			background: `linear-gradient(to bottom, ${config.value?.background?.color}, ${config.value?.background?.color2})`
		}
	}
}

// 商品1区域点击处理
const handleGoods1Click = () => {
	console.log('点击商品1区域')
	jump(config.value?.goods?.goods1?.link)
}


// 获取图片URL的辅助函数
const getImageUrl = (imageKey) => {
	// 根据不同的图片类型从对应的结构中获取
	switch (imageKey) {
		case 'background':
			return config.value?.background?.image || ''
		case 'goods1':
			return config.value?.goods?.goods1?.image || ''
		case 'inviteConBg':
			return config.value?.invite?.image || ''
		case 'inviteConStatusNo2':
			return config.value?.invite?.inviteConStatusNo2Img || ''
		case 'inviteConStatusNo1':
			return config.value?.invite?.inviteConStatusNo1Img || ''
		case 'inviteConStatusYes2':
			return config.value?.invite?.inviteConStatusYes2Img || ''
		case 'inviteConStatusYes1':
			return config.value?.invite?.inviteConStatusYes1Img || ''
		case 'lotteryBanner':
			return config.value?.lottery?.image || ''
		default:
			// 兼容原有的结构
			if (config.value?.images?.[imageKey]) {
				return config.value.images[imageKey]
			}
			if (config.value?.config?.images?.[imageKey]) {
				return config.value.config.images[imageKey]
			}
			if (config.value && config.value[imageKey]) {
				return config.value[imageKey]
			}
			return ''
	}
}

// 获取Banner图片的辅助函数
const getBannerImage = (banner) => {
	// 如果是融合结构（包含 image 和 link）
	if (banner && typeof banner === 'object' && banner.image) {
		return banner.image
	}
	// 兼容原有的字符串结构
	return banner || ''
}

// 获取商品图片的辅助函数
const getGoodsImage = (goodsKey) => {
	// 从商品数据结构中获取图片
	const goodsData = config.value.goods?.[goodsKey]
	if (goodsData && goodsData.image) {
		return goodsData.image
	}
	// 兼容原有的 config.images 结构
	return getImageUrl(goodsKey)
}

// 获取配置数据
const fetchConfig = async () => {
	try {
		loading.value = true
		const response = await fetchAct915JSON()
		console.log('915活动配置数据:', response)

		if (response && response.data) {
			config.value = response.data
			// 设置Banner列表
			if (config.value.act915pagebanner && Array.isArray(config.value.act915pagebanner)) {
				// 检查是否是融合结构（包含 image 和 link）
				if (config.value.act915pagebanner[0] && typeof config.value.act915pagebanner[0] === 'object' && config.value.act915pagebanner[0].image) {
					bannerList.value = config.value.act915pagebanner
				} else {
					// 兼容原有的字符串数组结构
					bannerList.value = config.value.act915pagebanner
				}
			} else if (config.value.config?.images) {
				bannerList.value = [
					config.value.config.images.banner,
					config.value.config.images.banner2,
					config.value.config.images.banner3
				].filter(Boolean)
			}
		}
	} catch (error) {

	} finally {
		loading.value = false
	}
}

// 获取915活动首页信息
const fetchAct915HomeData = async () => {
	try {
		console.log('开始请求 getAct915Home 接口...')
		const response = await getAct915Home()
		console.log('getAct915Home 接口返回结果:', response)

		if (response && response.ok && response.data) {
			const data = response.data

			// 更新邀请相关数据
			invitationCode.value = data.invitationCode
			invitationText.value = data.invitationText
			invitationImageUrl.value = data.invitationImageUrl
			invitedCount.value = data.invitedCount || 0
			nextRewardNeedCount.value = data.nextRewardNeedCount || 2
			unclaimedPrizes.value = data.unclaimedPrizes || []
			receivedPrizes.value = data.receivedPrizes || []

			// 判断是否登录（根据notLogin字段或邀请码）
			isLogin.value = !data.notLogin

			console.log('邀请数据更新:', {
				invitationCode: invitationCode.value,
				invitedCount: invitedCount.value,
				nextRewardNeedCount: nextRewardNeedCount.value,
				unclaimedPrizesCount: unclaimedPrizes.value.length,
				isLogin: isLogin.value,
				notLogin: data.notLogin
			})
			// 检查是否有未领取的奖品需要弹窗
			if (unclaimedPrizes.value.length > 0) {
				showPrizeModal()
			}

			// 检查URL参数中的邀请码
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			const options = currentPage.options;
			const incomingCode = options.invitationCode;

			if (incomingCode) {
				console.log('检测到邀请码:', incomingCode)
				// 根据登录状态决定助力处理方式
				if (isLogin.value) {
					// 已登录用户直接调用助力接口
					console.log('用户已登录，直接调用助力接口')
					await handleInvitationAssist(incomingCode);
				} else {
					// 未登录用户需要先授权
					console.log('用户未登录，显示授权弹窗')
					showMask.value = true
				}
			} else {
				console.log('没有邀请码，检查是否需要显示授权弹窗（未登录用户）', incomingCode)
				// 没有邀请码，检查是否需要显示授权弹窗（未登录用户）
				if (data.notLogin || !isLogin.value) {
					showMask.value = true
				}
			}
		}

		return response
	} catch (error) {
		console.error('getAct915Home 接口请求失败:', error)
		return null
	}
}

// 显示奖品弹窗
const showPrizeModal = () => {
	if (unclaimedPrizes.value.length > 0) {
		// 计算总奖品数量
		const totalQuantity = unclaimedPrizes.value.reduce((sum, prize) => sum + (prize.quantity || 1), 0)
		const firstPrize = unclaimedPrizes.value[0]
		currentAwardName.value = `${firstPrize.prizeName} × ${totalQuantity}`
		showDrawSucModal.value = true
	}
}

const handleLotteryClick = () => {
	// 从配置中获取抽奖banner链接
	const lotteryLink = config.value?.lottery?.link
	if (lotteryLink) {
		jump(lotteryLink)
	} else {
		uni.navigateTo({
			url: '/activity0915/lottery/lottery'
		})
	}
}


// 商品3区域点击处理
const handleGoods3Click = (productId) => {
	console.log('点击商品3区域商品:', productId)

	// 从配置中获取商品信息
	const goods3Data = config.value.goods?.goods3
	const goods3List = goods3Data?.items || []
	const product = goods3List.find(item => item.id === productId)

	if (product && product.link) {
		// 直接处理跳转链接
		jump(product.link)
	} else {
		// 使用默认处理
		// uni.showToast({
		// 	title: `商品${productId}暂无跳转链接`,
		// 	icon: 'none'
		// })
	}
}

// 商品列表1区域点击处理
const handleGoodsList1Click = (productId) => {
	console.log('点击商品列表1区域商品:', productId)

	// 从配置中获取商品信息
	const goodsList1Data = config.value.goods?.goodslist1
	const goodsList1 = goodsList1Data?.items || []
	const product = goodsList1.find(item => item.id === productId)

	if (product && product.link) {
		// 直接处理跳转链接
		jump(product.link)
	} else {
		// // 使用默认处理
		// uni.showToast({
		// 	title: `商品列表1-商品${productId}暂无跳转链接`,
		// 	icon: 'none'
		// })
	}
}

// 商品列表2区域点击处理
const handleGoodsList2Click = (productId) => {
	console.log('点击商品列表2区域商品:', productId)

	// 从配置中获取商品信息
	const goodsList2Data = config.value.goods?.goodslist2
	const goodsList2 = goodsList2Data?.items || []
	const product = goodsList2.find(item => item.id === productId)

	if (product && product.link) {
		// 直接处理跳转链接
		jump(product.link)
	} else {
		// 使用默认处理
		// uni.showToast({
		// 	title: `商品列表2-商品${productId}暂无跳转链接`,
		// 	icon: 'none'
		// })
	}
}


// Banner点击处理
const handleBannerClick = (index) => {
	console.log('点击Banner:', index)

	// 获取当前Banner数据
	const currentBanner = bannerList.value[index]

	// 如果是融合结构（包含 image 和 link）
	if (currentBanner && typeof currentBanner === 'object' && currentBanner.link) {
		jump(currentBanner.link)
	} else {
		// 兼容原有的分离结构
		const bannerLinks = config.value.links?.banner
		if (bannerLinks && bannerLinks[index]) {
			jump(bannerLinks[index])
		} else {
			// uni.showToast({
			// 	title: `Banner ${index + 1} 暂无跳转链接`,
			// 	icon: 'none'
			// })
		}
	}
}

// 处理邀请助力的通用函数
const handleInvitationAssist = async (incomingCode) => {
	try {
		console.log('处理助力邀请码:', incomingCode)
		const unionId = uni.getStorageSync('unionId');
		const res = await invitationAssist(incomingCode, unionId);
		if (res && res.success) {
			uni.showToast({
				title: '助力成功',
				icon: 'success',
				duration: 2000
			});
			// 助力成功后重新获取数据
			await fetchAct915HomeData();
			return Promise.resolve();
		} else {
			uni.showToast({
				title: res.message,
				icon: 'none',
				duration: 2000
			});
			return Promise.reject();
		}
	} catch (error) {
		console.error('助力请求失败:', error)
		uni.showToast({
			title: error.message,
			icon: 'none',
			duration: 2000
		});
		return Promise.reject();
	}
}

// 邀请按钮点击处理
const handleInviteClick = () => {
	console.log('点击邀请按钮')

	// 检查是否登录
	if (!isLogin.value) {
		// 未登录用户需要先授权
		showMask.value = true
		return
	}
}

// 页面初始化逻辑
const initPage = async () => {
	console.log('开始初始化页面...')

	// 获取页面配置
	await fetchConfig()
	console.log('Banner列表:', bannerList.value)
	console.log('配置数据:', config.value)

	// 请求 getAct915Home 接口（包含助力逻辑处理）
	await fetchAct915HomeData();
}

// 生命周期
onMounted(async () => {
	console.log('915活动页面已加载')

	// 先进行自动登录获取基础信息，登录成功后执行页面初始化
	try {
		console.log('开始执行 normalAutoLogin...')
		await userStore.normalAutoLogin(initPage)
		console.log('normalAutoLogin 完成')
	} catch (error) {
		console.error('normalAutoLogin 失败:', error)
		// 即使登录失败也执行页面初始化
		await initPage()
	}

	// 先隐藏朋友圈分享
	uni.hideShareMenu({
		menus: ['shareTimeline']
	})

	// 显示分享菜单
	uni.showShareMenu({
		withShareTicket: true,
		menus: ['shareAppMessage']
	});
});

// Phone authorization
const onGetPhoneNumber = async (e) => {
	if (e.detail.errMsg === 'getPhoneNumber:ok') {
		try {
			// 隐藏授权弹窗
			showMask.value = false;

			// 重新获取用户信息（登录后）
			await fetchAct915HomeData();

			// 检查是否有邀请码需要处理助力
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			const options = currentPage.options;
			const incomingCode = options.invitationCode;

			if (incomingCode) {
				// 使用统一的助力处理函数
				await handleInvitationAssist(incomingCode);
			}
		} catch (error) {
			console.error('授权后处理失败:', error)
			uni.showToast({ title: '授权失败', icon: 'none' });
		}
	} else {
		uni.showToast({ title: '授权失败', icon: 'none' });
	}
};

// 处理蒙层点击
const handleMaskClick = () => {
	showMask.value = false;
};

// 抽奖成功弹窗关闭处理
const handleDrawSucModalClose = () => {
	console.log('关闭抽奖成功弹窗');
	showDrawSucModal.value = false;
};

// 开心领取处理
const handleHappyGet = () => {
	console.log('点击开心领取');
	showDrawSucModal.value = false;
	// uni.showToast({
	// 	title: '奖品领取成功',
	// 	icon: 'success'
	// });
};

// 暴露给 Options API 使用
defineExpose({
	getShareData
})
</script>

<style lang="less" scoped>
@import './act915page.less';
</style>

<script>
// 微信小程序分享配置 - 使用 Options API
export default {
	// 自定义分享内容
	onShareAppMessage(type) {
		console.log('onShareAppMessage 被调用', type)
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const pageInstance = currentPage.$vm
		return pageInstance.getShareData(type)
	},

	// 朋友圈分享已禁用
	// onShareTimeline() {
	// 	console.log('onShareTimeline 被调用')
	// 	// 朋友圈分享功能已禁用
	// 	return null
	// }
}
</script>
