<template>
    <view class="container">
        <view class="top">
            <image class="topTitle"
                src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e9ddd6b498fe452b9254e86c04596df3Group%20348447251.webp">
            </image>
        </view>
        <view class="main-content">
            <view class="beaker-section">
                <!-- 污染水烧杯 -->
                <view class="beaker-item">
                    <image class="beaker-img" mode="aspectFit"
                        :src="getBeakerImage('polluted')">
                    </image>
                    <view class="beaker-label polluted">污染水</view>
                </view>

                <image class="vs-icon"
                    src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/8678ceab4c7b41ac80cc1982054c45f4VS.webp"
                    mode="widthFix"></image>

                <!-- 净化水烧杯 -->
                <view class="beaker-item">
                    <image class="beaker-img" mode="aspectFit"
                        :src="getBeakerImage('purified')">
                    </image>
                    <view class="beaker-label purified">净化水</view>
                </view>
            </view>
        </view>
        
        <!-- TDS测试内容 -->
        <TestContent 
            v-if="currentTest === 'tds'" 
            :currentStep="tdsCurrentStep" 
            @next-step="handleTdsNextStep" 
            @test-completed="handleTdsCompleted" />
        
        <!-- pH值测试组件 -->
        <phValueTest 
            v-else-if="currentTest === 'ph'" 
            :currentStep="phCurrentStep" 
            @next-step="handlePhNextStep" 
            @test-completed="handlePhCompleted"
            @handle-ph-button-click="handlePhButtonClick"
            :isAllTestsCompleted="isAllTestsCompleted" />
            
        <!-- 完成弹窗 - 全屏覆盖 -->
        <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="popup-coupon" v-if="showCouponPopup">
            <!-- 优惠券弹窗内容 -->
             <view class="coupon-content">
                <image class="coupon-image" src="../../static/game-four/testCoupon.png" mode="aspectFit"  style="width: 626rpx; height: 780rpx;margin: 0 auto;"/>
             </view>
        </view>
    </view>
</template>

<script setup>
import TestContent from './components/testContent.vue';
import phValueTest from './components/phValueTest.vue';
import { ref, computed } from 'vue';

// 当前测试类型：tds 或 ph
const currentTest = ref('tds');
// TDS测试步骤
const tdsCurrentStep = ref(0);
// pH测试步骤
const phCurrentStep = ref(0);
// 是否显示完成弹窗
const showCompletionModal = ref(false);
// 是否所有测试都已完成
const isAllTestsCompleted = ref(false);
// 是否显示优惠券弹窗
const showCouponPopup = ref(false);

// 获取烧杯图片
const getBeakerImage = (type) => {
    if (currentTest.value === 'tds') {
        // TDS测试的图片逻辑
        if (tdsCurrentStep.value === 0) {
            // TDS准备阶段
            return type === 'polluted' 
                ? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2729bd9ca6249728c29c66a6e7f1baf%E7%83%A7%E6%9D%AF_%E6%B1%A1%E6%9F%93%E6%B0%B4%E7%89%88%202.webp'
                : 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/048d81b1821442c3b80d312e4ef7c1e4%E7%83%A7%E6%9D%AF_%E6%B0%B4%E9%9D%A2%E5%B9%B3%E6%95%B4%E7%89%88%201.webp';
        } else {
            // TDS检测中或完成
            return type === 'polluted'
                ? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d775e2166f2d426f857e69dc3d115d47%E7%83%A7%E6%9D%AF_%E6%97%A0%E6%B0%B4%E6%BB%B4%E5%9B%9B%E8%82%A2_%E5%9B%BE2%201.webp'
                : 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/c18364684a82445382105028ec6d8f44%E7%83%A7%E6%9D%AF_%E6%97%A0%E6%B0%B4%E6%BB%B4%E5%9B%9B%E8%82%A2_%E5%9B%BE1%201.webp';
        }
    } else {
        // pH测试的图片逻辑
        if (phCurrentStep.value === 0) {
            // pH准备阶段
            return type === 'polluted'
                ? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2729bd9ca6249728c29c66a6e7f1baf%E7%83%A7%E6%9D%AF_%E6%B1%A1%E6%9F%93%E6%B0%B4%E7%89%88%202.webp'
                : 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/048d81b1821442c3b80d312e4ef7c1e4%E7%83%A7%E6%9D%AF_%E6%B0%B4%E9%9D%A2%E5%B9%B3%E6%95%B4%E7%89%88%201.webp';
        } else if (phCurrentStep.value === 1) {
            // pH检测中阶段
            return type === 'polluted'
                ? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a277ce4fb175493c9cedd60f6aa788d1%E7%83%A7%E6%9D%AF_%E6%9C%AA%E4%BD%BF%E7%94%A8%E9%85%B8%E7%A2%B1%E8%AF%95%E7%BA%B8%201.webp'
                : 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b1c0214a1344946908e8de7ddaaea5e%E7%83%A7%E6%9D%AF_%E6%9C%AA%E4%BD%BF%E7%94%A8%E9%85%B8%E7%A2%B1%E8%AF%95%E7%BA%B8_%E5%87%80%E5%8C%96%E6%B0%B4%201.webp';
        } else {
            // pH检测完成阶段
            return type === 'polluted'
                ? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/241f4a3513ed4b22825202afc88aa0da%E7%83%A7%E6%9D%AF_%E7%BB%BF%E8%89%B2%E8%AF%95%E7%BA%B8%201.webp'
                : 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/337db7423769407c8628522d2a3ad51d%E7%83%A7%E6%9D%AF_%E9%BB%84%E7%BB%BF%E8%89%B2%E8%AF%95%E7%BA%B8%201.webp';
        }
    }
};

// 处理TDS下一步
const handleTdsNextStep = () => {
    if (tdsCurrentStep.value < 2) {
        tdsCurrentStep.value++;
    }
    console.log('TDS下一步，当前步骤:', tdsCurrentStep.value);
}

// 处理TDS测试完成
const handleTdsCompleted = () => {
    console.log('TDS测试完成，切换到pH测试');
    currentTest.value = 'ph';
    tdsCurrentStep.value = 0; // 重置TDS步骤
}

// 处理pH下一步
const handlePhNextStep = () => {
    if (phCurrentStep.value < 2) {
        phCurrentStep.value++;
    }
    console.log('pH下一步，当前步骤:', phCurrentStep.value);
}

// 处理pH测试完成
const handlePhCompleted = () => {
    console.log('pH测试完成，所有测试结束');
    // 标记所有测试已完成
    isAllTestsCompleted.value = true;
}

// 处理pH按钮点击
const handlePhButtonClick = () => {
    console.log('收到pH按钮点击事件，当前所有测试完成状态:', isAllTestsCompleted.value);
    if (isAllTestsCompleted.value && phCurrentStep.value === 2) {
        console.log('显示完成弹窗');
        showCompletionModal.value = true;
    }
}

// 关闭完成弹窗
const closeCompletionModal = () => {
    console.log('关闭完成弹窗');
    showCompletionModal.value = false;
    
    // 延迟300ms后显示优惠券弹窗
    setTimeout(() => {
        showCouponPopup.value = true;
    }, 300);
    
    // 重置所有测试状态
    resetAllTests();
}

// 重置所有测试
const resetAllTests = () => {
    console.log('重置所有测试');
    currentTest.value = 'tds';
    tdsCurrentStep.value = 0;
    phCurrentStep.value = 0;
    isAllTestsCompleted.value = false;
}
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    min-height: 100vh;
    background-image: url('https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/963079c98b914f349fe9ff5e600d0f65%E6%B0%B4%E8%B4%A8%E6%A3%80%E6%B5%8B%E7%AB%99_%E7%BA%AF%E8%83%8C%E6%99%AF%201.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;

    .top {
        width: 100%;
        height: 320rpx;
        display: flex;
        justify-content: center;
        align-items: center;

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

    .main-content {
        flex: 1;
        padding: 0 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        justify-content: center;
        margin-top: -60rpx;

        .beaker-section {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            position: relative;
            flex-shrink: 1;

            .beaker-item {
                display: flex;
                flex-direction: column;
                align-items: center;

                .beaker-img {
                    width: 364rpx;
                    height: 541rpx;
                    margin-bottom: 10rpx;
                }

                .beaker-label {
                    padding: 4rpx 26rpx;
                    border-radius: 48rpx;
                    color: #fff;
                    font-size: 30rpx;
                    margin-top: 10rpx;
                    position: relative;
                    top: -5vh;
                    z-index: 1;

                    &.polluted {
                        background: linear-gradient(180deg, #B79669 0%, #8C6B46 100%);
                        border: 4rpx solid #503F34;
                    }

                    &.purified {
                        background: linear-gradient(180deg, #4CAAE4 0%, #3F80D2 100%);
                        border: 4rpx solid #3060AD;
                    }
                }
            }

            .vs-icon {
                width: 108rpx;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 99;
            }
        }
    }

    // 完成弹窗样式 - 全屏覆盖最高级
    .completion-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 99999; // 最高层级
        background: rgba(0, 0, 0, 0.6); // 半透明黑色背景
        display: flex;
        align-items: center;
        justify-content: center;

        .modal-image {
            width: 100%;
            height: 100%;
            object-fit: cover; // 确保图片覆盖整个区域
            display: block;
        }
    }
    
    // 优惠券弹窗样式
    .popup-coupon {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100000; // 比完成弹窗层级更高
    }
}
</style>