<template>
  <view class="splash-container">
    <!-- 背景装饰层 -->
    <view class="background-layer">
      <!-- 渐变背景 -->
      <view class="gradient-bg"></view>
      
      <!-- 右上角树枝装饰 -->
      <view class="branch-decoration">
        <view class="branch-stem"></view>
        <view class="branch-leaf leaf-1"></view>
        <view class="branch-leaf leaf-2"></view>
        <view class="branch-leaf leaf-3"></view>
        <view class="small-flower">
          <view class="petal"></view>
          <view class="petal"></view>
          <view class="petal"></view>
          <view class="petal"></view>
          <view class="center"></view>
        </view>
      </view>
      
      <!-- 左上角优雅光环 -->
      <view class="elegant-halo">
        <view class="halo-ring ring-1"></view>
        <view class="halo-ring ring-2"></view>
        <view class="halo-ring ring-3"></view>
        <view class="glow-orb"></view>
        <view class="sparkle sparkle-1"></view>
        <view class="sparkle sparkle-2"></view>
        <view class="sparkle sparkle-3"></view>
      </view>
      
      <!-- 左下角现代线条艺术 -->
      <view class="modern-lines">
        <view class="flow-line line-1"></view>
        <view class="flow-line line-2"></view>
        <view class="flow-line line-3"></view>
        <view class="glow-node node-1"></view>
        <view class="glow-node node-2"></view>
        <view class="floating-orb"></view>
      </view>
      
      <!-- 飘落的花瓣动画 -->
      <view class="falling-petals">
        <view class="falling-petal petal-1"></view>
        <view class="falling-petal petal-2"></view>
        <view class="falling-petal petal-3"></view>
        <view class="falling-petal petal-4"></view>
        <view class="falling-petal petal-5"></view>
      </view>
    </view>
    
    <!-- 主内容区 -->
    <view class="content-area">
      <!-- 标题区域 -->
      <view class="title-section">
        <!-- 主标题 -->
        <view class="main-title-wrapper">
          <text class="main-title">因为AI 所以爱</text>
        </view>
        
        <!-- 装饰小花朵 -->
        <view class="title-flower">
          <view class="tiny-petal"></view>
          <view class="tiny-petal"></view>
          <view class="tiny-petal"></view>
          <view class="tiny-petal"></view>
          <view class="tiny-center"></view>
        </view>
        
        <!-- 副标题 -->
        <view class="sub-title-wrapper">
          <text class="sub-title">让创意绽放</text>
        </view>
      </view>
      
      <!-- 装饰分隔线 -->
      <view class="divider-line">
        <view class="line-segment"></view>
        <view class="center-flower">
          <view class="mini-petal"></view>
          <view class="mini-petal"></view>
          <view class="mini-petal"></view>
          <view class="mini-petal"></view>
        </view>
        <view class="line-segment"></view>
      </view>
      
      <!-- 倒计时和跳过按钮 -->
      <view class="bottom-section">
        <view class="countdown-container" @click="skipToHome">
          <text class="countdown-text">{{ countdown }}s</text>
          <text class="skip-text">跳过</text>
        </view>
      </view>
    </view>
  </view>
</template>

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

// 倒计时
const countdown = ref(5);
let timer = null;

// 跳转到主页
const skipToHome = () => {
  if (timer) {
    clearInterval(timer);
  }

  // 标记已显示过启动页
  uni.setStorageSync('hasShownSplash', 'true');

  // 跳转到 tabBar 首页（发现页）
  uni.switchTab({
    url: '/pages/drama/index',
    fail: () => {
      // 如果 switchTab 失败，使用 reLaunch
      uni.reLaunch({
        url: '/pages/drama/index'
      });
    }
  });
};

// 生命周期
onMounted(() => {
  // 启动倒计时
  timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      skipToHome();
    }
  }, 1000);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style scoped>
/* 容器样式 */
.splash-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #f8f6f0;
  overflow: hidden;
}

/* 背景装饰层 */
.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 渐变背景 */
.gradient-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center top, rgba(255, 123, 123, 0.05) 0%, transparent 50%),
              radial-gradient(ellipse at bottom left, rgba(74, 155, 74, 0.05) 0%, transparent 50%),
              radial-gradient(ellipse at bottom right, rgba(255, 235, 153, 0.05) 0%, transparent 50%);
}

/* 右上角树枝装饰 */
.branch-decoration {
  position: absolute;
  top: 60rpx;
  right: 40rpx;
  width: 120rpx;
  height: 160rpx;
  animation: gentle-sway 4s ease-in-out infinite;
}

.branch-stem {
  position: absolute;
  top: 20rpx;
  left: 50%;
  width: 3rpx;
  height: 100rpx;
  background: #4a9b4a;
  transform: translateX(-50%) rotate(15deg);
  border-radius: 2rpx;
}

.branch-leaf {
  position: absolute;
  width: 30rpx;
  height: 45rpx;
  background: #4a9b4a;
  border-radius: 0 100% 0 100%;
  opacity: 0.9;
}

.leaf-1 {
  top: 35rpx;
  left: 35rpx;
  transform: rotate(-30deg);
}

.leaf-2 {
  top: 60rpx;
  right: 25rpx;
  transform: rotate(45deg);
}

.leaf-3 {
  top: 85rpx;
  left: 40rpx;
  transform: rotate(-15deg);
  opacity: 0.8;
}

.small-flower {
  position: absolute;
  top: 15rpx;
  right: 20rpx;
  width: 40rpx;
  height: 40rpx;
}

.small-flower .petal {
  position: absolute;
  width: 10rpx;
  height: 18rpx;
  background: #ff7b7b;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: 50% 100%;
  opacity: 0.9;
}

.small-flower .petal:nth-child(1) { transform: rotate(0deg) translateY(-8rpx); }
.small-flower .petal:nth-child(2) { transform: rotate(90deg) translateY(-8rpx); }
.small-flower .petal:nth-child(3) { transform: rotate(180deg) translateY(-8rpx); }
.small-flower .petal:nth-child(4) { transform: rotate(270deg) translateY(-8rpx); }

.small-flower .center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8rpx;
  height: 8rpx;
  background: #ffeb99;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* 左上角优雅光环 */
.elegant-halo {
  position: absolute;
  top: 80rpx;
  left: 60rpx;
  width: 100rpx;
  height: 100rpx;
}

.halo-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2rpx solid transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ring-1 {
  width: 60rpx;
  height: 60rpx;
  border-color: rgba(255, 123, 123, 0.3);
  animation: rotate-slow 8s linear infinite;
}

.ring-2 {
  width: 80rpx;
  height: 80rpx;
  border-color: rgba(255, 235, 153, 0.3);
  animation: rotate-reverse 10s linear infinite;
}

.ring-3 {
  width: 100rpx;
  height: 100rpx;
  border-color: rgba(74, 155, 74, 0.2);
  animation: rotate-slow 12s linear infinite;
}

.glow-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20rpx;
  height: 20rpx;
  background: radial-gradient(circle, rgba(255, 123, 123, 0.6) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-glow 2s ease-in-out infinite;
}

.sparkle {
  position: absolute;
  width: 4rpx;
  height: 4rpx;
  background: #ff7b7b;
  border-radius: 50%;
  animation: sparkle-twinkle 3s ease-in-out infinite;
}

.sparkle-1 {
  top: 10rpx;
  left: 30rpx;
  animation-delay: 0s;
}

.sparkle-2 {
  top: 40rpx;
  right: 15rpx;
  animation-delay: 1s;
}

.sparkle-3 {
  bottom: 20rpx;
  left: 15rpx;
  animation-delay: 2s;
}

/* 左下角现代线条艺术 */
.modern-lines {
  position: absolute;
  bottom: 100rpx;
  left: 40rpx;
  width: 150rpx;
  height: 120rpx;
}

.flow-line {
  position: absolute;
  height: 2rpx;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 123, 123, 0.6) 50%, transparent 100%);
  border-radius: 1rpx;
  transform-origin: left center;
}

.line-1 {
  top: 20rpx;
  left: 0;
  width: 100rpx;
  transform: rotate(-15deg);
  animation: flow-pulse 3s ease-in-out infinite;
}

.line-2 {
  top: 50rpx;
  left: 10rpx;
  width: 120rpx;
  transform: rotate(10deg);
  animation: flow-pulse 3s ease-in-out infinite 0.5s;
}

.line-3 {
  top: 80rpx;
  left: 5rpx;
  width: 90rpx;
  transform: rotate(-25deg);
  animation: flow-pulse 3s ease-in-out infinite 1s;
}

.glow-node {
  position: absolute;
  width: 8rpx;
  height: 8rpx;
  background: radial-gradient(circle, #ff7b7b 0%, transparent 70%);
  border-radius: 50%;
  animation: node-pulse 2s ease-in-out infinite;
}

.node-1 {
  top: 45rpx;
  left: 80rpx;
}

.node-2 {
  top: 70rpx;
  left: 40rpx;
  animation-delay: 1s;
}

.floating-orb {
  position: absolute;
  top: 40rpx;
  right: 10rpx;
  width: 15rpx;
  height: 15rpx;
  background: radial-gradient(circle, rgba(255, 235, 153, 0.8) 0%, transparent 60%);
  border-radius: 50%;
  animation: float-around 6s ease-in-out infinite;
}

/* 飘落花瓣 */
.falling-petals {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.falling-petal {
  position: absolute;
  width: 20rpx;
  height: 25rpx;
  background: rgba(255, 123, 123, 0.6);
  border-radius: 0 100% 0 100%;
  animation: petal-fall 8s linear infinite;
}

.petal-1 {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 7s;
}

.petal-2 {
  left: 30%;
  animation-delay: 2s;
  animation-duration: 9s;
}

.petal-3 {
  left: 50%;
  animation-delay: 1s;
  animation-duration: 8s;
}

.petal-4 {
  left: 70%;
  animation-delay: 3s;
  animation-duration: 10s;
}

.petal-5 {
  left: 90%;
  animation-delay: 4s;
  animation-duration: 7s;
}

/* 主内容区 */
.content-area {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0 60rpx;
}

/* 标题区域 */
.title-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
  animation: fade-in-up 1s ease-out;
}

/* 主标题 */
.main-title-wrapper {
  margin-bottom: 30rpx;
  animation: fade-in-up 1s ease-out 0.2s both;
}

.main-title {
  font-size: 60rpx;
  font-weight: 900;
  color: #333;
  letter-spacing: 8rpx;
  text-shadow: 3rpx 3rpx 8rpx rgba(0, 0, 0, 0.1);
  display: block;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 装饰小花朵 */
.title-flower {
  position: relative;
  width: 40rpx;
  height: 40rpx;
  margin: 30rpx 0;
  animation: fade-in-scale 1s ease-out 0.3s both;
}

.tiny-petal {
  position: absolute;
  width: 12rpx;
  height: 20rpx;
  background: rgba(255, 123, 123, 0.8);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: 50% 100%;
}

.tiny-petal:nth-child(1) { 
  transform: rotate(0deg) translateY(-10rpx);
}
.tiny-petal:nth-child(2) { 
  transform: rotate(90deg) translateY(-10rpx);
}
.tiny-petal:nth-child(3) { 
  transform: rotate(180deg) translateY(-10rpx);
}
.tiny-petal:nth-child(4) { 
  transform: rotate(270deg) translateY(-10rpx);
}

.tiny-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10rpx;
  height: 10rpx;
  background: #ffeb99;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* 副标题 */
.sub-title-wrapper {
  position: relative;
  animation: fade-in-up 1s ease-out 0.4s both;
}

.sub-title {
  font-size: 32rpx;
  color: #ff7b7b;
  letter-spacing: 6rpx;
  display: block;
  text-align: center;
  font-weight: 500;
  position: relative;
}

/* 添加装饰星点 */
.sub-title-wrapper::before,
.sub-title-wrapper::after {
  content: '✦';
  position: absolute;
  font-size: 20rpx;
  color: rgba(255, 123, 123, 0.5);
  animation: sparkle-twinkle 3s ease-in-out infinite;
}

.sub-title-wrapper::before {
  left: -40rpx;
  top: 50%;
  transform: translateY(-50%);
}

.sub-title-wrapper::after {
  right: -40rpx;
  top: 50%;
  transform: translateY(-50%);
  animation-delay: 1.5s;
}

/* 装饰分隔线 */
.divider-line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80rpx;
  animation: fade-in 1s ease-out 0.6s both;
}

.line-segment {
  width: 60rpx;
  height: 1rpx;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 123, 123, 0.5) 50%, transparent 100%);
}

.center-flower {
  position: relative;
  width: 30rpx;
  height: 30rpx;
  margin: 0 20rpx;
}

.mini-petal {
  position: absolute;
  width: 8rpx;
  height: 12rpx;
  background: rgba(255, 123, 123, 0.6);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: 50% 100%;
}

.mini-petal:nth-child(1) { transform: rotate(0deg) translateY(-6rpx); }
.mini-petal:nth-child(2) { transform: rotate(90deg) translateY(-6rpx); }
.mini-petal:nth-child(3) { transform: rotate(180deg) translateY(-6rpx); }
.mini-petal:nth-child(4) { transform: rotate(270deg) translateY(-6rpx); }

/* 底部区域 */
.bottom-section {
  position: absolute;
  bottom: 80rpx;
  right: 60rpx;
  animation: fade-in 1s ease-out 0.9s both;
}

.countdown-container {
  display: flex;
  align-items: center;
  padding: 15rpx 30rpx;
  background: rgba(255, 255, 255, 0.9);
  border: 2rpx solid rgba(255, 123, 123, 0.3);
  border-radius: 50rpx;
  backdrop-filter: blur(10rpx);
  transition: all 0.3s ease;
}

.countdown-container:active {
  transform: scale(0.95);
  background: rgba(255, 123, 123, 0.1);
}

.countdown-text {
  font-size: 24rpx;
  color: #ff7b7b;
  font-weight: bold;
  margin-right: 10rpx;
}

.skip-text {
  font-size: 24rpx;
  color: #666;
}

/* 动画定义 */
@keyframes gentle-sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes rotate-slow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotate-reverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes pulse-glow {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.4;
  }
}

@keyframes sparkle-twinkle {
  0%, 100% { 
    opacity: 0;
    transform: scale(0);
  }
  50% { 
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes flow-pulse {
  0%, 100% { 
    opacity: 0.3;
    transform: scaleX(0.8) rotate(var(--rotation, 0deg));
  }
  50% { 
    opacity: 0.8;
    transform: scaleX(1) rotate(var(--rotation, 0deg));
  }
}

@keyframes node-pulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.6;
  }
  50% { 
    transform: scale(1.5);
    opacity: 1;
  }
}

@keyframes float-around {
  0% { 
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  25% { 
    transform: translate(-20rpx, -10rpx) scale(1.1);
    opacity: 0.6;
  }
  50% { 
    transform: translate(-10rpx, -20rpx) scale(0.9);
    opacity: 0.8;
  }
  75% { 
    transform: translate(10rpx, -10rpx) scale(1.1);
    opacity: 0.6;
  }
  100% { 
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
}

@keyframes petal-fall {
  0% {
    transform: translateY(-100rpx) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(calc(100vh + 100rpx)) translateX(100rpx) rotate(360deg);
    opacity: 0;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-in-scale {
  from { 
    opacity: 0;
    transform: scale(0.5) rotate(180deg);
  }
  to { 
    opacity: 1;
    transform: scale(1) rotate(360deg);
  }
}
</style> 