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

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

const ASSETS = Object.freeze({
  purificationValue: '/static/first/purificationValue.png',
});

// 进度相关状态
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;
};

// 检查进度并触发净化值显示
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');
  }
};

// 显示净化值效果
const showPurificationValueEffect = () => {
  showPurificationValue.value = true;

  // 3秒后隐藏净化值
  setTimeout(() => {
    showPurificationValue.value = false;
  }, 3000);
};

// 监听进度变化（可选）
watch(progressPercentage, (newValue) => {

  // 如果进度减少到50%以下，重置标志
  if (newValue < 50) {
    hasShownAt50.value = false;
  }
});
</script>

<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>
        </view>
      </view>
    </view>

    <!-- 净化值显示区域 -->
    <view class="purificationValue" :class="{ show: showPurificationValue }">
      <image
        class="purificationValueImg"
        :src="ASSETS.purificationValue"
        mode="aspectFill"
      ></image>
    </view>
  </view>
</template>

<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: 62rpx 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;
          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);
          }
        }

        // 添加拖动指示
        &::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: 66%;
    left: 35%;
    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>
