<template>
  <div class="personal-center">
    <!-- Banner组件 -->
    <PersonalCenterBanner />
    
    <!-- 内容区域 -->
    <div class="content-wrapper">
      <div class="content-inner">
        <!-- 左侧导航栏 -->
        <div class="sidebar">
          <div class="nav-item" 
               v-for="item in navItems" 
               :key="item.key"
               :class="{ active: currentRoute === item.key }"
               @click="handleNavClick(item.key)">
            {{ item.label }}
          </div>
        </div>
        
        <!-- 右侧内容区域 -->
        <div class="main-content">
          <!-- 面包屑导航 -->
          <div class="breadcrumb">
            <span class="breadcrumb-item" @click="goHome">首页</span>
            <span class="breadcrumb-separator">></span>
            <span class="breadcrumb-item current">个人中心</span>
          </div>
          
          <router-view />
        </div>
      </div>
    </div>  
    <Footer />
  </div>
</template>

<script setup>
import { computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import PersonalCenterBanner from '../../components/PersonalCenterBanner.vue'
import { useUserStore } from '../../store/user'
import { getCurrentUser } from '../../api/user'
import { handleAuthFailure } from '../../utils/auth'
import Footer from '../../components/Footer.vue'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 导航项配置
const navItems = [
  { key: 'key-management', label: '密钥管理' },
  { key: 'favorites', label: '我的收藏' },
  { key: 'orders', label: '订单管理' },
  { key: 'account', label: '账户管理' },
  { key: 'promotion', label: '推广拉新' },
  { key: 'publish', label: '发布作品' },
  // { key: 'test', label: '页面测试' }, // 隐藏测试页面入口
  { key: 'help', label: '帮助中心' }
]

// 当前路由
const currentRoute = computed(() => {
  const path = route.path
  if (path.includes('key-management')) return 'key-management'
  if (path.includes('favorites')) return 'favorites'
  if (path.includes('orders')) return 'orders'
  if (path.includes('account')) return 'account'
  if (path.includes('promotion')) return 'promotion'
  if (path.includes('publish')) return 'publish'
  if (path.includes('test')) return 'test'
  if (path.includes('help')) return 'help'
  return 'key-management' // 默认选中密钥管理
})

// 处理导航点击
const handleNavClick = (key) => {
  router.push(`/personal-center/${key}`)
}

// 更新用户信息
const updateUserInfo = async () => {
  try {
    console.log('PersonalCenter index: 开始获取最新用户信息')
    const response = await getCurrentUser()
    console.log('PersonalCenter index: API响应数据:', response)
    
    if (response.code === 200) {
      console.log('PersonalCenter index: 更新用户信息到store:', response.data)
      userStore.updateUserInfo(response.data)
      console.log('PersonalCenter index: 用户信息已更新到store')
      
      // 验证更新后的用户信息
      const updatedUserInfo = userStore.getUserInfo
      console.log('PersonalCenter index: 验证更新后的用户信息:', updatedUserInfo)
    } else if (response.code === 500) {
      // 特别处理500错误
      console.error('PersonalCenter index: /me接口返回500错误:', response.message)
      handleAuthFailure(router, response.message || '用户信息获取失败，请重新登录')
    } else {
      console.error('PersonalCenter index: 获取用户信息失败:', response.message)
    }
  } catch (error) {
    console.error('PersonalCenter index: 更新用户信息失败:', error)
    
    // 检查是否是500错误
    if (error.response && error.response.status === 500) {
      console.error('PersonalCenter index: 捕获到/me接口500错误')
      const errorMessage = error.response.data?.message || '用户信息获取失败，请重新登录'
      handleAuthFailure(router, errorMessage)
    } else if (error.response && error.response.status === 401) {
      // 401错误说明认证失败
      console.error('PersonalCenter index: 捕获到401认证错误')
      handleAuthFailure(router, '登录已过期，请重新登录')
    }
  }
}

// 跳转到首页
const goHome = () => {
  router.push('/')
}

// 页面加载时更新用户信息
onMounted(() => {
  updateUserInfo()
})

// 监听路由变化，在个人中心页面间切换时更新用户信息
watch(() => route.path, (newPath, oldPath) => {
  if (newPath.startsWith('/personal-center') && newPath !== oldPath) {
    // 延迟一点时间再更新，避免频繁请求
    setTimeout(() => {
      updateUserInfo()
    }, 100)
  }
})
</script>

<style scoped>
/* 去除:root，直接使用固定值确保生效 */

.personal-center {
  min-height: 100vh;
  background-color:white;
  /* 确保整个页面不被Header遮盖 */
  padding-top: 60px;
}

.content-wrapper {
  display: flex;
  justify-content: center; /* 🎯 与Header center-section一致的居中方式 */
  align-items: flex-start;
  min-height: calc(100vh - 500px); /* 350px Banner + 60px Header */
  position: relative;
  background-color: white;
  max-width: 100vw;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 80px); /* 🎯 与Header一致的响应式padding */
  gap: 80px; /* 🎯 增加侧边栏右边距，提供更好的视觉间距 */
  box-sizing: border-box;
}

.content-inner {
  display: flex;
  width: 100%;
  max-width: 1400px; /* 限制最大宽度，实现居中效果 */
  margin-left: 120px; /* 🎯 基础左边距，与Header导航栏子项(100px)视觉对齐 */
  gap: 35px; /* 🎯 增加侧边栏与主内容区间距 */
  align-items: flex-start;
}

/* 面包屑导航样式 */
.breadcrumb {

  margin-bottom: 20px;
  display: flex;
  align-items: center;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0px;
  color: #666;
  z-index: 1;
  width: 100%;
}

.breadcrumb-item {
  cursor: pointer;
  transition: color 0.3s ease;
  color: #666;
}

.breadcrumb-item:hover {
  color: #1890ff;
}

.breadcrumb-item.current {
  color: #333;
  cursor: default;
}

.breadcrumb-item.current:hover {
  color: #333;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #999;
}

.sidebar {
  width: 220px; /* 固定宽度 */
  height: 478px;
  margin-top: 60px;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 30px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  overflow: visible;
  flex-shrink: 0; /* 防止侧边栏被压缩 */
}

.nav-item {
  padding: 18px 28px; /* 恢复原始padding */
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  color: #333;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0px;
  margin: 6px 16px; /* 恢复原始margin */
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.nav-item:hover {
  background-color: #e9ecef;
  color: #495057;
}

.nav-item.active {
  background-color: #343a40;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateX(4px);
  position: relative;
  overflow: visible;
  border-radius: 6px 0 0 6px;
  margin-left: 0;
  padding-left: 28px; /* 恢复原始padding-left */
}

.nav-item.active::after {
  content: '';
  position: absolute;
  right: -20px;
  top: 0;
  width: 20px;
  height: 100%;
  background-color: #343a40;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.main-content {
  flex: 1; /* 占据剩余空间 */
  background-color: transparent;
  margin-top: 60px;
  margin-bottom: 20px;
  border-radius: 0;
  padding: 24px 0; /* 移除左右padding，由gap统一控制间距 */
  box-shadow: none;
  position: relative;
  z-index: 5;
  min-height: 478px;
  min-width: 0; /* 确保flex子元素可以收缩 */
  overflow-x: hidden; /* 防止内容水平溢出 */
  display: flex;
  flex-direction: column;
}

/* 🎯 新的响应式策略：与Header完全同步 */

/* PC端大屏幕 - 与Header 1501px+一致 */
@media (min-width: 1501px) {
  .content-wrapper {
    padding: 0 clamp(20px, 3vw, 80px); /* 🎯 与Header完全一致 */
  }
  
  .content-inner {
    margin-left: clamp(85px, 7vw, 110px); /* 🎯 响应式左边距，与Header导航栏子项对齐 */
  }
}

/* 桌面端各断点 - 与Header同步 */
@media (max-width: 1600px) {
  .content-wrapper {
    padding: 0 35px; /* 🎯 与Header一致 */
  }
  
  .content-inner {
    margin-left: 98px; /* 🎯 适配1600px断点，与导航栏子项视觉对齐 */
  }
}

@media (max-width: 1500px) {
  .content-wrapper {
    padding: 0 20px; /* 🎯 与Header一致 */
  }
  
  .content-inner {
    margin-left: 50px; /* 🎯 移动端导航隐藏，减少左边距 */
  }
  
  .nav-item {
    padding: 16px 24px;
    font-size: 15px;
  }
}

@media (max-width: 1400px) {
  .content-wrapper {
    padding: 0 30px; /* 🎯 与Header一致 */
  }
  
  .content-inner {
    margin-left: 95px; /* 🎯 适配1400px断点，与导航栏子项视觉对齐 */
  }
}

@media (max-width: 1200px) {
  .content-wrapper {
    padding: 0 25px; /* 🎯 与Header一致 */
  }
  
  .content-inner {
    margin-left: 90px; /* 🎯 适配1200px断点，与导航栏子项视觉对齐 */
  }
  
  .breadcrumb {
    font-size: 14px;
  }
  
  .nav-item {
    padding: 14px 20px;
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  .content-wrapper {
    padding: 0 15px; /* 🎯 与Header一致 */
  }
  
  .content-inner {
    margin-left: 30px; /* 🎯 中屏尺寸，减少左边距 */
  }
  
  .sidebar {
    width: 200px; /* 适当减小侧边栏宽度 */
  }
  
  .nav-item {
    padding: 12px 18px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column; /* 移动端垂直布局 */
    padding: 0 15px; /* 🎯 与Header一致 */
    gap: 8px;
  }
  
  .content-inner {
    flex-direction: column; /* 移动端垂直布局 */
    max-width: none; /* 移动端移除最大宽度限制 */
    margin-left: 0; /* 🎯 移动端重置左边距 */
    gap: 15px; /* 🎯 移动端增加垂直间距 */
  }
  
  .breadcrumb {
    position: relative; /* 🎯 改为相对定位，避免与其他元素重合 */
    top: auto;
    left: auto;
    font-size: 13px;
    margin: 10px 0 5px 0; /* 🎯 添加上下边距，确保与其他元素有间距 */
    z-index: 1;
    width: 100%;
    order: -1; /* 🎯 确保面包屑在移动端显示在最上方 */
    padding: 8px 0; /* 🎯 增加内边距，提供更好的点击区域 */
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px;
    padding: 12px;
    overflow: hidden;
  }
  
  .main-content {
    margin: 8px 0 16px 0;
    padding: 12px 0;
  }
  
  .nav-item {
    padding: 8px 10px;
    font-size: 12px;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .nav-item.active {
    transform: none;
    border-radius: 6px;
    margin-left: 0;
    padding-left: 10px;
  }
  
  .nav-item.active::after {
    display: none;
  }
}

@media (max-width: 576px) {
  .content-wrapper {
    padding: 0 12px; /* 🎯 与Header一致 */
    gap: 6px;
  }
  
  .content-inner {
    margin-left: 0; /* 🎯 小屏移动端重置左边距 */
  }
  
  .breadcrumb {
    font-size: 11px;
    margin: 8px 0 4px 0; /* 🎯 调整边距 */
    padding: 6px 0; /* 🎯 适当减少内边距 */
  }
  
  .sidebar {
    padding: 8px;
    gap: 4px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  
  .main-content {
    padding: 10px 0;
  }
  
  .nav-item {
    padding: 6px 8px;
    font-size: 11px;
  }
}

@media (max-width: 500px) {
  .personal-center {
    padding-top: 100px; /* 为两行Header留出更多空间 */
  }
  
  .content-wrapper {
    padding: 0 12px; /* 与Header的500px断点对齐 */
    gap: 6px;
    min-height: calc(100vh - 450px); /* 调整视口计算，考虑两行Header */
  }
  
  .content-inner {
    margin-left: 0; /* 🎯 超小屏移动端重置左边距 */
  }
  
  .breadcrumb {
    margin: 6px 0 3px 0; /* 🎯 500px断点调整边距 */
    padding: 5px 0;
  }
}

@media (max-width: 480px) {
  .content-wrapper {
    padding: 0 10px; /* 与Header的480px断点对齐 */
    gap: 4px;
  }
  
  .content-inner {
    margin-left: 0; /* 🎯 最小屏移动端重置左边距 */
  }
  
  .personal-center {
    padding-top: 60px; /* 保持与Header高度一致 */
  }
  
  .breadcrumb {
    font-size: 10px;
    margin: 5px 0 2px 0; /* 🎯 480px断点调整边距 */
    padding: 4px 0;
  }
  
  .sidebar {
    padding: 6px;
    gap: 3px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    margin-top: 10px;
  }
  
  .main-content {
    padding: 8px 0;
  }
  
  .nav-item {
    padding: 4px 6px;
    font-size: 10px;
  }
}
</style> 