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

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

const ASSETS = Object.freeze({
  reagents: '/static/first/reagents.png',
  reagentsOne: '/static/first/reagentsOne.png',
  reagentsTwo: '/static/first/reagentsTwo.png',
  reagentsThree: '/static/first/reagentsThree.png',
});

// 区域位置数组
const areaPositions = ['22px', '110px', '202px'];

// 当前显示的图片
const currentImage = ref(ASSETS.reagents);
// 当前悬停的区域 (0表示没有悬停，1,2,3分别对应三个区域)
const hoverArea = ref(0);
// 是否已选择区域
const isSelected = ref(false);

// 图片映射关系
const imageMap = {
  1: ASSETS.reagentsOne,
  2: ASSETS.reagentsTwo,
  3: ASSETS.reagentsThree,
};

// 计算图片样式
const imageStyle = computed(() => {
  if (currentImage.value === ASSETS.reagents) {
    return {
      width: '422rpx',
      height: '134rpx',
    };
  } else {
    return {
      width: '444rpx',
      height: '148rpx',
    };
  }
});

// 是否选中了正确的试剂
const isCorrectSelected = computed(() => {
  return currentImage.value === ASSETS.reagentsOne;
});

// 选择区域
const selectArea = (areaIndex) => {
  // 如果已经选中了正确的试剂，则不再响应点击
  if (isCorrectSelected.value) return;
  
  if (isSelected.value) return;
  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 = ASSETS.reagents;
  hoverArea.value = 0;
};

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

<template>
  <view class="container">
    <view class="content">
      <view class="gameContent">
        <view class="hint">
          <!-- 显示当前选中的图片 -->
          <image :src="currentImage" :style="imageStyle" mode="scaleToFill" />

          <!-- 三个可点击区域 -->
          <view
            class="click-area"
            v-for="i in 3"
            :key="i"
            :class="{ active: hoverArea === i && !isSelected }"
            :style="{ left: areaPositions[i - 1], pointerEvents: isCorrectSelected ? 'none' : 'auto' }"
            @click="selectArea(i)"
          ></view>
        </view>
      </view>

      <view class="textTips">
        <view class="text">
          当前<br />
          经检测该河流呈酸性<br />
          请选择合适的试剂进行中和
        </view>
      </view>
    </view>
  </view>
</template>

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

  .content {
    .gameContent {
      background: #ffffff8f;
      border: 4rpx dashed #376069;
      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;

          &.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;
          }
        }
      }
    }

    .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: 320rpx;
      left: 15%;
      pointer-events: none;

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