<!--
 * @Date: 2026-01-28 17:24:46
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-28 17:25:09
 * @FilePath: /mlaj/src/components/welcome/WelcomeContent.vue
 * @Description: 欢迎页内容组件
-->
<template>
  <div class="welcome-content">
    <!-- 标题区域 -->
    <div class="z-10 mt-20 flex w-full flex-col items-center px-8">
      <img :src="titleImg" class="mb-4 w-full max-w-[300px] object-contain" alt="生命力教育联盟" />
    </div>

    <!-- 功能入口区域 - 水平布局，自动推到底部 -->
    <div class="entry-orbit mt-auto">
      <div class="orbit-entries">
        <WelcomeEntryItem
          v-for="entry in entries"
          :key="entry.id"
          :entry="entry"
          class="orbit-entry"
          @click="handleEntryClick"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { welcomeEntries } from '@/config/welcomeEntries'
import WelcomeEntryItem from './WelcomeEntryItem.vue'

const router = useRouter()
const entries = ref(welcomeEntries)

// 导入标题图片
const titleImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/title007@2x.png'

const handleEntryClick = entry => {
  if (entry.isExternal) {
    // 外部链接：获取用户ID并拼接
    const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}')
    const userId = currentUser.id || currentUser.user_id || ''
    const url = entry.externalUrl + userId
    window.open(url, '_blank')
  } else {
    // 内部路由跳转
    router.push(entry.route)
  }
}
</script>

<style lang="less" scoped>
.welcome-content {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 3rem;
  z-index: 1;
}

.entry-orbit {
  position: relative;
  width: 100%;
  max-width: 36rem;
  margin-top: auto;

  .orbit-entries {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;

    .orbit-entry {
      flex: 1;
      display: flex;
      justify-content: center;
      animation: float 3s ease-in-out infinite;

      &:nth-child(1) {
        animation-delay: 0s;
      }

      &:nth-child(2) {
        animation-delay: 0.5s;
      }

      &:nth-child(3) {
        animation-delay: 1s;
      }
    }
  }
}

// 动画定义
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
</style>