<!--选择试剂组件-->
<template>
    <view class="container" @touchmove="handleGlobalTouchMove" @touchstart="handleTouchStart">
        <view class="content">
            <view class="gameContent">
                <view class="hint">
                    <!-- 显示当前选中的图片 -->
                    <image :src="currentImage" style="height: 134rpx; padding: 0 62rpx;" />
                    
                    <!-- 三个可点击区域 -->
                    <view 
                        class="click-area" 
                        v-for="i in 3" 
                        :key="i"
                        :class="{active: hoverArea === i && !isSelected}"
                        :style="{left: (i-1) * 186 + 'rpx'}"
                        @click="selectArea(i)"
                        @touchstart="handleAreaTouchStart($event, i)"
                    ></view>
                </view>
            </view>
            
            <!-- 手部跟随 -->
            <view class="hand" :style="handStyle">
                <image class="item" src="../../static/game-one/hand.png" mode="aspectFill"></image>
            </view>
            
            <view class="textTips">
                <view class="text">
                    当前<br />
                    经检测该河流呈酸性<br />
                    请选择合适的试剂进行中和
                </view>
            </view>
        </view>
    </view>
</template>

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

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

// 当前显示的图片
const currentImage = ref('../../../static/game-one/reagents.png')
// 当前悬停的区域 (0表示没有悬停，1,2,3分别对应三个区域)
const hoverArea = ref(0)
// 是否已选择区域
const isSelected = ref(false)
// 手势位置
const handPosition = ref({ x: 200, y: 300 })

// 图片映射关系
const imageMap = {
    1: '../../../static/game-one/reagentsOne.png',
    2: '../../../static/game-one/reagentsTwo.png',
    3: '../../../static/game-one/reagentsThree.png'
}

// 计算手部样式
const handStyle = computed(() => {
    return {
        left: handPosition.value.x + 'px',
        top: handPosition.value.y + 'px'
    }
})

// 选择区域
const selectArea = (areaIndex) => {
    isSelected.value = true
    currentImage.value = imageMap[areaIndex]
    // 选择后清空悬停状态
    hoverArea.value = 0
    
    // 如果选择了第一个区域（正确的试剂），则触发完成事件
    if (areaIndex === 1) {
        emit('stage-complete', { selectedIndex: areaIndex, isCorrect: true })
    } else {
        // 选择错误的试剂，显示提示
        uni.showToast({
            title: '这不是正确的试剂，请重新选择',
            icon: 'none',
            duration: 2000
        })
        // 2秒后重置选择
        setTimeout(() => {
            resetSelection()
        }, 2000)
    }
}

// 重置选择
const resetSelection = () => {
    isSelected.value = false
    currentImage.value = '../../../static/game-one/reagents.png'
    hoverArea.value = 0
}

// 处理区域触摸开始事件
const handleAreaTouchStart = (e, areaIndex) => {
    const touch = e.touches[0]
    if (touch) {
        updateHandPosition(touch.clientX, touch.clientY)
        hoverArea.value = areaIndex
    }
}

// 处理全局触摸移动事件
const handleGlobalTouchMove = (e) => {
    const touch = e.touches[0]
    if (touch) {
        updateHandPosition(touch.clientX, touch.clientY)
        
        // 更新悬停区域（仅在未选择时）
        if (!isSelected.value) {
            updateHoverArea(touch.clientX, touch.clientY)
        }
    }
}

// 处理触摸开始事件
const handleTouchStart = (e) => {
    const touch = e.touches[0]
    if (touch && !isSelected.value) {
        updateHoverArea(touch.clientX, touch.clientY)
    }
}

// 更新手势位置
const updateHandPosition = (clientX, clientY) => {
    handPosition.value = {
        x: clientX - 32,
        y: clientY - 32
    }
}

// 更新悬停区域
const updateHoverArea = (clientX, clientY) => {
    const query = uni.createSelectorQuery()
    query.select('.gameContent').boundingClientRect(data => {
        if (data) {
            const rect = data
            const areaWidth = 48.75 // 186rpx ≈ 48.75px
            const areaHeight = 37.8 // 144rpx ≈ 37.8px
            
            // 计算区域的垂直中心位置
            const areaTop = rect.top + (rect.height - areaHeight) / 2
            const areaBottom = areaTop + areaHeight
            
            // 检查是否在某个区域内
            for (let i = 1; i <= 3; i++) {
                const areaLeft = rect.left + (i-1) * areaWidth
                const areaRight = areaLeft + 34.125 // 130rpx ≈ 34.125px
                
                if (clientX >= areaLeft && clientX <= areaRight && 
                    clientY >= areaTop && clientY <= areaBottom) {
                    hoverArea.value = i
                    return
                }
            }
            hoverArea.value = 0
        }
    }).exec()
}

// 暴露重置方法给父组件
defineExpose({
    resetSelection
})
</script>

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

    .content {
        .gameContent {
            background: #ffffff8f;
            border: 4rpx dashed #FFF;
            border-radius: 32rpx;
            width: 558rpx;
            height: 196rpx;
            margin: 30rpx auto;
            position: relative;

            .hint {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                
                .click-area {
                    position: absolute;
                    width: 130rpx;
                    height: 144rpx;
                    border-radius: 12rpx;
                    background: transparent;
                    z-index: 10;
                    cursor: pointer;
                    
                    &.active {
                        background: rgba(48, 195, 57, 0.3);
                        border: 2rpx solid #30C339;
                        box-shadow: 0 0 20rpx rgba(48, 195, 57, 0.5);
                        transition: all 0.2s ease;
                    }
                }
            }
        }

        .hand {
            position: fixed;
            pointer-events: none;
            z-index: 15;
            transition: all 0.1s ease;
            transform: translate(-50%, -50%);

            .item {
                width: 130rpx;
                height: 130rpx;
                transition: all 0.1s ease;
            }
        }

        .textTips {
            border-radius: 24rpx;
            border: 2rpx solid #FFF;
            background: #F0F9FC;
            box-shadow: 0 0 39.6rpx 0 #C8EEFF inset;
            width: 520rpx;
            height: 196rpx;
            position: fixed;
            bottom: 280rpx;
            left: 15%;
            pointer-events: none;

            .text {
                color: #2d4b5d;
                text-align: center;
                font-size: 36rpx;
                font-weight: 600;
                margin-top: 20rpx;
            }
        }
    }
}
</style>