<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <header class="app-header">
      <div class="header-left">
        <router-link to="/" class="logo">
          智能算法展示平台
        </router-link>
      </div>
      
      <div class="header-center">
        <el-menu :default-active="activeMenu" mode="horizontal" background-color="#fff" text-color="#333" active-text-color="#409EFF">
          <el-menu-item index="/">
            <router-link to="/">首页</router-link>
          </el-menu-item>
          <el-menu-item index="/algorithms">
            <router-link to="/algorithms">算法列表</router-link>
          </el-menu-item>
          <el-menu-item v-if="userStore.isAdmin" index="/admin">
            <router-link to="/admin">管理员中心</router-link>
          </el-menu-item>
        </el-menu>
      </div>
      
      <div class="header-right">
        <template v-if="userStore.isLoggedIn">
          <el-dropdown>
            <span class="user-info">
              {{ userStore.user?.username }}
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template v-else>
          <router-link to="/login" class="login-btn">登录</router-link>
          <router-link to="/register" class="register-btn">注册</router-link>
        </template>
      </div>
    </header>
    
    <!-- 主内容区 -->
    <main class="app-main">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>
    
    <!-- 底部信息 -->
    <footer class="app-footer">
      <p>© 2026 智能算法展示平台. 保留所有权利.</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from './stores/user'
import { ArrowDown } from '@element-plus/icons-vue'

// 获取用户存储
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

// 计算当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})

// 处理退出登录
const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}

// 初始化用户状态
onMounted(() => {
  userStore.init()
})
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
  text-decoration: none;
}

.header-center {
  flex: 1;
  margin: 0 40px;
}

.user-info {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.login-btn,
.register-btn {
  margin-left: 15px;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
}

.login-btn {
  color: #409EFF;
  border: 1px solid #409EFF;
}

.register-btn {
  color: #fff;
  background-color: #409EFF;
}

.app-main {
  flex: 1;
  padding: 20px;
  background-color: #f5f7fa;
}

.app-footer {
  height: 60px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e4e7ed;
  font-size: 14px;
  color: #909399;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
