<template>
    <view class="test-content">
        <view class="tds-phContent">
            <view class="contentTabs">
                <view class="tabsItems">
                    <image class="tds"
                        src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/b91478ab6f2d4c2186a948ae9b614f45Group%20348447426.webp"
                        mode="widthFix"></image>
                    <image class="ph"
                        src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a4bd654c5fd4401bb4d09ce1a8e08aa3Group%20348447427.webp"
                        mode="aspectFit"></image>
                </view>
            </view>
        </view>

        <!-- 操作说明卡片 -->
        <view class="instructions-card instructions-card-step0" v-if="props.currentStep === 0">
            <image class="card-bg"
                src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/87e28ba2f4764f33a36b0d1cfd47d74aRectangle%203589.webp"
                mode="scaleToFill"></image>
            <view class="card-content">
                <view class="card-title">操作说明</view>
                <view class="card-body">
                    <text class="instruction-text">点击"开始检测"按钮测试TDS值</text>
                    <image class="ppm-icon"
                        src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/1a62746fad3743d19f01e8b612ed8d42Group%20348447435.webp"
                        mode="heightFix"></image>
                </view>
            </view>
        </view>

        <!-- 检测中卡片 -->
        <view class="instructions-card instructions-card-detecting"
            v-else-if="props.currentStep === 1 && !showFinalResult">
            <view class="card-content">
                <view class="card-body">
                    <!-- 进度条 -->
                    <view class="progress-container">
                        <image class="progress-bg"
                            src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b21b166605d4c7c9bb4377280202da7Group%20348447442.webp"
                            mode="widthFix"></image>
                        <!-- 进度条填充动画 -->
                        <view class="progress-fill-container" :style="{ width: progressWidth + '%' }">
                            <image class="progress-fill"
                                src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/45cebdfeb99a44049d18ab3b04024ac2Group%20348447442.webp"
                                mode="heightFix"></image>
                        </view>
                    </view>

                    <!-- TDS结果显示 -->
                    <view class="tds-display">
                        <!-- 污染水 -->
                        <view class="tds-item-box">
                            <view class="tds-item">
                                <view class="item">
                                    <text class="water-type">污染水</text>
                                    <text class="tds-value">
                                        TDS值：{{ showPartialResult ? beforeTDS : '？？？' }}
                                    </text>
                                </view>
                                <!-- item-img在检测结果出来后才显示 -->
                                <view class="item-img" v-if="showPartialResult">
                                    <image src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp"
                                        mode="aspectFit" />
                                </view>
                            </view>
                        </view>

                        <!-- 净化水 -->
                        <view class="tds-item-box">
                            <view class="tds-item">
                                <view class="item">
                                    <text class="water-type">净化水</text>
                                    <text class="tds-value">
                                        TDS值：{{ showPartialResult ? afterTDS : '？？？' }}
                                    </text>
                                </view>
                                <!-- item-img在检测结果出来后才显示 -->
                                <view class="item-img" v-if="showPartialResult">
                                    <image src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e7e6a286a568480fada2cafab781cc3cFrame.webp"
                                        mode="aspectFit" />
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 检测完成卡片 -->
        <view class="instructions-card instructions-card-step2" v-else-if="props.currentStep === 2">
            <image class="card-bg"
                src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/87e28ba2f4764f33a36b0d1cfd47d74aRectangle%203589.webp"
                mode="scaleToFill"></image>
            <view class="card-content">
                <view class="card-title">检测结果</view>
                <view class="card-body">
                    <view class="completion-content">
                        <view class="contentLeft">
                            <view class="contentText">TDS值对比</view>
                            <view class="contentValue">
                                <!-- 前后TDS值 -->
                                <view class="beforeTDSValue">前：{{ beforeTDS }}ppm</view>
                                <view class="jiantou">-></view>
                                <view class="afterTDSValue">后：{{ afterTDS }}ppm</view>
                            </view>
                            <view class="purificationRateContent">
                                <view class="purificationTitle">净化率：</view>
                                <view class="purificationValue">{{ purificationRate }}%</view>
                                <view class="purificationLine">
                                    <!-- 自定义进度条 -->
                                    <view class="custom-progress">
                                        <view class="progress-bg-line"></view>
                                        <view 
                                            class="progress-fill-line" 
                                            :style="{ width: purificationRate + '%' }">
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="contentRight">
                            <!-- TDS柱形图对比 -->
                            <view class="tds-chart-container">
                                <!-- 污染水柱形图 -->
                                <view class="chart-column before-tds-column">
                                    <!-- TDS值显示 -->
                                    <text class="tds-chart-value">{{ beforeTDS }}ppm</text>
                                    <!-- 柱形图 -->
                                    <view class="chart-bar" :style="{ height: beforeTDSHeight + 'rpx' }"></view>
                                </view>
                                <!-- 净化水柱形图 -->
                                <view class="chart-column after-tds-column">
                                    <!-- 上方图片 -->
                                    <image class="tds-icon"
                                        src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/44463cae0882429ebd84049240ff5330Group%20348447451.webp"
                                        mode="widthFix" />
                                    <!-- TDS值显示 -->
                                    <text class="tds-chart-value">{{ afterTDS }}ppm</text>
                                    <!-- 柱形图 -->
                                    <view class="chart-bar" :style="{ height: afterTDSHeight + 'rpx' }"></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="tips-card">
            <view class="tips-header">
                <image class="bulb-icon"
                    src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2a7b1b81bff44c2b9099a8d48d9d6f1Frame%282%29.webp"
                    mode="widthFix"></image>
                <text class="tips-title">你知道吗？</text>
            </view>
            <view class="tips-body">
                <text v-if="props.currentStep === 0">TDS代表总溶解固体，数值越低水质越纯净</text>
                <text v-else-if="props.currentStep === 1">TDS值在0-50ppm为优质饮用水</text>
                <text v-else-if="props.currentStep === 2">净化后TDS值显著降低，说明净水效果好</text>
            </view>
        </view>

        <!--底部-->
        <view class="bottom-bar">
            <view class="test-status">当前测试: <text class="test-status-text">{{ testStatusText }}/2</text></view>
            <view class="start-btn-wrapper" @click="handleStartTest">
                <image class="startBtn" :src="getButtonImage()" alt="" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch, onUnmounted, computed } from 'vue';

const props = defineProps({
    currentStep: {
        type: Number,
        default: 0
    }
});

const emit = defineEmits(['next-step', 'test-completed']);

const progressWidth = ref(0);
const showPartialResult = ref(false);
const showFinalResult = ref(false);
const isTesting = ref(false);
const testStatusText = ref(1); // TDS测试时显示1/2

// 定义TDS值
const beforeTDS = ref(800); // 污染水TDS值
const afterTDS = ref(15);   // 净化水TDS值

let progressTimer = null;

// 计算净化率
const purificationRate = computed(() => {
    if (beforeTDS.value <= 0) return 0;
    const rate = ((beforeTDS.value - afterTDS.value) / beforeTDS.value) * 100;
    return Math.round(rate * 10) / 10; // 保留一位小数
});

// 计算柱形图高度
const maxChartHeight = 130; // 最大高度130rpx
const maxTDSValue = 1000;   // 假设最大TDS值为1000，用于比例计算

// 计算污染水柱形图高度
const beforeTDSHeight = computed(() => {
    const height = (beforeTDS.value / maxTDSValue) * maxChartHeight;
    return Math.min(height, maxChartHeight); // 确保不超过最大高度
});

// 计算净化水柱形图高度
const afterTDSHeight = computed(() => {
    const height = (afterTDS.value / maxTDSValue) * maxChartHeight;
    return Math.min(height, maxChartHeight); // 确保不超过最大高度
});

// 按钮图片逻辑
const getButtonImage = () => {
    if (props.currentStep === 0) {
        return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/51e1fc432e2b406d9d00f1028213221bGroup%20348447439.webp';
    } else {
        return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/92306739e0774318bbfc4bbf0a69cba5Group%20348447439.webp';
    }
};

// 监听currentStep变化
watch(() => props.currentStep, (newStep) => {
    console.log('TDS currentStep变化:', newStep);
    if (newStep === 1) {
        // 进入步骤1，开始自动检测
        testStatusText.value = 1;
        startAutoDetection();
    } else if (newStep === 2) {
        // 进入步骤2，检测完成
        showFinalResult.value = true;
        resetDetection();
    }
}, { immediate: true });

// 开始自动检测
const startAutoDetection = () => {
    if (isTesting.value) return;

    console.log('开始TDS自动检测');
    isTesting.value = true;
    progressWidth.value = 0;
    showPartialResult.value = false;
    showFinalResult.value = false;

    // 清除之前的定时器
    if (progressTimer) {
        clearInterval(progressTimer);
    }

    // 模拟检测过程
    let currentProgress = 0;
    const totalTime = 3000; // 总时长3秒（为了快速测试）
    const interval = 50; // 更新间隔50ms
    const increment = (interval / totalTime) * 100; // 每次增加的百分比

    progressTimer = setInterval(() => {
        currentProgress += increment;
        progressWidth.value = Math.min(currentProgress, 100);

        // 当进度达到50%时显示TDS值
        if (currentProgress >= 50 && !showPartialResult.value) {
            console.log('显示TDS部分结果');
            showPartialResult.value = true;
        }

        // 当进度达到100%时显示完成状态
        if (currentProgress >= 100) {
            showFinalResult.value = true;
            clearInterval(progressTimer);
            isTesting.value = false;
            console.log('TDS检测完成');

            // 检测完成后延迟1秒自动进入下一步
            setTimeout(() => {
                console.log('自动进入TDS结果页面');
                emit('next-step');
            }, 1000);
        }
    }, interval);
};

// 重置检测状态
const resetDetection = () => {
    isTesting.value = false;
    progressWidth.value = 0;
    showPartialResult.value = false;
    showFinalResult.value = false;

    if (progressTimer) {
        clearInterval(progressTimer);
        progressTimer = null;
    }
};

// 处理按钮点击
const handleStartTest = () => {
    console.log('TDS按钮点击，当前步骤:', props.currentStep, '测试完成:', showFinalResult.value);
    
    if (props.currentStep === 0) {
        // 第一步：点击"开始检测"
        console.log('开始TDS检测');
        emit('next-step');
    } else if (props.currentStep === 1) {
        // 第二步：检测中或检测完成
        if (showFinalResult.value) {
            // 检测已完成，可以点击按钮进入下一步
            console.log('TDS检测完成，进入结果页面');
            testStatusText.value = 2;
            emit('next-step');
        } else {
            console.log('TDS检测中，点击无效');
        }
    } else if (props.currentStep === 2) {
        // 第三步：检测完成后的操作 - 点击"下一项检测"
        console.log('点击"下一项检测"，切换到pH测试');
        // 触发测试完成事件，通知父组件切换到pH测试
        emit('test-completed');
    }
};

// 组件卸载时清理定时器
onUnmounted(() => {
    resetDetection();
});
</script>

<style scoped lang="scss">
.test-content {
    width: 100%;
    height: 45vh;
    flex-shrink: 0;
    border-radius: 24rpx 24rpx 0 0;
    border-top: 4rpx solid #728FAF;
    background: linear-gradient(180deg, #E0EBF6 0%, #C3D3E4 100%);
    box-shadow: 0 10rpx 0 0 #FFF inset;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    padding-bottom: env(safe-area-inset-bottom);

    .tds-phContent {
        .contentTabs {
            .tabsItems {
                margin-top: 32rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                .tds {
                    width: 254rpx;
                    height: 84rpx;
                }

                .ph {
                    width: 254rpx;
                    height: 84rpx;
                    margin-left: 40rpx;
                }
            }
        }
    }

    // 步骤0的卡片样式（原始样式）
    .instructions-card-step0 {
        position: relative;
        width: 95%;
        height: 180rpx;
        margin: 40rpx auto;
        border-radius: 24rpx;
        border: 4rpx solid #457AAB;
        background: #BEDCF3;
        box-sizing: border-box;
        flex-shrink: 0;

        .card-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 98%;
            height: 94%;
            z-index: 0;
            display: block;
        }

        .card-content {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .card-title {
                text-align: center;
                font-size: 34rpx;
                font-weight: bold;
                color: #25334D;
            }

            .card-body {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 20rpx;

                .instruction-text {
                    font-size: 30rpx;
                    color: #25334D;
                    font-weight: 500;
                }

                .ppm-icon {
                    height: 60rpx;
                    margin-left: 20rpx;
                }
            }
        }
    }

    // 检测中卡片样式（无边框背景色）
    .instructions-card-detecting {
        width: 95%;
        height: 240rpx;
        margin: 40rpx auto;
        box-sizing: border-box;
        flex-shrink: 0;
        background: transparent;
        border: none;

        .card-content {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .card-body {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                padding: 0 20rpx;

                // 进度条样式（使用切图）
                .progress-container {
                    width: 90%;
                    height: 60rpx;
                    position: relative;
                    margin-bottom: 20rpx;
                    overflow: hidden;
                    border-radius: 10rpx;

                    .progress-bg {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                    }

                    .progress-fill-container {
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 0%;
                        overflow: hidden;
                        z-index: 2;
                        transition: width 0.1s linear;

                        .progress-fill {
                            height: 100%;
                            width: auto;
                            min-width: 100%;
                        }
                    }
                }

                // TDS显示样式
                .tds-display {
                    display: flex;
                    width: 100%;
                    justify-content: space-around;
                    align-items: center;

                    // TDS项目盒子（带边框）
                    .tds-item-box {
                        background: linear-gradient(180deg, #FAFBFD 0%, #DCEEFD 100%);
                        border: 2rpx solid #FFF;
                        border-radius: 24rpx;
                        width: 328rpx;
                        height: 140rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

                        .tds-item {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            width: 100%;
                            padding: 0 20rpx;

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

                                .water-type {
                                    font-size: 26rpx;
                                    color: #25334D;
                                    font-weight: 500;
                                    margin-bottom: 8rpx;
                                }

                                .tds-value {
                                    font-size: 32rpx;
                                    color: #3481c8;
                                    font-weight: bold;
                                }
                            }

                            .item-img {
                                width: 92rpx;
                                height: 92rpx;
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                image {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 检测完成卡片样式
    .instructions-card-step2 {
        position: relative;
        width: 95%;
        height: 240rpx;
        margin: 40rpx auto;
        border-radius: 24rpx;
        border: 4rpx solid #457AAB;
        background: #BEDCF3;
        box-sizing: border-box;
        flex-shrink: 0;

        .card-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 98%;
            height: 94%;
            z-index: 0;
            display: block;
        }

        .card-content {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .card-title {
                text-align: center;
                font-size: 34rpx;
                font-weight: bold;
                color: #25334D;
                margin-bottom: 15rpx;
            }

            .card-body {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 0 20rpx;
                position: relative;
                z-index: 99;
                
                // 完成内容样式
                .completion-content {
                    width: 100%;
                    padding: 12rpx 16rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    
                    .contentLeft {
                        .contentText {
                            color: #25334d;
                            font-size: 30rpx;
                            font-weight: 600;  
                        }
                        
                        .contentValue {
                            margin: 12rpx 0;
                            display: flex;
                            align-items: center;
                            
                            .beforeTDSValue {
                                color: #ffffff;
                                font-size: 24rpx;
                                font-weight: 600;
                                text-align: center;
                                border: 3rpx solid #9D341A;
                                background: #D93A12;
                                border-radius: 16rpx;
                                padding: 4rpx 12rpx;   
                            }
                            
                            .afterTDSValue {
                                color: #ffffff;
                                font-size: 24rpx;
                                font-weight: 600;
                                text-align: center;
                                border: 3rpx solid #1F8F73;
                                background: #0FA983;
                                border-radius: 16rpx;
                                padding: 4rpx 12rpx;
                            }
                            
                            .jiantou {
                                margin: 0 15rpx;
                                color: #457AAB;
                            }
                        }
                        
                        .purificationRateContent {
                            display: flex;
                            align-items: center;
                            margin-top: 10rpx;
                            
                            .purificationTitle {
                                color: #25334d;
                                font-size: 30rpx;
                                font-weight: 600;   
                                margin-right: 10rpx;
                            }
                            
                            .purificationValue {
                                color: #00cc99;
                                font-size: 34rpx;
                                font-weight: 600;
                                margin-right: 20rpx;
                                min-width: 80rpx;
                            }
                            
                            .purificationLine {
                                width: 192rpx;
                                height: 28rpx;
                                
                                // 自定义进度条
                                .custom-progress {
                                    position: relative;
                                    width: 192rpx;
                                    height: 28rpx;
                                    border-radius: 14rpx;
                                    overflow: hidden;
                                    
                                    .progress-bg-line {
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 100%;
                                        background-color: #E5E5E5;
                                        border-radius: 14rpx;
                                    }
                                    
                                    .progress-fill-line {
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        height: 100%;
                                        background-color: #00CC99;
                                        border-radius: 14rpx;
                                        transition: width 0.5s ease-out;
                                        max-width: 100%;
                                    }
                                }
                            }
                        }
                    }
                    
                    .contentRight {
                        width: 196rpx;
                        height: 142rpx;
                        border: 2rpx solid #457aab80;
                        background: #BEDCF3;
                        border-radius: 12rpx;
                        position: relative;
                        // TDS柱形图容器
                        .tds-chart-container {
                            position: absolute;
                            bottom: 0;
                            width: 100%;
                            height: 100%;
                            display: flex;
                            align-items: flex-end;
                            justify-content: center;
                            
                            // 柱形图列样式
                            .chart-column {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: flex-end;
                                height: 100%;
                                
                                // TDS值显示
                                .tds-chart-value {
                                    font-size: 24rpx;
                                    font-weight: 600;
                                    margin-bottom: 6rpx;
                                }
                                
                                // 柱形图
                                .chart-bar {
                                    width: 42rpx;
                                    min-height: 10rpx;
                                    border-radius: 8rpx 8rpx 0 0;
                                    transition: height 0.5s ease-out;
                                }
                            }
                            
                            // 净化水柱形图
                            .after-tds-column {
                                align-items: center;
                                
                                .tds-icon {
                                    width: 68rpx;
                                    height: 68rpx;
                                    margin-bottom: 4rpx;
                                }
                                
                                .tds-chart-value {
                                    color: #0fa983;
                                    font-weight: 700;
                                }
                                
                                .chart-bar {
                                    background: linear-gradient(180deg, #36E6BB 0%, #0FA983 100%);
                                    border: 2rpx solid #1F8F73;
                                }
                            }
                            
                            // 污染水柱形图
                            .before-tds-column {
                                align-items: center;
                                
                                .tds-chart-value {
                                    color: #D93A12;
                                    font-weight: 700;
                                }
                                
                                .chart-bar {
                                    background: linear-gradient(180deg, #EE6E4E 0%, #D93A12 100%);
                                    border: 2rpx solid #9D341A;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .tips-card {
        width: 95%;
        height: 116rpx;
        background: #BEDCF3;
        border-radius: 24rpx;
        border: 4rpx solid #457AAB;
        padding: 20rpx;
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
        margin: 0 auto;

        .tips-header {
            position: absolute;
            top: -24rpx;
            left: 20rpx;
            width: 234rpx;
            height: 56rpx;
            background: linear-gradient(180deg, #52A5D7 0%, #3E83CE 100%);
            border-radius: 48rpx;
            border: 4rpx solid #1B5CA3;
            box-shadow: 0 0 8rpx 0 #FFF inset;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            z-index: 10;

            .bulb-icon {
                position: absolute;
                left: -20rpx;
                bottom: -10rpx;
                width: 80rpx;
                height: 80rpx;
                z-index: 12;
            }

            .tips-title {
                color: #fff;
                font-size: 34rpx;
                font-weight: bold;
                margin-left: 30rpx;
            }
        }

        .tips-body {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 30rpx;
            color: #25334d;
            line-height: 1.3;
            padding: 30rpx 16rpx 10rpx 16rpx;
            border-radius: 24rpx;
            background: linear-gradient(180deg, #FFF 0%, #D9EBF7 100%);
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .bottom-bar {
        width: 100%;
        position: absolute;
        bottom: 0rpx;
        left: 0;
        background-image: url('https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a681444d883d4fe29851d702703302b0Rectangle%203597.webp');
        background-repeat: no-repeat;
        background-size: 100% 105%;
        padding: 30rpx 0;
        box-sizing: border-box;
        display: flex;

        .test-status {
            padding: 0 100rpx;
            color: #000000;
            font-size: 34rpx;
            font-weight: 600;
            margin-top: 50rpx;

            .test-status-text {
                color: #3481c8;
                font-size: 34rpx;
            }
        }

        .start-btn-wrapper {
            position: absolute;
            top: 30rpx;
            right: 40rpx;

            .startBtn {
                width: 254rpx;
                height: 99rpx;
            }
        }
    }
}
</style>