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

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

//烧杯图片
const IMAGES = {
  pollutedDefault: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2729bd9ca6249728c29c66a6e7f1baf%E7%83%A7%E6%9D%AF_%E6%B1%A1%E6%9F%93%E6%B0%B4%E7%89%88%202.webp',
  purifiedDefault: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/048d81b1821442c3b80d312e4ef7c1e4%E7%83%A7%E6%9D%AF_%E6%B0%B4%E9%9D%A2%E5%B9%B3%E6%95%B4%E7%89%88%201.webp',
  vsIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/8678ceab4c7b41ac80cc1982054c45f4VS.webp',
  pollutedPh: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a277ce4fb175493c9cedd60f6aa788d1%E7%83%A7%E6%9D%AF_%E6%9C%AA%E4%BD%BF%E7%94%A8%E9%85%B8%E7%A2%B1%E8%AF%95%E7%BA%B8%201.webp',
  pollutedTds: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d775e2166f2d426f857e69dc3d115d47%E7%83%A7%E6%9D%AF_%E6%97%A0%E6%B0%B4%E6%BB%B4%E5%9B%9B%E8%82%A2_%E5%9B%BE2%201.webp',
  purifiedPh: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b1c0214a1344946908e8de7ddaaea5e%E7%83%A7%E6%9D%AF_%E6%9C%AA%E4%BD%BF%E7%94%A8%E9%85%B8%E7%A2%B1%E8%AF%95%E7%BA%B8_%E5%87%80%E5%8C%96%E6%B0%B4%201.webp',
  purifiedTds: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/c18364684a82445382105028ec6d8f44%E7%83%A7%E6%9D%AF_%E6%97%A0%E6%B0%B4%E6%BB%B4%E5%9B%9B%E8%82%A2_%E5%9B%BE1%201.webp',
};

const pollutedImageTesting = computed(() => {
  return props.isSecondTest ? IMAGES.pollutedPh : IMAGES.pollutedTds;
});

const purifiedImageTesting = computed(() => {
  return props.isSecondTest ? IMAGES.purifiedPh : IMAGES.purifiedTds;
});
</script>

<template>
  <view class="main-content">
    <view class="beaker-section">
      <view class="beaker-item polluted-beaker" :class="{ 'no-transform': isSecondTest }">
        <view class="beaker-img-wrapper">
          <image
            class="beaker-img"
            :class="{ 'img-hidden': isTesting }"
            :src="IMAGES.pollutedDefault"
            mode="aspectFit"
          />
          <image
            class="beaker-img beaker-img-overlay"
            :class="{ 'img-visible': isTesting }"
            :src="pollutedImageTesting"
            mode="aspectFit"
          />
        </view>
        <view class="beaker-label polluted">污染水</view>
      </view>

      <image class="vs-icon" :src="IMAGES.vsIcon" mode="widthFix" />

      <view class="beaker-item">
        <view class="beaker-img-wrapper">
          <image
            class="beaker-img"
            :class="{ 'img-hidden': isTesting }"
            :src="IMAGES.purifiedDefault"
            mode="aspectFit"
          />
          <image
            class="beaker-img beaker-img-overlay"
            :class="{ 'img-visible': isTesting }"
            :src="purifiedImageTesting"
            mode="aspectFit"
          />
        </view>
        <view class="beaker-label purified">净化水</view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.main-content {
  flex: 1;
  padding: 0 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  justify-content: center;
}

.beaker-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  flex-shrink: 1;

  .beaker-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .beaker-img-wrapper {
      width: 364rpx;
      height: 541rpx;
      position: relative;
    }

    .beaker-img {
      width: 364rpx;
      height: 541rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      opacity: 1;
      transition: opacity 0.15s ease-in-out;

      &.img-hidden {
        opacity: 0;
      }
    }

    .beaker-img-overlay {
      opacity: 0;

      &.img-visible {
        opacity: 1;
      }
    }

    &.polluted-beaker:not(.no-transform) .beaker-img-overlay {
      transform: scale(1.03) translateY(25rpx);
      transform-origin: center bottom;
    }

    .beaker-label {
      padding: 8rpx 32rpx;
      border-radius: 48rpx;
      color: #fff;
      font-size: 34rpx;
      position: relative;
      top: -60rpx;
      z-index: 1;

      &.polluted {
        background: linear-gradient(180deg, #b79669 0%, #8c6b46 100%);
        border: 4rpx solid #503f34;
      }

      &.purified {
        background: linear-gradient(180deg, #4caae4 0%, #3f80d2 100%);
        border: 4rpx solid #3060ad;
      }
    }
  }

  .vs-icon {
    width: 108rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
  }
}
</style>