<template>
  <!-- 使用 class 动画实现渐入渐出，兼容微信小程序 -->
  <view v-if="isShowing" class="swiper-tip-container theme-ie" :class="{ 'is-fading-out': isFadingOut }">
    <!-- 半透明遮罩层（先显示）-->
    <view class="mask-overlay" :class="{ 'is-fading-out': isFadingOut }"></view>
    
    <!-- 内容层（延迟显示）-->
    <view class="content-wrapper" :class="{ 'is-fading-out': isFadingOut }">
        <!-- 左滑提示（上一题） -->
        <view v-if="showLeft" class="arrow-container arrow-left">
          <view class="arrow-wrapper">
            <view class="arrow"></view>
            <view class="arrow arrow-delay-1"></view>
            <view class="arrow arrow-delay-2"></view>
          </view>
          <text class="tip-text">左滑下一题</text>
        </view>

        <!-- 中间提示文字 -->
        <view v-if="centerText" class="center-text">
          <text class="text">{{ centerText }}</text>
        </view>

        <!-- 右滑提示（下一题） -->
        <view v-if="showRight" class="arrow-container arrow-right">
          <view class="arrow-wrapper">
            <view class="arrow"></view>
            <view class="arrow arrow-delay-1"></view>
            <view class="arrow arrow-delay-2"></view>
          </view>
          <text class="tip-text">右滑上一题</text>
        </view>

        <!-- 下一步按钮（绝对定位在中间文字下方） -->
        <view v-if="showNextButton" class="next-button-wrapper">
          <view class="next-button bg-primary" @click="handleNext">
            <text class="button-text">下一步</text>
          </view>
        </view>
      </view>
    </view>
</template>

<script lang="ts" setup>
interface Props {
  visible?: boolean;        // 是否显示提示
  showLeft?: boolean;       // 是否显示左滑提示
  showRight?: boolean;      // 是否显示右滑提示
  centerText?: string;      // 中间提示文字
  showNextButton?: boolean; // 是否显示"下一步"按钮
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  showLeft: true,
  showRight: true,
  centerText: '滑动切换题目',
  showNextButton: true
});

const emit = defineEmits<{
  next: []  // 点击"下一步"按钮时触发
}>();

// 内部状态控制动画
const isShowing = ref(false);
const isFadingOut = ref(false);

// 监听 visible 变化，控制渐入渐出动画
watch(() => props.visible, (newVal) => {
  if (newVal) {
    // 显示：立即渲染并播放渐入动画
    isShowing.value = true;
    isFadingOut.value = false;
  } else {
    // 隐藏：先播放渐出动画，300ms后再移除DOM
    isFadingOut.value = true;
    setTimeout(() => {
      isShowing.value = false;
      isFadingOut.value = false;
    }, 300);
  }
}, { immediate: true });

// 处理下一步按钮点击
const handleNext = () => {
  emit('next');
};
</script>

<style lang="scss" scoped>
.swiper-tip-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

// 遮罩层（先显示，快速渐入）
.mask-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  
  // 遮罩层渐入动画（0.2s，无延迟）
  opacity: 0;
  animation: maskFadeIn 0.2s ease-in-out forwards;
  
  // 遮罩层渐出动画
  &.is-fading-out {
    animation: maskFadeOut 0.3s ease-in-out forwards;
  }
}

// 遮罩层渐入动画
@keyframes maskFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// 遮罩层渐出动画
@keyframes maskFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

// 内容层（延迟显示，带缩放效果）
.content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 30rpx;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
  
  // 内容层渐入动画（延迟0.2s，让遮罩层先显示）
  opacity: 0;
  transform: scale(0.95);
  animation: contentFadeIn 0.3s ease-in-out 0.2s forwards;
  
  // 内容层渐出动画
  &.is-fading-out {
    animation: contentFadeOut 0.3s ease-in-out forwards;
  }
}

// 内容层渐入动画
@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

// 内容层渐出动画
@keyframes contentFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.arrow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  flex-shrink: 0;
  z-index: 1;
}

.arrow-wrapper {
  position: relative;
  width: 80rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  border-left: 6rpx solid #fff;  // 改为白色，在半透明黑色背景上更清晰
  border-bottom: 6rpx solid #fff;
  opacity: 0;
  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.4));  // 添加阴影增强可见性
  z-index: 1;
  
  // 左箭头
  .arrow-left & {
    transform: rotate(45deg);
    animation: slide-left 2s ease-in-out infinite;  // 增加到2秒，更流畅
  }
  
  // 右箭头
  .arrow-right & {
    transform: rotate(-135deg);
    animation: slide-right 2s ease-in-out infinite;  // 增加到2秒，更流畅
  }
  
  // 延迟动画，创建均匀分布的效果
  &.arrow-delay-1 {
    animation-delay: 0.5s;  // 从0.3s增加到0.5s，更均匀
  }
  
  &.arrow-delay-2 {
    animation-delay: 1s;  // 从0.6s增加到1s，更均匀
  }
}

.tip-text {
  font-size: 24rpx;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  z-index: 1;
}

// 中间提示文字（白色背景卡片，与左右箭头图标对齐）
.center-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  flex-shrink: 0;
  z-index: 1;
  
  // 恢复白色背景卡片样式
  background: rgba(255, 255, 255, 0.95);
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  
  // 向上偏移，与箭头图标对齐（不包含下方文字的高度）
  // 箭头容器有 gap: 16rpx + 文字高度约 40rpx，所以向上偏移一半
  margin-bottom: 30rpx;
  
  .text {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
  }
}

// 下一步按钮容器（绝对定位）
.next-button-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 140rpx;  // 向下偏移，显示在中间文字下方
  z-index: 1;
}

// 下一步按钮
.next-button {
  // background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
  @apply bg-primary;
  padding: 12rpx 30rpx;
  // border-radius: 40rpx;
  border-radius: 4px;
  box-shadow: 0 6rpx 20rpx rgba(25, 118, 210, 0.3);
  pointer-events: auto;
  transition: all 0.3s ease;
  white-space: nowrap;
  
  &:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 12rpx rgba(25, 118, 210, 0.2);
  }
  
  .button-text {
    font-size: 24rpx;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2rpx;
  }
}

// 左滑动画
@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(30rpx) rotate(45deg);  // 增加移动距离
  }
  
  30% {
    opacity: 1;  // 提前完全显示
  }
  
  70% {
    opacity: 1;  // 延长完全显示时间
  }
  
  100% {
    opacity: 0;
    transform: translateX(-30rpx) rotate(45deg);  // 增加移动距离
  }
}

// 右滑动画
@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(-30rpx) rotate(-135deg);  // 增加移动距离
  }
  
  30% {
    opacity: 1;  // 提前完全显示
  }
  
  70% {
    opacity: 1;  // 延长完全显示时间
  }
  
  100% {
    opacity: 0;
    transform: translateX(30rpx) rotate(-135deg);  // 增加移动距离
  }
}
</style>