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

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

const emit = defineEmits(['all-cleared', 'show-purification', 'move-left', 'move-right', 'hide-purification']);

const ASSETS = Object.freeze({
  rubbishOne: '/static/first/rubbish-one.png',
  rubbishTwo: '/static/first/rubbish-two.png',
  arrowLeft: '/static/first/arrowLeft.png',
  arrowRight: '/static/first/arrowRight.png',
  trashCan: '/static/first/trashCan.png',
});

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

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

// 移动阈值
const LEFT_THRESHOLD = -200;
const RIGHT_THRESHOLD = 200;
const MAX_OFFSET = 200;

// 触摸开始
const onTrashCanTouchStart = (e) => {
  if (props.isTransitioning) return;
  isDragging.value = true;
  trashCanStartX.value = e.touches[0].clientX;
  emit('hide-purification');
};

// 触摸移动
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;
  }

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

// 触摸结束
const onTrashCanTouchEnd = () => {
  resetTrashCan();
};

// 触摸取消
const onTrashCanTouchCancel = () => {
  resetTrashCan();
};

// 重置垃圾桶位置
const resetTrashCan = () => {
  if (isDragging.value) {
    isDragging.value = false;
    
    // 立即重置位置，不等待
    trashCanOffsetX.value = 0;
  }
};

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

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

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

<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="ASSETS.rubbishOne"
            mode="aspectFill"
          ></image>
          <image class="item itemArrow" :src="ASSETS.arrowLeft" mode="aspectFill"></image>

          <!-- 垃圾桶 -->
          <image
            class="item trashCan"
            :style="{ transform: `translateX(${trashCanOffsetX}rpx) scale(1.2)` }"
            @touchstart="onTrashCanTouchStart"
            @touchmove="onTrashCanTouchMove"
            @touchend="onTrashCanTouchEnd"
            @touchcancel="onTrashCanTouchCancel"
            :src="ASSETS.trashCan"
            mode="aspectFill"
          ></image>

          <image class="item itemArrow" :src="ASSETS.arrowRight" mode="aspectFill"></image>

          <!-- two垃圾图片 -->
          <image
            class="item two"
            :class="{ removed: isTwoRemoved }"
            :src="ASSETS.rubbishTwo"
            mode="aspectFill"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

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

    .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 #376069;
      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);
        }

        .itemArrow {
          width: 70rpx;
          height: 50rpx;
        }
      }
    }
  }
}
</style>