<template>
    <view class="garbage-cleanup">
        <view class="content">
            <view class="cleartitle">清理垃圾</view>
            <view class="clearContent">
                <view class="clearItem">
                    <!-- one垃圾图片 -->
                    <image class="item one" :class="{ removed: isOneRemoved }"
                        src="../../static/game-one/rubbish-one.png" mode="aspectFill"></image>
                    <image class="item itemArrow" src="../../static/game-one/arrowLeft.png" mode="aspectFill"></image>

                    <!-- 垃圾桶 -->
                    <image class="item trashCan" :class="{ enlarged: isTrashCanEnlarged }"
                        :style="{ transform: `translateX(${trashCanOffsetX}rpx)` }" @touchstart="onTrashCanTouchStart"
                        @touchmove="onTrashCanTouchMove" @touchend="onTrashCanTouchEnd"
                        src="../../static/game-one/trashCan.png" mode="aspectFill"></image>

                    <image class="item itemArrow" src="../../static/game-one/arrowRight.png" mode="aspectFill"></image>

                    <!-- two垃圾图片 -->
                    <image class="item two" :class="{ removed: isTwoRemoved }"
                        src="../../static/game-one/rubbish-two.png" mode="aspectFill"></image>
                </view>
                <!-- 手部跟随 -->
                <view class="hand">
                    <image class="item" :style="{
                        transform: `translateX(${handOffsetX}rpx)`,
                        opacity: isHandVisible ? 1 : 0
                    }" src="../../static/game-one/hand.png" mode="aspectFill"></image>
                </view>
            </view>
        </view>
    </view>
</template>

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

const props = defineProps({
    isTransitioning: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['all-cleared', 'show-purification'])

// 垃圾桶移动相关状态
const trashCanOffsetX = ref(0)
const trashCanStartX = ref(0)
const isDragging = ref(false)
const isTrashCanEnlarged = ref(false)

// 手部跟随相关状态
const handOffsetX = ref(0)
const isHandVisible = ref(false)

// 垃圾清除状态
const isOneRemoved = ref(false)
const isTwoRemoved = ref(false)

// 移动阈值
const LEFT_THRESHOLD = -100
const RIGHT_THRESHOLD = 100
const MAX_OFFSET = 120

// 触摸开始
const onTrashCanTouchStart = (e) => {
    if (props.isTransitioning) return
    isDragging.value = true
    trashCanStartX.value = e.touches[0].clientX
    isTrashCanEnlarged.value = true
    isHandVisible.value = true
}

// 触摸移动
const onTrashCanTouchMove = (e) => {
    if (!isDragging.value || props.isTransitioning) return

    const touchX = e.touches[0].clientX
    const deltaX = touchX - trashCanStartX.value

    const screenWidth = uni.getSystemInfoSync().windowWidth
    const deltaRpx = (deltaX / screenWidth) * 750

    // 限制移动范围
    if (deltaRpx < -MAX_OFFSET) {
        trashCanOffsetX.value = -MAX_OFFSET
    } else if (deltaRpx > MAX_OFFSET) {
        trashCanOffsetX.value = MAX_OFFSET
    } else {
        trashCanOffsetX.value = deltaRpx
    }

    // 手部跟随移动
    handOffsetX.value = trashCanOffsetX.value

    // 检查是否到达阈值并清除垃圾
    checkAndClearTrash()
}

// 触摸结束
const onTrashCanTouchEnd = () => {
    isDragging.value = false
    isTrashCanEnlarged.value = false
    isHandVisible.value = false

    setTimeout(() => {
        trashCanOffsetX.value = 0
        handOffsetX.value = 0
    }, 300)
}

// 检查并清除垃圾
const checkAndClearTrash = () => {
    // 向左移动清除one
    if (trashCanOffsetX.value <= LEFT_THRESHOLD && !isOneRemoved.value) {
        isOneRemoved.value = true
        emit('show-purification')
    }

    // 向右移动清除two
    if (trashCanOffsetX.value >= RIGHT_THRESHOLD && !isTwoRemoved.value) {
        isTwoRemoved.value = true
        emit('show-purification')
    }
}

// 监听清除状态变化
watch([isOneRemoved, isTwoRemoved], ([oneRemoved, twoRemoved]) => {
    if (oneRemoved && twoRemoved) {
        emit('all-cleared')
    }
})
</script>

<style scoped lang="scss">
.garbage-cleanup {
    .content {
        width: 100%;
        margin-top: 150rpx;

        .cleartitle {
            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;
        }

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

            .clearItem {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 34rpx 32rpx;
                position: relative;

                .item {
                    transition: all 0.3s ease;
                    position: relative;
                    z-index: 2;
                }

                .one {
                    width: 108rpx;
                    height: 106rpx;
                    opacity: 1;
                    transition: opacity 0.5s ease;

                    &.removed {
                        opacity: 0;
                        transform: scale(0.8);
                    }
                }

                .two {
                    width: 98rpx;
                    height: 106rpx;
                    opacity: 1;
                    transition: opacity 0.5s ease;

                    &.removed {
                        opacity: 0;
                        transform: scale(0.8);
                    }
                }

                .trashCan {
                    width: 100rpx;
                    height: 110rpx;
                    z-index: 10;
                    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

                    &.enlarged {
                        transform: translateX(v-bind(trashCanOffsetX + 'rpx')) scale(1.2);
                    }
                }

                .itemArrow {
                    width: 70rpx;
                    height: 50rpx;
                }
            }

            .hand {
                position: absolute;
                left: 55%;
                top: 100rpx;
                transform: translateX(-50%);
                z-index: 15;
                transition: all 0.3s ease;

                .item {
                    width: 130rpx;
                    height: 130rpx;
                    transition: all 0.3s ease;
                }
            }
        }
    }
}
</style>