<!--主页面-->
<template>
    <view class="container">
        <!-- 根据当前显示模式显示不同背景 -->
        <image class="bg" 
            v-if="!showCompleteComponent" 
            :src="currentBg" 
            mode="aspectFill" 
        />
        <image class="bg" 
            v-else 
            src="/static/game-one/completeBg.png" 
            mode="aspectFill" 
        />

        <!-- 顶部标题容器 -->
        <view class="top">
            <image class="topTitle" :src="currentTitle" mode="aspectFill"></image>
        </view>

        <!-- 根据当前阶段显示不同内容 -->
        <template v-if="currentStage === 'garbageCleanup' && !showCompleteComponent">
            <!-- 垃圾清理组件 -->
            <garbage-cleanup-zone 
                @all-cleared="onGarbageAllCleared"
                @show-purification="showPurificationValueEffect"
            />
        </template>

        <template v-else-if="currentStage === 'oilFilmSeparation' && !showCompleteComponent">
            <!-- 油膜分离组件 -->
            <oil-film-separation-zone 
                ref="oilFilmZoneRef"
                @stage-complete="onOilSeparationComplete"
            />
        </template>

        <template v-else-if="currentStage === 'acidBaseNeutralization' && !showCompleteComponent">
            <!-- 酸碱中和组件 -->
            <select-reagents 
                ref="acidBaseZoneRef"
                @stage-complete="onAcidBaseNeutralizationComplete"
            />
        </template>

        <!-- 完成后的组件（显示在completeBg上） -->
        <template v-if="showCompleteComponent">
            <complete-component />
        </template>

        <!-- 净化值显示区域 -->
        <view class="purificationValue" :class="{ show: showPurificationValue }">
            <image class="purificationValueImg" src="/static/game-one/purificationValue.png" mode="aspectFill"></image>
        </view>

        <!-- 完成弹窗 - 全屏覆盖 -->
        <view class="completion-modal" v-if="showCompletionModal" @click="closeCompletionModal">
            <image class="modal-image"
                src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d204d71cf2a54b18a6404e6132618cd6%E5%AE%8C%E6%88%90%E5%BC%B9%E7%AA%97.webp"
                mode="scaleToFill" />
        </view>

        <!-- 底部内容（始终显示） -->
        <view class="bottomContent">
            <view class="progress">
                <image :src="currentProgress" class="progressPic" />
            </view>
            <view class="nextStep" @click="handleNextStep">
                <image src="/static/game-one/nextStep.png" class="nextStepPic"
                    :class="{ disabled: !isNextStepEnabled }" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import GarbageCleanupZone from './components/garbageCleanup.vue'
import OilFilmSeparationZone from './components/oilFilmSeparationZone.vue'
import SelectReagents from './components/selectReagents.vue'
import CompleteComponent from './components/complete.vue'

// 当前游戏阶段
const currentStage = ref('garbageCleanup')

// 各阶段完成状态
const isGarbageCleaned = ref(false)
const isOilSeparationComplete = ref(false)
const isAcidBaseNeutralizationComplete = ref(false)

// 其他状态
const showPurificationValue = ref(false)
const showCompletionModal = ref(false)
const showCompleteComponent = ref(false)

// 引用子组件
const oilFilmZoneRef = ref(null)
const acidBaseZoneRef = ref(null)

// 根据当前阶段计算使用的资源
const currentBg = computed(() => {
    switch (currentStage.value) {
        case 'garbageCleanup':
            return '/static/game-one/oneBackground.png'
        case 'oilFilmSeparation':
            return '/static/game-one/oilBackground.png'
        case 'acidBaseNeutralization':
            return '/static/game-one/reagentsBackground.png'
        default:
            return '/static/game-one/oneBackground.png'
    }
})

const currentTitle = computed(() => {
    return '/static/game-one/oneTitle.png'
})

// 进度条图片
const currentProgress = computed(() => {
    if (showCompleteComponent.value) {
        // 显示complete组件时，进度条用第三阶段
        return '/static/game-one/progressThree.png'
    }
    
    switch (currentStage.value) {
        case 'garbageCleanup':
            return '/static/game-one/progressOne.png'
        case 'oilFilmSeparation':
            return '/static/game-one/progressTwo.png'
        case 'acidBaseNeutralization':
            return '/static/game-one/progressThree.png'
        default:
            return '/static/game-one/progressOne.png'
    }
})

// 下一步按钮是否可用
const isNextStepEnabled = computed(() => {
    if (showCompletionModal.value) {
        // 显示弹窗时，下一步按钮不可用
        return false
    }
    
    switch (currentStage.value) {
        case 'garbageCleanup':
            return isGarbageCleaned.value
        case 'oilFilmSeparation':
            return isOilSeparationComplete.value
        case 'acidBaseNeutralization':
            return isAcidBaseNeutralizationComplete.value
        default:
            return false
    }
})

// 垃圾清理完成回调
const onGarbageAllCleared = () => {
    isGarbageCleaned.value = true
    uni.showToast({
        title: '清理完成！可以进入下一步',
        icon: 'success',
        duration: 2000
    })
}

// 显示净化值效果
const showPurificationValueEffect = () => {
    showPurificationValue.value = true
    setTimeout(() => {
        showPurificationValue.value = false
    }, 3000)
}

// 油膜分离完成回调
const onOilSeparationComplete = () => {
    isOilSeparationComplete.value = true
    uni.showToast({
        title: '油膜分离完成！可以进入下一步',
        icon: 'success',
        duration: 2000
    })
}

// 酸碱中和完成回调
const onAcidBaseNeutralizationComplete = () => {
    isAcidBaseNeutralizationComplete.value = true
    uni.showToast({
        title: '酸碱中和完成！可以进入下一步',
        icon: 'success',
        duration: 2000
    })
}

// 关闭完成弹窗
const closeCompletionModal = () => {
    showCompletionModal.value = false
    // 显示complete组件
    showCompleteComponent.value = true
}

// 下一步按钮点击
const handleNextStep = () => {
    // 根据当前阶段执行不同的逻辑
    switch (currentStage.value) {
        case 'garbageCleanup':
            if (!isGarbageCleaned.value) {
                uni.showToast({
                    title: '请先清理所有垃圾',
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            transitionToOilSeparation()
            break
            
        case 'oilFilmSeparation':
            if (!isOilSeparationComplete.value) {
                uni.showToast({
                    title: '请先完成油膜分离',
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            transitionToAcidBaseNeutralization()
            break
            
        case 'acidBaseNeutralization':
            if (!isAcidBaseNeutralizationComplete.value) {
                uni.showToast({
                    title: '请先完成酸碱中和',
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            // 酸碱中和完成后，点击下一步显示完成弹窗
            showCompletionModal.value = true
            break
    }
}

// 过渡到油膜分离阶段
const transitionToOilSeparation = () => {
    uni.showLoading({
        title: '正在进入油膜分离区...',
        mask: true
    })

    setTimeout(() => {
        currentStage.value = 'oilFilmSeparation'
        uni.hideLoading()
        uni.showToast({
            title: '已进入油膜分离区',
            icon: 'success',
            duration: 1500
        })
    }, 1000)
}

// 过渡到酸碱中和阶段
const transitionToAcidBaseNeutralization = () => {
    uni.showLoading({
        title: '正在进入酸碱中和区...',
        mask: true
    })

    setTimeout(() => {
        currentStage.value = 'acidBaseNeutralization'
        uni.hideLoading()
        uni.showToast({
            title: '已进入酸碱中和区',
            icon: 'success',
            duration: 1500
        })
    }, 1000)
}
</script>

<style scoped lang="scss">
.container {
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;

    .bg {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        transition: opacity 0.8s ease;
    }

    .top {
        width: 100%;
        height: 380rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;

        .topTitle {
            width: 240rpx;
            height: 128rpx;
            text-align: center;
        }
    }

    .purificationValue {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 20;
        pointer-events: none;

        &.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        .purificationValueImg {
            width: 368rpx;
            height: 362rpx;
            filter: drop-shadow(0 10rpx 20rpx rgba(0, 0, 0, 0.3));
        }
    }

    // 完成弹窗样式
    .completion-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        
        .modal-image {
            width: 100%;
            height: 100%;
        }
    }

    .bottomContent {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 200rpx;
        border-radius: 40rpx 40rpx 0 0;
        background: linear-gradient(180deg, #73D8FF 0%, #3498F4 100%);
        border-top: 4rpx solid #CCECFD;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 15;

        .progress {
            padding: 0 32rpx;

            .progressPic {
                width: 428rpx;
                height: 56rpx;
                transition: all 0.5s ease;
            }
        }

        .nextStep {
            padding: 0 32rpx;

            .nextStepPic {
                width: 208rpx;
                height: 96rpx;
                transition: all 0.3s ease;

                &.disabled {
                    opacity: 0.5;
                    filter: grayscale(0.5);
                }

                &:not(.disabled):active {
                    transform: scale(0.95);
                }
            }
        }
    }
}
</style>