<template>
  <div class="welcome-content">
    <!-- 功能入口区域 - 轨道布局 -->
    <div class="entry-orbit">
      <!-- 3个功能入口 - 轨道布局 -->
      <div class="orbit-entries">
        <WelcomeEntryItem
          v-for="entry in entries"
          :key="entry.id"
          :entry="entry"
          class="orbit-entry"
          :class="`orbit-entry-${entry.priority}`"
          @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 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;
  justify-content: flex-end;
  padding: 2rem;
  padding-bottom: 8rem;
  z-index: 1;
}

.entry-orbit {
  position: relative;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1;

  .orbit-entries {
    position: relative;
    width: 100%;
    height: 100%;

    .orbit-entry {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: float 3s ease-in-out infinite;

      &.orbit-entry-1 {
        // 课程中心 - 顶部偏左
        top: 5%;
        left: 40%;
        animation-delay: 0s;
      }

      &.orbit-entry-2 {
        // 活动中心 - 右下
        top: 75%;
        left: 80%;
        animation-delay: 0.5s;
      }

      &.orbit-entry-3 {
        // 个人中心 - 左下
        top: 70%;
        left: 20%;
        animation-delay: 1s;
      }
    }
  }
}

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