<!-- components/oilFilmSeparationZone.vue -->
<template>
    <view class="oil-film-separation">
        <!-- 主内容区域 -->
        <view class="content">
            <view class="gameTitle">油膜分离区</view>
            
            <view class="gameContent">
                <!-- 进度条背景 -->
                <view class="progressBar">
                    <!-- 填充的进度 -->
                    <view 
                        class="progressFill" 
                        :style="{ width: `${progressPercentage}%` }"
                    >
                        <!-- 斜杠图案层 -->
                        <view class="diagonalPattern"></view>
                        <!-- 渐变颜色层 -->
                        <view class="gradientLayer"></view>
                    </view>
                    <!-- 进度条边框 -->
                    <view class="progressBorder"></view>
                </view>
                
                <!-- 拖动提示区域（hint） -->
                <view 
                    class="hint"
                    :style="{ left: `${hintPosition}%` }"
                    @touchstart="onHintTouchStart"
                    @touchmove="onHintTouchMove"
                    @touchend="onHintTouchEnd"
                >
                    <!-- 拖动手柄 -->
                    <view class="hintHandle"></view>
                    
                    <!-- 手部跟随（放在hint内部中下位置） -->
                    <view class="handInsideHint">
                        <image 
                            class="handImage" 
                            src="/static/game-one/hand.png" 
                            mode="aspectFill"
                        ></image>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 净化值显示区域 -->
        <view class="purificationValue" :class="{ show: showPurificationValue }">
            <image 
                class="purificationValueImg" 
                src="/static/game-one/purificationValue.png" 
                mode="aspectFill"
            ></image>
        </view>
    </view>
</template>

<script setup>
import { ref, watch, defineEmits } from 'vue'

// 定义组件事件
const emit = defineEmits(['stage-complete'])

// 进度相关状态
const progressPercentage = ref(0) // 进度百分比 0-100
const hintPosition = ref(0) // hint位置百分比

// 触摸相关状态
const isDragging = ref(false)
const touchStartX = ref(0)
const hintStartPosition = ref(0)

// 净化值显示状态
const showPurificationValue = ref(false)
const hasShownAt50 = ref(false) // 是否已经在50%显示过一次
const isCompleted = ref(false) // 是否已经完成

// 触摸开始
const onHintTouchStart = (e) => {
    if (isCompleted.value) return // 如果已完成，不再响应触摸
    
    isDragging.value = true
    touchStartX.value = e.touches[0].clientX
    hintStartPosition.value = hintPosition.value
}

// 触摸移动
const onHintTouchMove = (e) => {
    if (!isDragging.value || isCompleted.value) return
    
    const touchX = e.touches[0].clientX
    const screenWidth = uni.getSystemInfoSync().windowWidth
    
    // 计算移动距离（百分比）
    const deltaX = touchX - touchStartX.value
    const deltaPercentage = (deltaX / screenWidth) * 100
    
    // 计算新的位置
    let newPosition = hintStartPosition.value + deltaPercentage
    
    // 限制在0-100%范围内
    if (newPosition < 0) {
        newPosition = 0
    } else if (newPosition > 100) {
        newPosition = 100
    }
    
    // 更新位置
    hintPosition.value = newPosition
    
    // 更新进度（进度跟随hint位置）
    progressPercentage.value = newPosition
    
    // 检查进度并触发净化值显示
    checkProgressForPurification()
}

// 触摸结束
const onHintTouchEnd = () => {
    isDragging.value = false
    
    // 如果未完成，可以添加自动回弹效果
    if (progressPercentage.value < 100 && !isCompleted.value) {
        // 可选：自动回弹到当前位置的附近
        // setTimeout(() => {
        //     hintPosition.value = progressPercentage.value
        // }, 100)
    }
}

// 检查进度并触发净化值显示
const checkProgressForPurification = () => {
    const progress = progressPercentage.value
    
    // 达到50%时显示净化值
    if (progress >= 50 && progress < 51 && !hasShownAt50.value) {
        showPurificationValueEffect()
        hasShownAt50.value = true
    }
    
    // 达到100%时再次显示净化值并触发完成事件
    if (progress >= 100 && progress < 101 && !isCompleted.value) {
        isCompleted.value = true
        showPurificationValueEffect()
        
        // 触发完成事件
        emit('stage-complete')
        
        // 完成时的额外处理
        setTimeout(() => {
            uni.showToast({
                title: '油膜分离完成！',
                icon: 'success',
                duration: 2000
            })
        }, 1000)
    }
}

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

// 监听进度变化（可选）
watch(progressPercentage, (newValue) => {
    console.log('当前进度:', newValue.toFixed(1) + '%')
    
    // 如果进度减少到50%以下，重置标志
    if (newValue < 50) {
        hasShownAt50.value = false
    }
})
</script>

<style scoped lang="scss">
.oil-film-separation {
    width: 100%;
    
    .content {
        width: 100%;
        margin-top: 150rpx;
        
        .gameTitle {
            margin: 0 auto;
            width: 240rpx;
            padding: 5rpx 0 15rpx;
            text-align: center;
            font-size: 40rpx;
            color: #FFFFFF;
            font-weight: 600;
            background: #376069;
            border: 2rpx solid #ffffff;
            border-radius: 34rpx;
        }
        
        .gameContent {
            position: relative;
            width: 566rpx;
            height: 200rpx;
            margin: 112rpx auto 0;
            
            // 进度条容器
            .progressBar {
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: 100%;
                height: 52rpx;
                
                // 进度条边框（背景）
                .progressBorder {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: #376069;
                    border: 4rpx solid #FFF;
                    border-radius: 80rpx;
                    z-index: 1;
                }
                
                // 进度条填充
                .progressFill {
                    position: absolute;
                    top: 8rpx;
                    left: 4rpx;
                    height: 44rpx;
                    border-radius: 76rpx;
                    transition: width 0.1s ease;
                    z-index: 2;
                    overflow: hidden; // 确保子元素不会超出边界
                    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
                    
                    // 斜杠图案层
                    .diagonalPattern {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-image: repeating-linear-gradient(
                            135deg, // 135度斜角
                            rgba(255, 255, 255, 0.15) 0, // 斜杠颜色和透明度
                            rgba(255, 255, 255, 0.15) 12rpx, // 斜杠宽度
                            transparent 6rpx, // 斜杠结束
                            transparent 30rpx // 斜杠间隔
                        );
                        z-index: 1;
                        animation: patternMove 3s linear infinite; // 添加动画效果
                    }
                    
                    // 渐变颜色层
                    .gradientLayer {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(90deg, #9C83E5 0%, #45AAE8 36.54%, #5AC3D0 61.06%, #EBDB66 87.98%);
                        z-index: 0;
                    }
                }
            }
            
            // hint拖动区域
            .hint {
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 34rpx;
                height: 88rpx;
                z-index: 10;
                touch-action: none; // 防止页面滚动
                
                // hint手柄
                .hintHandle {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    background: #D5E9FC;
                    border: 4rpx solid #376069;
                    border-radius: 28rpx;
                    box-shadow: 4rpx 4rpx 8rpx 0 #FFF inset;
                    cursor: pointer;
                    z-index: 11;
                    
                    &:active {
                        background: #b8d5f8;
                        transform: scale(0.95);
                    }
                }
                
                // 手部（放在hint内部中下位置）
                .handInsideHint {
                    position: absolute;
                    top: calc(100% - 40rpx); // 放在hint下方，向上偏移一些
                    left: 50%;
                    transform: translateX(-20%);
                    z-index: 12;
                    
                    .handImage {
                        width: 130rpx;
                        height: 130rpx;
                        filter: drop-shadow(0 8rpx 16rpx rgba(0, 0, 0, 0.3));
                        transform: translateY(-10rpx); // 向上偏移，让手部与hint重叠一部分
                    }
                }
                
                // 添加拖动指示
                &::after {
                    content: '';
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 4rpx;
                    height: 20rpx;
                    background: #376069;
                    border-radius: 2rpx;
                    z-index: 1;
                }
            }
        }
    }
    
    // 净化值显示区域
    .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: 100;
        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));
            animation: float 3s ease-in-out infinite;
        }
    }
}

// 漂浮动画
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20rpx);
    }
}

// 斜杠图案移动动画
@keyframes patternMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 24rpx 24rpx; // 移动距离等于斜杠间隔的两倍
    }
}

// 添加拖动时的动画效果
.hint:active {
    .hintHandle {
        animation: pulse 0.5s ease-in-out infinite alternate;
    }
}

@keyframes pulse {
    from {
        box-shadow: 4rpx 4rpx 8rpx 0 #FFF inset, 0 0 0 rgba(157, 131, 229, 0.4);
    }
    to {
        box-shadow: 4rpx 4rpx 8rpx 0 #FFF inset, 0 0 20rpx rgba(157, 131, 229, 0.8);
    }
}
</style>