<template>
	<view class="lotterypage">
		<span class="lotterypagebg"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
		
		<div class="lotterypageturntable">
			<span class="lotterypageturntablebg"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.turnTableBg)})` }"></span>
			<span class="lotterypageturntablelogo"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.turnTableLogo)})` }"></span>
			
			<div class="lotterypageturntableawards">
				<div class="lotterypageturntableawards6">
					<span class="lotterypageturntableawards6bg"
						:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awards6Bg)})` }"></span>
					<span class="lotterypageturntableawards6name">{{ config.awards[5].name }}</span>
				</div>
				<div class="lotterypageturntableawards5">
					<span class="lotterypageturntableawards5bg"
						:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awards5Bg)})` }"></span>
					<span class="lotterypageturntableawards5name">{{ config.awards[4].name }}</span>
				</div>
				<div class="lotterypageturntableawards4">
					<span class="lotterypageturntableawards4bg"
						:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awards4Bg)})` }"></span>
					<span class="lotterypageturntableawards4name">{{ config.awards[3].name }}</span>
				</div>
				<div class="lotterypageturntableawards3">
					<span class="lotterypageturntableawards3bg"
						:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awards3Bg)})` }"></span>
					<span class="lotterypageturntableawards3name">{{ config.awards[2].name }}</span>
				</div>
				<div class="lotterypageturntableawards2">
					<span class="lotterypageturntableawards2img"
						:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awards2Img)})` }"></span>
					<span class="lotterypageturntableawards2name">{{ config.awards[1].name }}</span>
				</div>
				<div class="lotterypageturntableawards1">
					<span class="lotterypageturntableawards1img"
						:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awards1Img)})` }"></span>
					<span class="lotterypageturntableawards1name">{{ config.awards[0].name }}</span>
				</div>
			</div>
		</div>
		
		<span class="lotterypagetitle"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.title)})` }"></span>
		<span class="lotterypagerulebtn"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.ruleBtn)})` }"
			@click="handleRuleClick"></span>
		<span class="lotterypageawardbtn"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awardBtn)})` }"
			@click="handleAwardClick"></span>
		
		<div class="lotterypagenoticecon">
			<span class="lotterypagenoticeconbg"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.noticeConBg)})` }"></span>
			<span class="lotterypagenoticecontext">{{ currentNotice }}</span>
			<span class="lotterypagenoticeconsoundicon"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.noticeConSoundIcon)})` }"
				@click="toggleSound"></span>
		</div>
		
		<span class="lotterypagedrawbtn"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.drawBtn)})` }"
			@click="handleDrawClick"
			:class="{ 'disabled-draw-btn': !canDraw }"></span>
		<span class="lotterypagelefttimes">剩余次数：{{ remainingTimes }}</span>

		<!-- 规则弹窗 -->
		<RuleModal 
			:visible="showRuleModal" 
			@close="handleRuleModalClose" 
		/>

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

		<!-- 抽奖失败弹窗 -->
		<DrawFailModal 
			:visible="showDrawFailModal" 
			@close="handleDrawFailModalClose"
			@i-know="handleIKnow"
		/>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { lotteryConfig, getImageUrl } from './config.js'
import RuleModal from './components/ruleModal/ruleModal.vue'
import DrawSucModal from './components/drawSucModal/drawSucModal.vue'
import DrawFailModal from './components/drawFailModal/drawFailModal.vue'

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

// 响应式数据
const currentState = ref('normal') // 页面状态
const remainingTimes = ref(1) // 剩余抽奖次数
const isSoundOn = ref(true) // 声音开关
const currentNotice = ref('用户152****8839 获得了 XXXXXX') // 当前公告

// 弹窗状态
const showRuleModal = ref(false) // 规则弹窗
const showDrawSucModal = ref(false) // 抽奖成功弹窗
const showDrawFailModal = ref(false) // 抽奖失败弹窗
const currentAwardName = ref('') // 当前中奖奖品名称

// 配置对象
const config = lotteryConfig

// 计算属性 - 是否可以抽奖
const canDraw = computed(() => {
	return remainingTimes.value > 0 && currentState.value === 'normal'
})

// 规则按钮点击处理
const handleRuleClick = () => {
	console.log('点击规则按钮')
	showRuleModal.value = true
}

// 规则弹窗关闭处理
const handleRuleModalClose = () => {
	showRuleModal.value = false
}

// 奖品按钮点击处理
const handleAwardClick = () => {
	console.log('点击奖品按钮')
	uni.showToast({
		title: '奖品列表',
		icon: 'none'
	})
}

// 声音开关处理
const toggleSound = () => {
	isSoundOn.value = !isSoundOn.value
	uni.showToast({
		title: isSoundOn.value ? '声音已开启' : '声音已关闭',
		icon: 'none'
	})
}

// 抽奖按钮点击处理
const handleDrawClick = () => {
	if (!canDraw.value) {
		uni.showToast({
			title: '抽奖次数已用完',
			icon: 'none'
		})
		return
	}

	console.log('开始抽奖')
	// 这里可以添加抽奖逻辑
	uni.showLoading({
		title: '抽奖中...',
		mask: true
	})

	// 模拟抽奖过程
	setTimeout(() => {
		uni.hideLoading()
		remainingTimes.value--
		
		// 随机选择一个奖品
		const randomIndex = Math.floor(Math.random() * config.awards.length)
		const award = config.awards[randomIndex]
		
		// 根据奖品概率判断是否中奖
		const isWin = Math.random() < award.probability
		
		if (isWin) {
			// 中奖
			currentAwardName.value = award.name
			showDrawSucModal.value = true
		} else {
			// 未中奖
			showDrawFailModal.value = true
		}
	}, 2000)
}

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

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

// 抽奖失败弹窗关闭处理
const handleDrawFailModalClose = () => {
	showDrawFailModal.value = false
}

// 我知道了处理
const handleIKnow = () => {
	console.log('点击我知道了')
	showDrawFailModal.value = false
	uni.showToast({
		title: '下次再来试试吧',
		icon: 'none'
	})
}

// 生命周期
onMounted(() => {
	console.log('抽奖页面已加载')
	// 这里可以加载用户抽奖次数等信息
})
</script>

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