<template>
  <view class="welcome-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>

    <!-- 主要内容区 -->
    <view class="content-wrapper">
      <!-- 欢迎区域 -->
      <view class="welcome-section" :class="{ 'fade-in': showContent }">
        <view class="avatar-wrapper">
          <view class="avatar-glow">
            <view class="avatar-inner">
              <uni-icons type="person-filled" size="80" color="#ffffff"></uni-icons>
            </view>
          </view>
        </view>
        
        <view class="greeting-content">
          <text class="greeting-text">{{ greetingTime }}</text>
          <text class="user-name">{{ userName }}</text>
          <text class="welcome-message">欢迎回来，开启美好的一天</text>
        </view>
      </view>

      <!-- 底部日期 -->
      <view class="date-info" :class="{ 'fade-in': showContent }">
        <text class="date-text">{{ currentDate }}</text>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import useUserStore from '@/store/modules/user';

const userStore = useUserStore();
const showContent = ref(false);

// 获取用户名
const userName = computed(() => userStore.name || '用户');

// 获取问候语
const greetingTime = computed(() => {
  const hour = new Date().getHours();
  if (hour < 6) return '夜深了';
  if (hour < 9) return '早上好';
  if (hour < 12) return '上午好';
  if (hour < 14) return '中午好';
  if (hour < 18) return '下午好';
  if (hour < 22) return '晚上好';
  return '夜深了';
});

// 获取当前日期
const currentDate = computed(() => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const weekDay = weekDays[now.getDay()];
  return `${year}年${month}月${day}日 ${weekDay}`;
});

onMounted(() => {
  // 延迟显示内容以触发动画
  setTimeout(() => {
    showContent.value = true;
  }, 100);
});
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.welcome-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 背景装饰
.bg-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  
  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 20s infinite ease-in-out;
  }
  
  .circle-1 {
    width: 400rpx;
    height: 400rpx;
    top: -200rpx;
    right: -200rpx;
    animation-delay: 0s;
  }
  
  .circle-2 {
    width: 300rpx;
    height: 300rpx;
    bottom: -150rpx;
    left: -150rpx;
    animation-delay: 5s;
  }
  
  .circle-3 {
    width: 250rpx;
    height: 250rpx;
    top: 50%;
    right: -125rpx;
    animation-delay: 10s;
  }
}

.content-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 60rpx;
}

// 欢迎区域
.welcome-section {
  text-align: center;
  opacity: 0;
  
  &.fade-in {
    animation: fadeInUp 1s ease forwards;
  }
  
  .avatar-wrapper {
    margin-bottom: 60rpx;
    display: flex;
    justify-content: center;
    
    .avatar-glow {
      position: relative;
      width: 240rpx;
      height: 240rpx;
      
      .avatar-inner {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(20rpx);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 30rpx 80rpx rgba(0, 0, 0, 0.3);
        border: 6rpx solid rgba(255, 255, 255, 0.2);
        animation: pulse 3s infinite ease-in-out;
      }
    }
  }
  
  .greeting-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rpx;
    
    .greeting-text {
      font-size: 36rpx;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 300;
      letter-spacing: 4rpx;
    }
    
    .user-name {
      font-size: 72rpx;
      color: #ffffff;
      font-weight: 700;
      text-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
      letter-spacing: 4rpx;
    }
    
    .welcome-message {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 300;
      margin-top: 10rpx;
      letter-spacing: 2rpx;
    }
  }
}

// 底部日期
.date-info {
  margin-top: 80rpx;
  text-align: center;
  opacity: 0;
  
  &.fade-in {
    animation: fadeIn 1.5s ease forwards 0.5s;
  }
  
  .date-text {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    letter-spacing: 2rpx;
  }
}

// 动画定义
@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(30rpx, -30rpx) rotate(120deg);
  }
  66% {
    transform: translate(-20rpx, 20rpx) rotate(240deg);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 30rpx 80rpx rgba(0, 0, 0, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 40rpx 100rpx rgba(0, 0, 0, 0.4);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>