<template>
  <div class="growth-path-container">
    <!-- 个人信息栏 -->
    <div class="personal-info card">
      <div class="info-left">
        <el-avatar :size="80" :src="userInfo.avatar">
          <el-icon :size="40"><UserFilled /></el-icon>
        </el-avatar>
        <div class="info-content">
          <h2 class="user-name">{{ userInfo.name }}</h2>
          <div class="user-meta">
            <span class="position">{{ userInfo.position }}</span>
            <span class="separator">|</span>
            <span class="level">Lv.{{ userInfo.level }}</span>
            <span class="separator">|</span>
            <span class="exp">经验值：{{ userInfo.exp }}/{{ userInfo.nextLevelExp }}</span>
          </div>
          <el-progress :percentage="expPercentage" :stroke-width="10" />
        </div>
      </div>
      <div class="info-right">
        <el-button type="primary" @click="viewProfile">
          <el-icon class="el-icon--left"><User /></el-icon>
          个人中心
        </el-button>
      </div>
    </div>

    <div class="main-content">
      <!-- 能力雷达图 -->
      <div class="ability-radar card">
        <div class="card-header">
          <h3 class="card-title">能力评估</h3>
          <el-button type="primary" size="small" @click="analyzeSmartBadgeData" :loading="analyzing">
            <el-icon><TrendCharts /></el-icon>
            AI 分析智能工牌数据
          </el-button>
        </div>
        <div class="radar-chart" ref="radarChartRef"></div>
        
        <!-- AI 能力分析详细反馈 -->
        <div v-if="abilityFeedback.length > 0" class="ability-feedback">
          <div class="feedback-header">
            <el-icon><MagicStick /></el-icon>
            <span>AI 详细分析</span>
          </div>
          <div class="feedback-list">
            <div 
              v-for="item in abilityFeedback" 
              :key="item.name" 
              class="feedback-item"
              :class="{ 'weak': item.score < 80, 'good': item.score >= 80 && item.score < 90, 'excellent': item.score >= 90 }"
            >
              <div class="feedback-header-row">
                <span class="dimension-name">{{ item.name }}</span>
                <span class="dimension-score">{{ item.score }}分</span>
              </div>
              <p class="feedback-text">{{ item.feedback }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- AI 智能推荐学习模块 -->
      <div class="ai-learning-hub-inner">
      <!-- 模块头部 -->
      <div class="hub-header">
        <div class="header-left">
          <div class="ai-avatar">
            <div class="avatar-glow"></div>
            <el-icon :size="28"><Cpu /></el-icon>
          </div>
          <div class="header-text">
            <h2 class="hub-title">AI 智能学习助手</h2>
            <p class="hub-subtitle">基于能力评估的个性化课程推荐</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button 
            type="primary" 
            :loading="analyzing"
            @click="refreshRecommendations"
            class="refresh-btn"
          >
            <el-icon><MagicStick /></el-icon>
            重新分析
        </el-button>
        </div>
      </div>
      
      <!-- 推荐统计 -->
      <div class="recommendation-stats">
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><TrendCharts /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ recommendedCourses.length }}</div>
            <div class="stat-label">推荐课程</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><Trophy /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ getAverageImprovement() }}</div>
            <div class="stat-label">平均提升</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ getTotalHours() }}h</div>
            <div class="stat-label">总学时</div>
          </div>
        </div>
        </div>
        
      <!-- 推荐课程列表 -->
      <div class="recommendations-section">
        <div class="section-header">
          <h3 class="section-title">为您量身定制的学习路径</h3>
          <div class="filter-tabs">
            <el-radio-group v-model="selectedPriority" size="small" @change="filterByPriority">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="high">高优先级</el-radio-button>
              <el-radio-button label="medium">中优先级</el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <!-- 课程卡片网格 -->
        <div class="course-grid">
          <div 
            v-for="(course, index) in filteredCourses" 
            :key="course.id"
            class="smart-course-card"
            :class="{ 'featured': course.priority === 'high' }"
            :style="{ '--delay': index * 0.1 + 's' }"
            @click="viewCourseDetail(course)"
          >
            <!-- 卡片装饰 -->
            <div class="card-decoration">
              <div class="decoration-line"></div>
              <div class="priority-indicator" :class="course.priority">
                <el-icon><Star /></el-icon>
              </div>
            </div>

            <!-- 课程封面 -->
            <div class="smart-cover">
              <div class="cover-gradient"></div>
              <div class="cover-content">
                <div class="course-icon">
                  <el-icon :size="40"><Document /></el-icon>
                </div>
                <div class="match-score">
                  <div class="score-ring">
                    <svg class="score-circle" viewBox="0 0 36 36">
                      <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                      <path class="circle" :stroke-dasharray="`${course.matchScore}, 100`" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                    </svg>
                    <div class="score-text">{{ course.matchScore }}%</div>
                  </div>
                  <div class="score-label">匹配度</div>
                </div>
              </div>
            </div>

            <!-- 课程信息 -->
            <div class="smart-info">
              <div class="course-header">
                <h4 class="course-title">{{ course.name }}</h4>
                <div class="priority-tag" :class="course.priority">
                {{ getPriorityText(course.priority) }}
              </div>
            </div>
            
              <p class="course-description">{{ course.description }}</p>

              <!-- AI 分析结果 -->
              <div class="ai-analysis">
                <div class="analysis-header">
                  <el-icon><MagicStick /></el-icon>
                  <span>AI 分析结果</span>
                </div>
                <div class="analysis-content">
                  <div class="weakness-tags">
                    <el-tag 
                      v-for="weakness in course.targetWeakPoints" 
                      :key="weakness"
                      type="warning"
                      size="small"
                      effect="light"
                    >
                      <el-icon><Warning /></el-icon>
                      {{ weakness }}
                    </el-tag>
                  </div>
                  <div class="improvement-badge">
                    <el-icon><TrendCharts /></el-icon>
                    <span>预期提升 +{{ course.expectedImprovement }}分</span>
                  </div>
                </div>
              </div>
              
              <!-- 课程元数据 -->
              <div class="course-metadata">
                <div class="meta-item">
                  <el-icon><Timer /></el-icon>
                  <span>{{ course.duration }}小时</span>
                </div>
                <div class="meta-item">
                  <el-icon><Medal /></el-icon>
                  <span>{{ getDifficultyText(course.difficulty) }}</span>
                </div>
                <div class="meta-item">
                  <el-icon><UserFilled /></el-icon>
                  <span>{{ course.learnerCount }}人在学</span>
                </div>
              </div>
              
              <!-- 学习进度条 -->
              <div class="progress-section" v-if="course.progress > 0">
                <div class="progress-header">
                  <span class="progress-label">学习进度</span>
                  <span class="progress-value">{{ course.progress }}%</span>
                </div>
                <el-progress 
                  :percentage="course.progress" 
                  :stroke-width="6"
                  :show-text="false"
                  color="#667eea"
                />
              </div>

              <!-- 智能操作按钮 -->
              <div class="smart-actions">
                <el-button 
                  type="primary" 
                  class="primary-action"
                  @click.stop="enterCourse(course)"
                >
                  <el-icon><VideoPlay /></el-icon>
                  进入学习
                </el-button>
                
                <div class="action-grid">
                  <!-- 播课功能暂时关闭 -->
                  <el-button 
                    v-if="false"
                    class="action-btn"
                    @click.stop="playAudio(course)"
                  >
                    <el-icon><Headset /></el-icon>
                    播课
                  </el-button>
                  
                  <el-button 
                    class="action-btn"
                    @click.stop="chatWithCourse(course)"
                  >
                    <el-icon><ChatDotRound /></el-icon>
                    对话
                  </el-button>
                  
                  <el-button 
                    v-if="course.progress >= 80"
                    class="action-btn exam-btn"
                    @click.stop="startExam(course)"
                  >
                    <el-icon><Edit /></el-icon>
                    考试
                  </el-button>
                  
                  <el-button 
                    v-if="course.examPassed"
                    class="action-btn practice-btn"
                    @click.stop="startPractice(course)"
                  >
                    <el-icon><Microphone /></el-icon>
                    陪练
                </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 空状态 -->
        <div v-if="filteredCourses.length === 0" class="empty-recommendations">
          <div class="empty-icon">
            <el-icon :size="64" :class="{ 'rotating': analyzing }">
              <MagicStick v-if="!analyzing" />
              <Loading v-else />
            </el-icon>
          </div>
          <h3 class="empty-title">{{ analyzing ? 'AI 正在分析中...' : '暂无推荐课程' }}</h3>
          <p class="empty-description">
            {{ analyzing ? '正在分析您的智能工牌数据，为您推荐最适合的课程' : '暂无智能工牌数据，请先使用智能工牌记录对话' }}
          </p>
          <el-button v-if="!analyzing" type="primary" @click="analyzeSmartBadgeData">
            <el-icon><Refresh /></el-icon>
            重新分析
          </el-button>
        </div>
      </div>
      </div>
    </div>

    <!-- 成长路径图 -->
    <div class="growth-tree card">
      <div class="card-header">
        <h3 class="card-title">我的成长路径</h3>
        <div class="legend">
          <span class="legend-item completed">
            <i class="dot"></i>已完成
          </span>
          <span class="legend-item current">
            <i class="dot"></i>当前任务
          </span>
          <span class="legend-item locked">
            <i class="dot"></i>未解锁
          </span>
        </div>
      </div>
      
      <div class="tree-container">
        <div class="tree-level" v-for="(level, index) in growthPath" :key="index">
          <div class="level-header">
            <span class="level-name">{{ level.name }}</span>
            <span class="level-progress">{{ level.completed }}/{{ level.total }}</span>
          </div>
          <div class="level-nodes">
            <div 
              class="tree-node"
              :class="node.status"
              v-for="node in level.nodes"
              :key="node.id"
              @click="handleNodeClick(node)"
            >
              <div class="node-icon">
                <el-icon :size="24">
                  <component :is="getNodeIcon(node.status)" />
                </el-icon>
              </div>
              <div class="node-content">
                <h4 class="node-title">{{ node.title }}</h4>
                <p class="node-desc">{{ node.description }}</p>
                <div class="node-progress" v-if="node.status === 'current'">
                  <el-progress :percentage="node.progress" :stroke-width="6" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  UserFilled, 
  User, 
  TrendCharts, 
  MagicStick,  // AI分析图标
  Cpu  // 机器人图标
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { analyzeYanjiBadge, getCourseDetail } from '@/api/trainee'
import { getCurrentUserProfile } from '@/api/user'

const router = useRouter()

// 雷达图引用
const radarChartRef = ref()
let radarChart: any = null

// 能力数据
const abilityData = ref([
  { name: '专业知识', value: 88, max: 100 },
  { name: '沟通技巧', value: 92, max: 100 },
  { name: '操作技能', value: 85, max: 100 },
  { name: '客户服务', value: 90, max: 100 },
  { name: '安全意识', value: 83, max: 100 },
  { name: '应变能力', value: 80, max: 100 }
])

// 定义能力反馈接口
interface AbilityFeedback {
  name: string
  score: number
  feedback: string
}

// AI 能力分析详细反馈（来自Dify）
const abilityFeedback = ref<AbilityFeedback[]>([])

// AI 分析和推荐相关
const analyzing = ref(false)
const selectedPriority = ref('all')

// 计算属性：过滤后的课程
const filteredCourses = computed(() => {
  if (selectedPriority.value === 'all') {
    return recommendedCourses.value
  }
  return recommendedCourses.value.filter(course => course.priority === selectedPriority.value)
})

// 定义推荐课程接口
interface RecommendedCourse {
  id: number
  name: string
  description: string
  duration: number
  difficulty: string
  learnerCount: number
  priority: string
  matchScore: number
  targetWeakPoints: string[]
  expectedImprovement: number
  progress: number
  examPassed: boolean
}

// AI 推荐课程数据（初始为空，等待AI分析后填充）
const recommendedCourses = ref<RecommendedCourse[]>([])

// 用户信息
const userInfo = ref({
  name: '加载中...',
  position: '加载中...',
  level: 1,
  exp: 0,
  nextLevelExp: 1000,
  avatar: '',
  role: 'trainee',  // 用户角色
  phone: ''  // 用户手机号
})

// 经验值百分比
const expPercentage = computed(() => {
  return Math.round((userInfo.value.exp / userInfo.value.nextLevelExp) * 100)
})

// 成长路径数据
const growthPath = ref([
  {
    name: '基础阶段',
    completed: 3,
    total: 3,
    nodes: [
      {
        id: 1,
        title: '机构文化与服务理念',
        description: '了解机构的服务理念和专业文化',
        status: 'completed',
        progress: 100
      },
      {
        id: 2,
        title: '美容产品基础知识',
        description: '学习美容产品的基本知识和使用方法',
        status: 'completed',
        progress: 100
      },
      {
        id: 3,
        title: '客户接待与服务标准',
        description: '掌握专业的客户接待和服务流程',
        status: 'completed',
        progress: 100
      }
    ]
  },
  {
    name: '进阶阶段',
    completed: 2,
    total: 4,
    nodes: [
      {
        id: 4,
        title: '皮肤分析技术',
        description: '学习专业的皮肤分析方法和技术',
        status: 'completed',
        progress: 100
      },
      {
        id: 5,
        title: '美容仪器操作',
        description: '掌握各种美容仪器的操作方法',
        status: 'completed',
        progress: 100
      },
      {
        id: 6,
        title: '客户沟通进阶',
        description: '学习高级的客户沟通和咨询技巧',
        status: 'current',
        progress: 65
      },
      {
        id: 7,
        title: '美容方案设计',
        description: '学习为客户设计个性化的美容方案',
        status: 'locked',
        progress: 0
      }
    ]
  },
  {
    name: '高级阶段',
    completed: 0,
    total: 3,
    nodes: [
      {
        id: 8,
        title: '轻医美项目咨询',
        description: '掌握轻医美项目的专业咨询技能',
        status: 'locked',
        progress: 0
      },
      {
        id: 9,
        title: '团队协作与管理',
        description: '学习团队协作和基础管理技能',
        status: 'locked',
        progress: 0
      },
      {
        id: 10,
        title: '高级美容技术',
        description: '掌握高级美容技术和创新方法',
        status: 'locked',
        progress: 0
      }
    ]
  }
])

/**
 * 初始化雷达图
 */
const initRadarChart = () => {
  if (!radarChartRef.value) return
  
  if (!radarChart) {
    radarChart = echarts.init(radarChartRef.value)
  }
  
  const option = {
    title: {
      text: '能力评估雷达图',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
        color: '#333'
      }
    },
    radar: {
      indicator: abilityData.value.map(item => ({
        name: item.name,
        max: item.max
      })),
      center: ['50%', '55%'],
      radius: '65%',
      axisName: {
        fontSize: 12,
        color: '#666'
      },
      splitArea: {
        areaStyle: {
          color: ['rgba(114, 172, 209, 0.2)', 'rgba(114, 172, 209, 0.4)']
        }
      }
    },
    series: [{
      name: '能力评估',
      type: 'radar',
      data: [{
        value: abilityData.value.map(item => item.value),
        name: '当前能力',
        areaStyle: {
          color: 'rgba(103, 194, 58, 0.3)'
        },
        lineStyle: {
          color: '#67c23a',
          width: 2
        },
        itemStyle: {
          color: '#67c23a'
        }
      }]
    }]
  }
  
  radarChart.setOption(option)
}

/**
 * AI 分析智能工牌数据
 */
const analyzeSmartBadgeData = async () => {
  // 前置检查：只有学员用户且已绑定手机号才能分析
  if (userInfo.value.role !== 'trainee') {
    ElMessage.warning('该功能仅对学员开放')
    return
  }
  
  if (!userInfo.value.phone) {
    ElMessage.warning('请先在个人中心绑定手机号，以便使用智能工牌数据分析功能')
    return
  }
  
  analyzing.value = true
  
  try {
    // 调用后端API分析智能工牌数据
    const response = await analyzeYanjiBadge()
    
    if (response.code === 200 && response.data) {
      const { dimensions, recommended_courses, total_score, conversation_count } = response.data
      
      // 更新能力雷达图数据
      abilityData.value = dimensions.map(dim => ({
        name: dim.name,
        value: dim.score,
        max: 100
      }))
      
      // 保存AI分析反馈（包含详细的分析意见）
      abilityFeedback.value = dimensions
      
      // 重新初始化雷达图
      initRadarChart()
      
      // 更新推荐课程列表
      // 从Dify获取推荐后，查询课程详情补充完整信息
      const coursePromises = recommended_courses.map(async (rec) => {
        try {
          // 查询课程详情
          const courseResponse = await getCourseDetail(rec.course_id)
          const courseDetail = courseResponse.data
          
          return {
            id: rec.course_id,
            name: rec.course_name,
            description: rec.recommendation_reason, // 使用AI推荐理由作为描述
            duration: courseDetail?.duration_hours || 0,
            difficulty: courseDetail?.difficulty_level || 'intermediate',
            learnerCount: courseDetail?.learner_count || 0,
            priority: rec.priority,
            matchScore: rec.match_score,
            targetWeakPoints: [], // TODO: 从recommendation_reason中提取
            expectedImprovement: 10, // TODO: 从recommendation_reason中提取
            progress: 0,
            examPassed: false
          }
        } catch (error) {
          console.error(`查询课程${rec.course_id}详情失败:`, error)
          // 失败时使用基本信息
          return {
            id: rec.course_id,
            name: rec.course_name,
            description: rec.recommendation_reason,
            duration: 0,
            difficulty: 'intermediate',
            learnerCount: 0,
            priority: rec.priority,
            matchScore: rec.match_score,
            targetWeakPoints: [],
            expectedImprovement: 10,
            progress: 0,
            examPassed: false
          }
        }
      })
      
      recommendedCourses.value = await Promise.all(coursePromises)
      
      ElMessage.success(
        `智能工牌数据分析完成！分析了${conversation_count}条对话记录，综合评分：${total_score}分`
      )
    } else {
      throw new Error(response.message || '分析失败')
    }
  } catch (error: any) {
    console.error('智能工牌数据分析失败:', error)
    
    // 根据错误类型显示不同提示
    if (error.response?.status === 404) {
      ElMessage.warning('暂无智能工牌数据，请先使用智能工牌记录对话')
    } else if (error.response?.status === 400) {
      ElMessage.warning('用户未绑定手机号，无法匹配智能工牌数据')
    } else {
      ElMessage.error('AI分析失败，请稍后重试')
    }
    
    // 失败时使用模拟数据作为兜底
    abilityData.value = [
      { name: '专业知识', value: 85, max: 100 },
      { name: '沟通技巧', value: 88, max: 100 },
      { name: '操作技能', value: 82, max: 100 },
      { name: '客户服务', value: 90, max: 100 },
      { name: '安全意识', value: 79, max: 100 },
      { name: '应变能力', value: 76, max: 100 }
    ]
    initRadarChart()
  } finally {
    analyzing.value = false
  }
}

/**
 * 刷新AI推荐课程
 * 重新调用AI分析接口，获取最新的课程推荐
 */
const refreshRecommendations = async () => {
  // 直接调用AI分析智能工牌数据的方法，复用已有逻辑
  await analyzeSmartBadgeData()
}

/**
 * 获取节点图标
 */
const getNodeIcon = (status: string) => {
  switch (status) {
    case 'completed':
      return 'CircleCheck'
    case 'current':
      return 'Clock'
    case 'locked':
      return 'Lock'
    default:
      return 'Clock'
  }
}

/**
 * 处理节点点击
 */
const handleNodeClick = (node: any) => {
  if (node.status === 'locked') {
    ElMessage.warning('请先完成前置课程')
    return
  }
  
  if (node.status === 'completed') {
    ElMessage.info(`${node.title} 已完成`)
    return
  }
  
  ElMessage.success(`开始学习：${node.title}`)
}

/**
 * 跳转到个人中心
 */
const viewProfile = () => {
  router.push('/user/profile')
}

/**
 * 获取优先级文本
 */
const getPriorityText = (priority: string) => {
  const textMap: Record<string, string> = {
    high: '高优先级',
    medium: '中优先级',
    low: '低优先级'
  }
  return textMap[priority] || priority
}

/**
 * 获取难度文本
 */
const getDifficultyText = (difficulty: string) => {
  const textMap: Record<string, string> = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return textMap[difficulty] || difficulty
}

/**
 * 查看课程详情
 */
const viewCourseDetail = (course: any) => {
  ElMessage.info(`查看课程详情：${course.name}`)
}

/**
 * 进入课程
 */
const enterCourse = (course: any) => {
  router.push('/trainee/course-detail?id=' + course.id)
}

/**
 * 播放音频
 */
const playAudio = (course: any) => {
  router.push('/trainee/audio-player?courseId=' + course.id)
}

/**
 * 与课程对话
 */
const chatWithCourse = (course: any) => {
  router.push('/trainee/chat-course?courseId=' + course.id)
}

/**
 * 开始考试
 */
const startExam = (course: any) => {
  if (course.progress < 80) {
    ElMessage.warning('请先完成80%的学习进度')
    return
  }
  router.push('/trainee/exam?courseId=' + course.id)
}

/**
 * 开始陪练
 */
const startPractice = (course: any) => {
  if (!course.examPassed) {
    ElMessage.warning('请先通过考试')
    return
  }
  router.push('/trainee/ai-practice?courseId=' + course.id)
}

/**
 * 获取平均提升分数
 */
const getAverageImprovement = () => {
  if (recommendedCourses.value.length === 0) return 0
  const total = recommendedCourses.value.reduce((sum, course) => sum + course.expectedImprovement, 0)
  return Math.round(total / recommendedCourses.value.length)
}

/**
 * 获取总学时
 */
const getTotalHours = () => {
  return recommendedCourses.value.reduce((sum, course) => sum + course.duration, 0)
}

/**
 * 按优先级筛选
 */
const filterByPriority = () => {
  // 筛选逻辑在计算属性中处理
}

/**
 * 获取当前用户信息
 */
const fetchUserInfo = async () => {
  try {
    const response = await getCurrentUserProfile()
    if (response.code === 200 && response.data) {
      const user = response.data
      userInfo.value = {
        name: user.full_name || user.username || '未命名',
        position: user.position_name || (user.role === 'admin' ? '管理员' : user.role === 'trainer' ? '培训师' : '学员'),
        level: 5, // TODO: 从用户统计数据获取
        exp: 2350, // TODO: 从用户统计数据获取
        nextLevelExp: 3000, // TODO: 从用户统计数据获取
        avatar: user.avatar_url || '',
        role: user.role || 'trainee',  // 保存用户角色
        phone: user.phone || ''  // 保存用户手机号
      }
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.warning('获取用户信息失败，使用默认信息')
  }
}

/**
 * 处理窗口大小变化
 */
const handleResize = () => {
  if (radarChart) {
    radarChart.resize()
  }
}

/**
 * 组件挂载时初始化
 */
onMounted(async () => {
  // 获取用户信息
  await fetchUserInfo()
  
  nextTick(() => {
    initRadarChart()
  })
  
  // 只有学员用户且已绑定手机号才自动分析智能工牌数据
  if (userInfo.value.role === 'trainee' && userInfo.value.phone) {
    analyzeSmartBadgeData()
  } else if (!userInfo.value.phone && userInfo.value.role === 'trainee') {
    // 学员未绑定手机号时显示提示
    ElMessage.info('请先在个人中心绑定手机号，以便使用智能工牌数据分析功能')
  }
  
  // 响应式处理
  window.addEventListener('resize', handleResize)
})

/**
 * 组件卸载时清理资源
 */
onUnmounted(() => {
  // 销毁图表实例
  radarChart?.dispose()
  
  // 移除事件监听
  window.removeEventListener('resize', handleResize)
})
</script>

<style lang="scss" scoped>
.growth-path-container {
  max-width: 1400px;
  margin: 0 auto;

  .personal-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    margin-bottom: 24px;

    .info-left {
      display: flex;
      gap: 24px;
      align-items: center;

      .info-content {
        .user-name {
          font-size: 24px;
          font-weight: 600;
          color: #333;
          margin-bottom: 8px;
        }

        .user-meta {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;
          color: #666;
          margin-bottom: 12px;

          .separator {
            color: #ddd;
          }

          .position {
            color: #667eea;
            font-weight: 500;
          }

          .level {
            color: #e6a23c;
            font-weight: 500;
          }
        }

        .el-progress {
          width: 300px;
        }
      }
    }

    .info-right {
      .el-button {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
      }
    }
  }

  .main-content {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 24px;
    margin-bottom: 24px;

    .ability-radar {
      height: fit-content;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        border-bottom: 1px solid #ebeef5;

        .card-title {
          font-size: 18px;
          font-weight: 600;
          color: #333;
        }
      }

      .radar-chart {
        padding: 24px;
        height: 350px;
        width: 100%;
      }
      
      .ability-feedback {
        padding: 24px;
        border-top: 1px solid #f0f0f0;
        
        .feedback-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 16px;
          font-size: 16px;
          font-weight: 600;
          color: #333;
          
          .el-icon {
            color: #667eea;
          }
        }
        
        .feedback-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        
        .feedback-item {
          padding: 16px;
          border-radius: 8px;
          background: #fafafa;
          border-left: 4px solid #94a3b8;
          transition: all 0.3s ease;
          
          &:hover {
            background: #f5f5f5;
            transform: translateX(4px);
          }
          
          &.weak {
            border-left-color: #ef4444;
            background: #fef2f2;
            
            &:hover {
              background: #fee2e2;
            }
          }
          
          &.good {
            border-left-color: #f59e0b;
            background: #fffbeb;
            
            &:hover {
              background: #fef3c7;
            }
          }
          
          &.excellent {
            border-left-color: #10b981;
            background: #f0fdf4;
            
            &:hover {
              background: #dcfce7;
            }
          }
          
          .feedback-header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            
            .dimension-name {
              font-size: 15px;
              font-weight: 600;
              color: #333;
            }
            
            .dimension-score {
              font-size: 14px;
              font-weight: 600;
              color: #667eea;
            }
          }
          
          .feedback-text {
            font-size: 13px;
            line-height: 1.6;
            color: #666;
            margin: 0;
          }
        }
      }
    }

  }
  
  // 成长路径卡片样式
  .growth-tree {
    margin-top: 24px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid #ebeef5;

      .card-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }

      .legend {
        display: flex;
        gap: 16px;

        .legend-item {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 12px;
          color: #666;

          .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
          }

          &.completed .dot {
            background: #67c23a;
          }

          &.current .dot {
            background: #409eff;
          }

          &.locked .dot {
            background: #c0c4cc;
          }
        }
      }
    }

    .tree-container {
      padding: 24px;

      .tree-level {
        margin-bottom: 32px;

        &:last-child {
          margin-bottom: 0;
        }

        .level-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding: 14px 20px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 10px;
          box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);

          .level-name {
            font-size: 17px;
            font-weight: 600;
            color: #fff;
          }

          .level-progress {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            background: rgba(255, 255, 255, 0.2);
            padding: 4px 12px;
            border-radius: 12px;
          }
        }

        .level-nodes {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 20px;

          .tree-node {
            padding: 24px;
            border: 2px solid #e4e7ed;
            border-radius: 12px;
            background: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;

            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 4px;
              height: 100%;
              background: #409eff;
              transform: scaleY(0);
              transition: transform 0.3s ease;
            }

            &:hover {
              transform: translateY(-4px);
              box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
              
              &::before {
                transform: scaleY(1);
              }
            }

            &.completed {
              border-color: #67c23a;
              background: linear-gradient(135deg, rgba(103, 194, 58, 0.05) 0%, rgba(103, 194, 58, 0.02) 100%);
              
              &::before {
                background: #67c23a;
              }
            }

            &.current {
              border-color: #409eff;
              background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(64, 158, 255, 0.03) 100%);
              box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
              
              &::before {
                background: #409eff;
                transform: scaleY(1);
              }
            }

            &.locked {
              border-color: #dcdfe6;
              background: #f9fafb;
              cursor: not-allowed;
              opacity: 0.7;
              
              &:hover {
                transform: none;
                box-shadow: none;
              }
              
              &::before {
                background: #c0c4cc;
              }
            }

            .node-icon {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 48px;
              height: 48px;
              border-radius: 12px;
              background: rgba(64, 158, 255, 0.1);
              color: #409eff;
              margin-bottom: 16px;
              transition: all 0.3s ease;
            }

            &.completed .node-icon {
              background: rgba(103, 194, 58, 0.1);
              color: #67c23a;
            }

            &.locked .node-icon {
              background: rgba(192, 196, 204, 0.1);
              color: #c0c4cc;
            }

            &:hover .node-icon {
              transform: scale(1.1) rotate(5deg);
            }

            .node-content {
              .node-title {
                font-size: 17px;
                font-weight: 600;
                color: #303133;
                margin-bottom: 10px;
                line-height: 1.4;
              }

              .node-desc {
                font-size: 14px;
                color: #606266;
                line-height: 1.6;
                margin-bottom: 16px;
              }

              .node-progress {
                margin-top: 16px;
                padding-top: 16px;
                border-top: 1px solid #f0f0f0;
              }
            }
          }
        }
      }
    }
  }

  // AI 智能学习助手样式
  .ai-learning-hub-inner {
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.9) 100%);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 10%, rgba(102,126,234,0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(118,75,162,0.08) 0%, transparent 40%);
      pointer-events: none;
      z-index: 0;
    }
    
    > * {
      position: relative;
      z-index: 1;
    }
    
    // 模块头部样式
    .hub-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
      
      .header-left {
        display: flex;
        align-items: center;
        gap: 16px;
        
        .ai-avatar {
          position: relative;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          
          .avatar-glow {
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            opacity: 0.3;
            filter: blur(8px);
            animation: pulse 2s ease-in-out infinite;
          }
          
          .el-icon {
            position: relative;
            z-index: 1;
          }
        }
        
        .header-text {
          .hub-title {
            font-size: 24px;
            font-weight: 700;
            background: linear-gradient(135deg, #2d3748 0%, #667eea 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 4px;
          }
          
          .hub-subtitle {
            font-size: 14px;
            color: #64748b;
            margin: 0;
          }
        }
      }
      
      .header-actions {
        .refresh-btn {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border: none;
           border-radius: 12px;
          padding: 12px 20px;
          font-weight: 600;
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
          }
        }
      }
    }

    // 推荐统计样式
    .recommendation-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 32px;
      
      .stat-card {
        background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.8) 100%);
        border-radius: 16px;
        padding: 24px;
           display: flex;
        align-items: center;
        gap: 16px;
        border: 1px solid rgba(255,255,255,0.3);
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-4px);
          box-shadow: 0 12px 24px rgba(0,0,0,0.1);
        }
        
        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              display: flex;
              align-items: center;
              justify-content: center;
          color: white;
          font-size: 20px;
        }
        
        .stat-content {
          .stat-number {
            font-size: 24px;
            font-weight: 700;
            color: #2d3748;
            line-height: 1;
            margin-bottom: 4px;
          }
          
          .stat-label {
            font-size: 12px;
            color: #64748b;
            font-weight: 500;
          }
        }
      }
    }

    // 推荐课程区域样式
    .recommendations-section {
      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        
        .section-title {
          font-size: 20px;
              font-weight: 600;
          color: #2d3748;
          margin: 0;
        }
        
        .filter-tabs {
          .el-radio-group {
            background: rgba(255,255,255,0.8);
            border-radius: 12px;
            padding: 4px;
            backdrop-filter: blur(10px);
            
            :deep(.el-radio-button__inner) {
              border: none;
              background: transparent;
              border-radius: 8px;
              padding: 8px 16px;
              font-size: 12px;
              font-weight: 500;
              transition: all 0.3s ease;
            }
            
            :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              color: white;
              box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
            }
          }
        }
      }
    }
    
    // 课程网格样式
    .course-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 24px;
      
      .smart-course-card {
        background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.9) 100%);
        border-radius: 16px;
        padding: 16px;
        border: 1px solid rgba(255,255,255,0.3);
        backdrop-filter: blur(15px);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        animation: slideUp 0.6s ease-out both;
        animation-delay: var(--delay);
        
        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, rgba(102,126,234,0.05) 0%, rgba(118,75,162,0.03) 100%);
          opacity: 0;
          transition: opacity 0.3s ease;
        }
        
        &:hover {
          transform: translateY(-8px) scale(1.02);
          box-shadow: 0 20px 40px rgba(0,0,0,0.15);
          border-color: rgba(102, 126, 234, 0.3);
          
          &:before {
            opacity: 1;
          }
        }
        
        &.featured {
          border: 2px solid rgba(102, 126, 234, 0.3);
          box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
        }
      }
      
      // 智能课程卡片内部样式
      .smart-course-card {
        // 卡片装饰
        .card-decoration {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          z-index: 2;
          
          .decoration-line {
            height: 100%;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            border-radius: 20px 20px 0 0;
          }
          
          .priority-indicator {
            position: absolute;
            top: -2px;
            right: 20px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
              
              &.high {
              background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
              box-shadow: 0 4px 12px rgba(245, 101, 101, 0.4);
              }
              
              &.medium {
              background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
              box-shadow: 0 4px 12px rgba(237, 137, 54, 0.4);
              }
              
              &.low {
              background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
              box-shadow: 0 4px 12px rgba(160, 174, 192, 0.4);
            }
          }
        }
        
        // 智能封面
        .smart-cover {
          position: relative;
          height: 80px;
          margin: -16px -16px 16px -16px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 70%, #f093fb 100%);
          overflow: hidden;
          border-radius: 16px 16px 0 0;
          
          .cover-gradient {
            position: absolute;
            inset: 0;
            background: 
              radial-gradient(circle at 30% 20%, rgba(255,255,255,0.3) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,0.2) 0%, transparent 50%);
          }
          
          .cover-content {
            position: relative;
            z-index: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            
            .course-icon {
              color: rgba(255,255,255,0.9);
              filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
              
              .el-icon {
                font-size: 28px;
              }
            }
            
            .match-score {
             display: flex;
             flex-direction: column;
              align-items: center;
              gap: 8px;
              
              .score-ring {
                position: relative;
                width: 36px;
                height: 36px;
                
                .score-circle {
                  width: 100%;
                  height: 100%;
                  
                  .circle-bg {
                    fill: none;
                    stroke: rgba(255,255,255,0.3);
                    stroke-width: 2;
                  }
                  
                  .circle {
                    fill: none;
                    stroke: #fff;
                    stroke-width: 2;
                    stroke-linecap: round;
                    transform: rotate(-90deg);
                    transform-origin: 50% 50%;
                    transition: stroke-dasharray 0.6s ease;
                  }
                }
                
                .score-text {
                  position: absolute;
                  inset: 0;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 11px;
                  font-weight: 700;
                  color: white;
                }
              }
              
              .score-label {
                font-size: 10px;
                color: rgba(255,255,255,0.8);
                font-weight: 500;
              }
            }
          }
        }
        
        // 智能信息区域
        .smart-info {
          .course-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
            
            .course-title {
              font-size: 18px;
              font-weight: 700;
              color: #2d3748;
               line-height: 1.4;
              flex: 1;
              margin-right: 12px;
            }
            
            .priority-tag {
              font-size: 10px;
              font-weight: 600;
              padding: 4px 8px;
              border-radius: 12px;
              white-space: nowrap;
              
              &.high {
                background: linear-gradient(135deg, rgba(245, 101, 101, 0.15) 0%, rgba(229, 62, 62, 0.1) 100%);
                color: #e53e3e;
                border: 1px solid rgba(245, 101, 101, 0.2);
              }
              
              &.medium {
                background: linear-gradient(135deg, rgba(237, 137, 54, 0.15) 0%, rgba(221, 107, 32, 0.1) 100%);
                color: #dd6b20;
                border: 1px solid rgba(237, 137, 54, 0.2);
              }
              
              &.low {
                background: linear-gradient(135deg, rgba(160, 174, 192, 0.15) 0%, rgba(113, 128, 150, 0.1) 100%);
                color: #718096;
                border: 1px solid rgba(160, 174, 192, 0.2);
              }
            }
          }
          
          .course-description {
               font-size: 13px;
            color: #64748b;
               line-height: 1.5;
            margin-bottom: 12px;
               display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
               -webkit-box-orient: vertical;
               overflow: hidden;
          }
          
          // AI分析结果
          .ai-analysis {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.05) 100%);
            border-radius: 8px;
               padding: 12px;
            margin-bottom: 12px;
            border: 1px solid rgba(102, 126, 234, 0.15);
            position: relative;
            
            &:before {
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              width: 3px;
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              border-radius: 0 2px 2px 0;
            }
            
            .analysis-header {
                   display: flex;
                   align-items: center;
                   gap: 8px;
              font-size: 13px;
              font-weight: 600;
              color: #667eea;
              margin-bottom: 12px;
            }
            
            .analysis-content {
              .weakness-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-bottom: 10px;
                   
                   .el-tag {
                  font-size: 11px;
               border-radius: 6px;
                  
                  .el-icon {
                    font-size: 10px;
                     margin-right: 4px;
                  }
                }
              }
              
              .improvement-badge {
                 display: flex;
                 align-items: center;
                 gap: 6px;
                 font-size: 12px;
                color: #10b981;
                 font-weight: 600;
                
                .el-icon {
                  font-size: 14px;
                }
              }
            }
          }
          
          // 课程元数据
          .course-metadata {
               display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
               
               .meta-item {
                 display: flex;
                 align-items: center;
                 gap: 4px;
                 font-size: 12px;
              color: #64748b;
              
              .el-icon {
                font-size: 14px;
                color: #94a3b8;
              }
            }
          }
          
          // 学习进度
          .progress-section {
            margin-bottom: 12px;
            
            .progress-header {
               display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 8px;
              
              .progress-label {
                font-size: 12px;
                color: #64748b;
                font-weight: 500;
              }
              
              .progress-value {
                font-size: 12px;
                color: #667eea;
                font-weight: 600;
              }
            }
          }
          
          // 智能操作按钮
          .smart-actions {
               display: flex;
            flex-direction: column;
            gap: 12px;
            
            .primary-action {
              width: 100%;
              height: 44px;
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              border: none;
              border-radius: 22px;
              font-size: 14px;
              font-weight: 600;
              color: white;
              transition: all 0.3s ease;
              box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
              
              &:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
                background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
              }
              
              .el-icon {
                margin-right: 8px;
                font-size: 16px;
              }
            }
            
            .action-grid {
              display: grid !important;
              grid-template-columns: repeat(2, 1fr) !important;
              grid-template-rows: repeat(2, 38px) !important;
              gap: 10px !important;
              align-items: stretch !important;
              justify-items: stretch !important;
              width: 100% !important;
              
              // 重置所有可能的Element Plus样式
              :deep(.el-button) {
                width: 100% !important;
                height: 38px !important;
                min-height: 38px !important;
                max-height: 38px !important;
                margin: 0 !important;
                padding: 0 16px !important;
                border-radius: 19px !important;
                font-size: 12px !important;
                line-height: 1 !important;
                box-sizing: border-box !important;
              }
              
              .action-btn.el-button {
                width: 100% !important;
                height: 38px !important;
                min-height: 38px !important;
                max-height: 38px !important;
                border: 1px solid #e2e8f0 !important;
                border-radius: 19px !important;
                font-size: 12px !important;
                font-weight: 500 !important;
                line-height: 1 !important;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                background: #ffffff !important;
                color: #64748b !important;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                position: relative !important;
                overflow: hidden !important;
                cursor: pointer !important;
                padding: 0 16px !important;
                margin: 0 !important;
                
                // 添加涟漪效果
                &:before {
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 0;
                  height: 0;
                  border-radius: 50%;
                  background: rgba(102, 126, 234, 0.2);
                  transform: translate(-50%, -50%);
                  transition: all 0.4s ease;
                  pointer-events: none;
                }
                
                &:active:before {
                  width: 100px;
                  height: 100px;
                  transition: all 0.2s ease;
                }
                
                &:hover {
                  transform: translateY(-2px) scale(1.02) !important;
                  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
                  background: #f8fafc !important;
                  border-color: #cbd5e1 !important;
                }
                
                &:active {
                  transform: translateY(0) scale(0.98) !important;
                  transition: transform 0.1s ease !important;
                }
                
                .el-icon {
                  margin-right: 6px !important;
                  font-size: 14px !important;
                  color: #94a3b8 !important;
                  position: relative !important;
                  z-index: 2 !important;
                  flex-shrink: 0 !important;
                }
                
                // 确保文字不换行
                span {
                  position: relative !important;
                  z-index: 2 !important;
                  white-space: nowrap !important;
                  overflow: hidden !important;
                  text-overflow: ellipsis !important;
                  flex: 1 !important;
                  text-align: center !important;
                }
                
                // 考试按钮特殊样式
                &.exam-btn {
                  background: #fffbeb !important;
                  color: #92400e !important;
                  border: 1px solid #fbbf24 !important;
                  height: 38px !important;
                  min-height: 38px !important;
                  max-height: 38px !important;
                  
                  &:before {
                    background: rgba(251, 191, 36, 0.2) !important;
                  }
                  
                  &:hover {
                    background: #fef3cd !important;
                    border-color: #f59e0b !important;
                    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.2) !important;
                    transform: translateY(-2px) scale(1.02) !important;
                  }
                  
                  .el-icon {
                    color: #d97706 !important;
                    margin-right: 6px !important;
                    font-size: 14px !important;
                  }
                }
                
                // 陪练按钮特殊样式
                &.practice-btn {
                  background: #f0fdf4 !important;
                  color: #065f46 !important;
                  border: 1px solid #34d399 !important;
                  height: 38px !important;
                  min-height: 38px !important;
                  max-height: 38px !important;
                  
                  &:before {
                    background: rgba(52, 211, 153, 0.2) !important;
                  }
                  
                  &:hover {
                    background: #dcfce7 !important;
                    border-color: #10b981 !important;
                    box-shadow: 0 6px 20px rgba(52, 211, 153, 0.2) !important;
                    transform: translateY(-2px) scale(1.02) !important;
                  }
                  
                  .el-icon {
                    color: #059669 !important;
                    margin-right: 6px !important;
                    font-size: 14px !important;
                  }
                }
              }
            }
          }
        }
      }
    }
    
    // 空状态样式
    .empty-recommendations {
      text-align: center;
      padding: 60px 20px;
      
      .empty-icon {
        margin-bottom: 24px;
        color: #94a3b8;
        
        .rotating {
          animation: rotate 2s linear infinite;
        }
      }
      
      .empty-title {
        font-size: 20px;
        font-weight: 600;
        color: #475569;
        margin-bottom: 12px;
      }
      
      .empty-description {
        color: #64748b;
        margin-bottom: 32px;
      }
    }
  }

  // 动画定义
  @keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .growth-path-container {
    .personal-info {
      flex-direction: column;
      gap: 20px;

      .info-left {
        flex-direction: column;
        text-align: center;

        .info-content {
          .el-progress {
            width: 100%;
          }
        }
      }
    }

    .main-content {
      grid-template-columns: 1fr;
    }

    .tree-container {
      .level-nodes {
        grid-template-columns: 1fr !important;
      }
    }
    
    .ai-learning-hub-inner {
      padding: 20px;
      
      .hub-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        
        .header-left {
          flex-direction: column;
          gap: 12px;
        }
      }
      
      .recommendation-stats {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      
      .course-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      
      .recommendations-section {
        .section-header {
          flex-direction: column;
          gap: 16px;
          text-align: center;
        }
      }
    }
  }
}
</style>
