<template>
  <div class="team-dashboard-container">
    <div class="page-header">
      <h1 class="page-title">团队看板</h1>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange"
        />
      </div>
    </div>

    <!-- 团队概览 -->
    <div class="overview-section">
      <div class="overview-card card" v-for="item in overviewData" :key="item.label">
        <div class="card-icon" :style="{ backgroundColor: item.bgColor }">
          <el-icon :size="32" :color="item.color">
            <component :is="item.icon" />
          </el-icon>
        </div>
        <div class="card-content">
          <div class="card-value">{{ item.value }}</div>
          <div class="card-label">{{ item.label }}</div>
          <div class="card-trend" :class="item.trend > 0 ? 'up' : 'down'">
            <el-icon><component :is="item.trend > 0 ? 'Top' : 'Bottom'" /></el-icon>
            {{ Math.abs(item.trend) }}%
          </div>
        </div>
      </div>
    </div>

    <!-- 学习进度图表 -->
    <div class="charts-section">
      <div class="chart-card card">
        <h3 class="chart-title">团队学习进度</h3>
        <div class="chart-container" ref="progressChartRef"></div>
      </div>

      <div class="chart-card card">
        <h3 class="chart-title">课程完成分布</h3>
        <div class="chart-container" ref="distributionChartRef"></div>
      </div>
    </div>

    <!-- 能力短板分析 -->
    <div class="weakness-section card">
      <h3 class="section-title">团队能力分析</h3>
      <div class="weakness-content">
        <!-- 团队平均能力雷达图 -->
        <div class="chart-wrapper">
          <div class="weakness-chart" ref="weaknessChartRef"></div>
        </div>
        <!-- 团队短板能力雷达图 -->
        <div class="chart-wrapper" v-if="weaknessList.length > 0">
          <div class="weakness-chart" ref="weaknessOnlyChartRef"></div>
        </div>
        <div v-else class="no-weakness-tip">
          <div class="tip-icon">✓</div>
          <span>团队各项能力均衡，暂无明显短板</span>
        </div>
      </div>
    </div>

    <!-- 成员排行榜 -->
    <div class="ranking-section">
      <div class="ranking-card card">
        <h3 class="card-title">学习时长排行</h3>
        <div class="ranking-list">
          <div class="ranking-item" v-for="(member, index) in studyTimeRanking" :key="member.id">
            <div class="rank-number" :class="getRankClass(index + 1)">
              {{ index + 1 }}
            </div>
            <el-avatar :size="40" :src="member.avatar">
              {{ member.name.charAt(0) }}
            </el-avatar>
            <div class="member-info">
              <div class="member-name">{{ member.name }}</div>
              <div class="member-position">{{ member.position }}</div>
            </div>
            <div class="member-value">{{ member.study_time }}小时</div>
          </div>
        </div>
      </div>

      <div class="ranking-card card">
        <h3 class="card-title">成绩排行</h3>
        <div class="ranking-list">
          <div class="ranking-item" v-for="(member, index) in scoreRanking" :key="member.id">
            <div class="rank-number" :class="getRankClass(index + 1)">
              {{ index + 1 }}
            </div>
            <el-avatar :size="40" :src="member.avatar">
              {{ member.name.charAt(0) }}
            </el-avatar>
            <div class="member-info">
              <div class="member-name">{{ member.name }}</div>
              <div class="member-position">{{ member.position }}</div>
            </div>
            <div class="member-value">{{ member.avg_score }}分</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近动态 -->
    <div class="activity-section card">
      <h3 class="section-title">团队学习动态</h3>
      <el-timeline>
        <el-timeline-item
          v-for="activity in recentActivities"
          :key="activity.id"
          :timestamp="activity.time"
          :type="activity.type"
        >
          <div class="activity-content">
            <span class="activity-user">{{ activity.user_name }}</span>
            <span class="activity-action">{{ activity.action }}</span>
            <span class="activity-target">{{ activity.target }}</span>
            <el-tag v-if="activity.result && activity.result.type" :type="activity.result.type" size="small">
              {{ activity.result.text }}
            </el-tag>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import type { RankingMember, Activity } from '@/api/teamDashboard'
import {
  getTeamOverview,
  getProgressData,
  getCourseDistribution,
  getAbilityAnalysis,
  getRankings,
  getActivities
} from '@/api/teamDashboard'

// 日期范围
const dateRange = ref<[Date, Date]>([
  new Date(new Date().setDate(new Date().getDate() - 30)),
  new Date()
])

// 图表引用
const progressChartRef = ref()
const distributionChartRef = ref()
const weaknessChartRef = ref()
const weaknessOnlyChartRef = ref()
let progressChart: any = null
let distributionChart: any = null
let weaknessChart: any = null
let weaknessOnlyChart: any = null

// 数据加载状态
const loading = ref(false)

// 概览数据
const overviewData = ref<any[]>([])

// 能力短板列表
const weaknessList = ref<any[]>([])

// 学习时长排行
const studyTimeRanking = ref<RankingMember[]>([])

// 成绩排行
const scoreRanking = ref<RankingMember[]>([])

// 最近活动
const recentActivities = ref<Activity[]>([])

/**
 * 加载概览数据
 */
const loadOverviewData = async () => {
  try {
    const response = await getTeamOverview()
    if (response.code !== 200 || !response.data) {
      console.error('加载概览数据失败:', response.message)
      ElMessage.error(response.message || '加载概览数据失败')
      return
    }
    
    const data = response.data
    
    overviewData.value = [
      {
        label: '团队成员数',
        value: String(data.member_count),
        icon: 'User',
        color: '#667eea',
        bgColor: 'rgba(102, 126, 234, 0.1)',
        trend: data.trends.member_trend
      },
      {
        label: '平均学习进度',
        value: `${data.avg_progress.toFixed(1)}%`,
        icon: 'TrendCharts',
        color: '#67c23a',
        bgColor: 'rgba(103, 194, 58, 0.1)',
        trend: data.trends.progress_trend
      },
      {
        label: '平均考试成绩',
        value: String(data.avg_score.toFixed(1)),
        icon: 'Trophy',
        color: '#e6a23c',
        bgColor: 'rgba(230, 162, 60, 0.1)',
        trend: data.trends.score_trend
      },
      {
        label: '课程完成率',
        value: `${data.course_completion_rate.toFixed(1)}%`,
        icon: 'CircleCheck',
        color: '#f56c6c',
        bgColor: 'rgba(245, 108, 108, 0.1)',
        trend: data.trends.completion_trend
      }
    ]
  } catch (error) {
    console.error('加载概览数据失败:', error)
    ElMessage.error('加载概览数据失败')
  }
}

/**
 * 加载排行榜数据
 */
const loadRankings = async () => {
  try {
    const response = await getRankings()
    if (response.code !== 200 || !response.data) {
      console.error('加载排行榜失败:', response.message)
      ElMessage.error(response.message || '加载排行榜失败')
      return
    }
    
    const data = response.data
    studyTimeRanking.value = data.study_time_ranking || []
    scoreRanking.value = data.score_ranking || []
  } catch (error) {
    console.error('加载排行榜失败:', error)
    ElMessage.error('加载排行榜失败')
  }
}

/**
 * 加载能力分析数据
 */
const loadAbilityAnalysis = async () => {
  try {
    const response = await getAbilityAnalysis()
    if (response.code !== 200 || !response.data) {
      console.error('加载能力分析失败:', response.message)
      ElMessage.error(response.message || '加载能力分析失败')
      return
    }
    
    const data = response.data
    weaknessList.value = data.weaknesses || []
  } catch (error) {
    console.error('加载能力分析失败:', error)
    ElMessage.error('加载能力分析失败')
  }
}

/**
 * 加载团队动态
 */
const loadActivities = async () => {
  try {
    const response = await getActivities()
    if (response.code !== 200 || !response.data) {
      console.error('加载团队动态失败:', response.message)
      ElMessage.error(response.message || '加载团队动态失败')
      return
    }
    
    const data = response.data
    recentActivities.value = data.activities || []
  } catch (error) {
    console.error('加载团队动态失败:', error)
    ElMessage.error('加载团队动态失败')
  }
}

/**
 * 日期变化
 */
const handleDateChange = () => {
  if (dateRange.value && dateRange.value.length === 2) {
    // const start = dateRange.value[0].toLocaleDateString()
    // const end = dateRange.value[1].toLocaleDateString()
    ElMessage.info('时间范围筛选功能即将上线')
    // 未来可实现日期范围筛选
  }
}

/**
 * 获取排名样式
 */
const getRankClass = (rank: number) => {
  if (rank === 1) return 'gold'
  if (rank === 2) return 'silver'
  if (rank === 3) return 'bronze'
  return ''
}

/**
 * 初始化学习进度图表
 */
const initProgressChart = () => {
  if (!progressChartRef.value) return
  progressChart = echarts.init(progressChartRef.value)
}

/**
 * 加载学习进度图表数据
 */
const loadProgressChart = async () => {
  if (!progressChart) return
  
  try {
    const response = await getProgressData()
    if (response.code !== 200 || !response.data) {
      console.error('加载学习进度图表失败:', response.message)
      return
    }
    
    const data = response.data
    
    const colors = ['#667eea', '#67c23a', '#e6a23c', '#f56c6c', '#909399']
    
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: data.members,
        bottom: 10
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.weeks
      },
      yAxis: {
        type: 'value',
        name: '完成进度(%)',
        max: 100
      },
      series: data.data.map((item, index) => ({
        name: item.name,
        type: 'line',
        smooth: true,
        data: item.values,
        itemStyle: { color: colors[index % colors.length] }
      }))
    }
    
    progressChart.setOption(option)
  } catch (error) {
    console.error('加载学习进度图表失败:', error)
  }
}

/**
 * 初始化课程完成分布图
 */
const initDistributionChart = () => {
  if (!distributionChartRef.value) return
  distributionChart = echarts.init(distributionChartRef.value)
}

/**
 * 加载课程完成分布图数据
 */
const loadDistributionChart = async () => {
  if (!distributionChart) return
  
  try {
    const response = await getCourseDistribution()
    if (response.code !== 200 || !response.data) {
      console.error('加载课程分布图表失败:', response.message)
      return
    }
    
    const data = response.data
    const total = data.completed + data.in_progress + data.not_started
    
    const option = {
      graphic: {
        type: 'group',
        left: 'center',
        top: 'middle',
        children: [
          {
            type: 'text',
            left: -170,  // 向左偏移到环形图中心位置（容器中心的26%位置）
            top: -15,
            style: {
              text: total.toString(),
              textAlign: 'center',
              textBaseline: 'middle',
              fill: '#333',
              fontSize: 36,
              fontWeight: 'bold'
            }
          },
          {
            type: 'text',
            left: -170,  // 向左偏移到环形图中心位置
            top: 20,
            style: {
              text: '课程总数',
              textAlign: 'center',
              textBaseline: 'middle',
              fill: '#999',
              fontSize: 14
            }
          }
        ]
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e6e6e6',
        borderWidth: 1,
        textStyle: {
          color: '#333'
        },
        formatter: (params: any) => {
          return `
            <div style="padding: 5px 10px;">
              <div style="font-weight: 600; margin-bottom: 5px;">${params.name}</div>
              <div style="display: flex; align-items: center;">
                <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: ${params.color}; margin-right: 8px;"></span>
                <span style="font-size: 18px; font-weight: bold; color: ${params.color}; margin-right: 8px;">${params.value}</span>
                <span style="color: #999;">门课程 (${params.percent}%)</span>
              </div>
            </div>
          `
        }
      },
      legend: {
        orient: 'vertical',
        right: '5%',
        top: 'center',
        icon: 'circle',
        itemGap: 25,
        itemWidth: 12,
        itemHeight: 12,
        formatter: (name: string) => {
          const item = [
            { name: '已完成', value: data.completed },
            { name: '进行中', value: data.in_progress },
            { name: '未开始', value: data.not_started }
          ].find(d => d.name === name)
          const percent = total > 0 ? ((item?.value || 0) / total * 100).toFixed(1) : 0
          return `{name|${name}}{space|}{value|${item?.value || 0}}{unit|门}{space|}{percent|${percent}%}`
        },
        textStyle: {
          rich: {
            name: {
              fontSize: 14,
              color: '#333',
              width: 56,
              align: 'left'
            },
            space: {
              width: 10
            },
            value: {
              fontSize: 16,
              color: '#333',
              fontWeight: 'bold',
              width: 30,
              align: 'right'
            },
            unit: {
              fontSize: 13,
              color: '#999',
              width: 20,
              align: 'left'
            },
            percent: {
              fontSize: 13,
              color: '#999',
              width: 45,
              align: 'left'
            }
          }
        }
      },
      series: [
        {
          name: '课程完成分布',
          type: 'pie',
          radius: ['38%', '62%'], // 环形图（再缩小一点）
          center: ['26%', '50%'], // 更靠左
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 8,
            borderColor: '#fff',
            borderWidth: 3
          },
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: [
            { 
              value: data.completed, 
              name: '已完成',
              itemStyle: { 
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#85d989' },
                    { offset: 1, color: '#4aba51' }
                  ]
                }
              }
            },
            { 
              value: data.in_progress, 
              name: '进行中',
              itemStyle: { 
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#f5c563' },
                    { offset: 1, color: '#e09f3e' }
                  ]
                }
              }
            },
            { 
              value: data.not_started, 
              name: '未开始',
              itemStyle: { 
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#b4b4b4' },
                    { offset: 1, color: '#7d7d7d' }
                  ]
                }
              }
            }
          ],
          emphasis: {
            scale: true,
            scaleSize: 10,
            itemStyle: {
              shadowBlur: 20,
              shadowOffsetX: 0,
              shadowOffsetY: 5,
              shadowColor: 'rgba(0, 0, 0, 0.3)'
            }
          },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: (idx: number) => idx * 100
        }
      ]
    }
    
    distributionChart.setOption(option)
  } catch (error) {
    console.error('加载课程分布图表失败:', error)
  }
}

/**
 * 初始化团队平均能力雷达图
 */
const initWeaknessChart = () => {
  if (!weaknessChartRef.value) return
  weaknessChart = echarts.init(weaknessChartRef.value)
}

/**
 * 初始化团队短板能力雷达图
 */
const initWeaknessOnlyChart = () => {
  if (!weaknessOnlyChartRef.value) return
  weaknessOnlyChart = echarts.init(weaknessOnlyChartRef.value)
}

/**
 * 加载团队平均能力雷达图数据
 */
const loadWeaknessChart = async () => {
  if (!weaknessChart) return
  
  try {
    const response = await getAbilityAnalysis()
    if (response.code !== 200 || !response.data) {
      console.error('加载能力雷达图失败:', response.message)
      return
    }
    
    const data = response.data
    
    const option = {
      title: {
        text: '团队平均能力',
        left: 'center',
        textStyle: {
          fontSize: 16,
          fontWeight: 600,
          color: '#333'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: (params: any) => {
          const data = params.data
          let html = `<div style="padding: 8px;">
            <div style="font-weight: bold; margin-bottom: 8px;">${data.name}</div>`
          data.value.forEach((val: number, idx: number) => {
            html += `<div style="margin: 4px 0;">
              ${params.radar.indicator[idx].name}: <span style="color: #667eea; font-weight: bold;">${val}分</span>
            </div>`
          })
          html += '</div>'
          return html
        }
      },
      radar: {
        indicator: data.radar_data.dimensions.map((name: string) => ({
          name,
          max: 100
        })),
        center: ['50%', '55%'],
        radius: '65%',
        startAngle: 90,
        splitNumber: 5,
        shape: 'polygon',
        axisName: {
          formatter: '{value}',
          color: '#666',
          fontSize: 12
        },
        splitLine: {
          lineStyle: {
            color: '#e6e6e6'
          }
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ['rgba(102, 126, 234, 0.05)', 'rgba(102, 126, 234, 0.1)']
          }
        },
        axisLine: {
          lineStyle: {
            color: '#e6e6e6'
          }
        }
      },
      series: [
        {
          name: '团队平均能力',
          type: 'radar',
          symbol: 'circle',
          symbolSize: 6,
          data: [
            {
              value: data.radar_data.values,
              name: '团队平均',
              itemStyle: {
                color: '#667eea',
                borderWidth: 2,
                borderColor: '#fff'
              },
              lineStyle: {
                color: '#667eea',
                width: 2
              },
              areaStyle: {
                color: 'rgba(102, 126, 234, 0.3)'
              }
            }
          ]
        }
      ]
    }
    
    weaknessChart.setOption(option)
  } catch (error) {
    console.error('加载能力雷达图失败:', error)
  }
}

/**
 * 加载团队短板能力雷达图数据
 */
const loadWeaknessOnlyChart = async () => {
  if (!weaknessOnlyChart) return
  
  try {
    const response = await getAbilityAnalysis()
    if (response.code !== 200 || !response.data) {
      console.error('加载短板雷达图失败:', response.message)
      return
    }
    
    const data = response.data
    
    // 只显示短板（分数<80）
    if (!data.weaknesses || data.weaknesses.length === 0) {
      return
    }
    
    // 构建短板雷达图数据
    const weaknessIndicators = data.weaknesses.map((item: any) => ({
      name: item.name,
      max: 100
    }))
    
    const weaknessValues = data.weaknesses.map((item: any) => item.avg_score)
    
    // 添加建议文本
    const suggestions = data.weaknesses.map((item: any) => item.suggestion)
    
    const option = {
      title: {
        text: '团队能力短板（< 80分）',
        left: 'center',
        textStyle: {
          fontSize: 16,
          fontWeight: 600,
          color: '#f56c6c'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: (params: any) => {
          const data = params.data
          let html = `<div style="padding: 8px; max-width: 300px;">
            <div style="font-weight: bold; margin-bottom: 8px; color: #f56c6c;">${data.name}</div>`
          data.value.forEach((val: number, idx: number) => {
            html += `<div style="margin: 6px 0;">
              <div style="margin-bottom: 2px;">${params.radar.indicator[idx].name}: 
                <span style="color: #f56c6c; font-weight: bold;">${val}分</span>
              </div>
              <div style="font-size: 12px; color: #909399; line-height: 1.5;">
                💡 ${suggestions[idx]}
              </div>
            </div>`
          })
          html += '</div>'
          return html
        }
      },
      radar: {
        indicator: weaknessIndicators,
        center: ['50%', '55%'],
        radius: '65%',
        startAngle: 90,
        splitNumber: 5,
        shape: 'polygon',
        axisName: {
          formatter: '{value}',
          color: '#f56c6c',
          fontSize: 12,
          fontWeight: 'bold'
        },
        splitLine: {
          lineStyle: {
            color: '#ffe6e6'
          }
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ['rgba(245, 108, 108, 0.05)', 'rgba(245, 108, 108, 0.1)']
          }
        },
        axisLine: {
          lineStyle: {
            color: '#ffcccc'
          }
        }
      },
      series: [
        {
          name: '短板能力',
          type: 'radar',
          symbol: 'circle',
          symbolSize: 8,
          data: [
            {
              value: weaknessValues,
              name: '需要提升',
              itemStyle: {
                color: '#f56c6c',
                borderWidth: 2,
                borderColor: '#fff'
              },
              lineStyle: {
                color: '#f56c6c',
                width: 2
              },
              areaStyle: {
                color: 'rgba(245, 108, 108, 0.3)'
              }
            }
          ]
        }
      ]
    }
    
    weaknessOnlyChart.setOption(option)
  } catch (error) {
    console.error('加载短板雷达图失败:', error)
  }
}

/**
 * 组件挂载时初始化图表和加载数据
 */
onMounted(async () => {
  await nextTick()
  
  // 并行加载所有数据
  loading.value = true
  try {
    await Promise.all([
      loadOverviewData(),
      loadRankings(),
      loadAbilityAnalysis(),
      loadActivities()
    ])
    
    // 初始化图表
    initProgressChart()
    initDistributionChart()
    initWeaknessChart()
    initWeaknessOnlyChart()
    
    // 加载图表数据
    await Promise.all([
      loadProgressChart(),
      loadDistributionChart(),
      loadWeaknessChart(),
      loadWeaknessOnlyChart()
    ])
  } catch (error) {
    console.error('加载数据失败:', error)
  } finally {
    loading.value = false
  }
  
  // 响应式处理
  window.addEventListener('resize', handleResize)
})

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

/**
 * 窗口大小改变处理
 */
const handleResize = () => {
  progressChart?.resize()
  distributionChart?.resize()
  weaknessChart?.resize()
  weaknessOnlyChart?.resize()
}
</script>

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

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #333;
    }

    .header-actions {
      display: flex;
      gap: 12px;

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

  .overview-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;

    .overview-card {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 24px;

      .card-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .card-content {
        flex: 1;

        .card-value {
          font-size: 32px;
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }

        .card-label {
          font-size: 14px;
          color: #666;
          margin-bottom: 8px;
        }

        .card-trend {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          padding: 2px 8px;
          border-radius: 4px;

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

          &.down {
            color: #f56c6c;
            background-color: rgba(245, 108, 108, 0.1);
          }
        }
      }
    }
  }

  .charts-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;

    .chart-card {
      padding: 24px;

      .chart-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 20px;
      }

      .chart-container {
        height: 300px;

        .chart-placeholder {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: #f5f7fa;
          border-radius: 8px;
          color: #909399;

          p {
            margin-top: 16px;
            font-size: 14px;
          }
        }
      }
    }
  }

  .weakness-section {
    padding: 24px;
    margin-bottom: 24px;

    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 20px;
    }

    .weakness-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items: start;

      .chart-wrapper {
        background: #fff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        padding: 16px;
        transition: all 0.3s ease;

        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          transform: translateY(-2px);
        }

        .weakness-chart {
          height: 400px;
        }
      }

      .no-weakness-tip {
        grid-column: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border-radius: 8px;
        color: #16a34a;
        font-size: 16px;
        font-weight: 500;

        .tip-icon {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 36px;
          font-weight: bold;
          margin-bottom: 16px;
          box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
        }

        span {
          text-align: center;
          line-height: 1.5;
        }
      }
    }
  }

  .ranking-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;

    .ranking-card {
      padding: 24px;

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

      .ranking-list {
        .ranking-item {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 12px 0;
          border-bottom: 1px solid #f5f7fa;

          &:last-child {
            border-bottom: none;
          }

          .rank-number {
            width: 32px;
            height: 32px;
            background: #f5f7fa;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: #666;

            &.gold {
              background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
              color: #fff;
            }

            &.silver {
              background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
              color: #fff;
            }

            &.bronze {
              background: linear-gradient(135deg, #cd7f32 0%, #e6a355 100%);
              color: #fff;
            }
          }

          .member-info {
            flex: 1;

            .member-name {
              font-size: 15px;
              font-weight: 500;
              color: #333;
            }

            .member-position {
              font-size: 13px;
              color: #909399;
            }
          }

          .member-value {
            font-size: 16px;
            font-weight: 600;
            color: #667eea;
          }
        }
      }
    }
  }

  .activity-section {
    padding: 24px;

    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 20px;
    }

    .activity-content {
      .activity-user {
        font-weight: 500;
        color: #333;
      }

      .activity-action,
      .activity-target {
        color: #666;
        margin: 0 4px;
      }

      .el-tag {
        margin-left: 8px;
      }
    }
  }
}

// 响应式
@media (max-width: 1024px) {
  .team-dashboard-container {
    .charts-section {
      grid-template-columns: 1fr;
    }

    .weakness-content {
      grid-template-columns: 1fr !important;
    }

    .ranking-section {
      grid-template-columns: 1fr;
    }
  }
}

@media (max-width: 768px) {
  .team-dashboard-container {
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-actions {
        width: 100%;
        flex-direction: column;

        > * {
          width: 100%;
        }
      }
    }
  }
}
</style>
