<template>
  <div class="task-statistics">
    <!-- 总体学习进度 -->
    <div class="statistics-summary">
      <el-card shadow="hover" class="summary-card">
        <div class="summary-content">
          <div class="summary-item">
            <div class="summary-label">总学习人数</div>
            <div class="summary-value">{{ totalPerson }}</div>
          </div>
          <div class="summary-divider"></div>
          <div class="summary-item">
            <div class="summary-label">已完成人数</div>
            <div class="summary-value completed">{{ completedPerson }}</div>
          </div>
          <div class="summary-divider"></div>
          <div class="summary-item">
            <div class="summary-label">完成率</div>
            <div class="summary-value rate">
              {{ completionRate }}%
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <el-row :gutter="20">
        <!-- 学习时长分布 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span class="chart-title">学习时长分布</span>
              </div>
            </template>
            <div ref="durationChartRef" class="chart" v-loading="loading"></div>
          </el-card>
        </el-col>

        <!-- 学习进度分布 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span class="chart-title">学习进度分布</span>
              </div>
            </template>
            <div ref="progressChartRef" class="chart" v-loading="loading"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 排行榜区域 -->
    <div class="rankings-container">
      <el-row :gutter="20">
        <!-- 完成时间排行榜 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card shadow="hover" class="ranking-card">
            <template #header>
              <div class="card-header">
                <span class="chart-title">完成时间排行榜（前10名）</span>
              </div>
            </template>
            <div class="ranking-list" v-loading="loading">
              <div
                v-for="(item, index) in completionRanking"
                :key="item.userId"
                class="ranking-item"
                :class="{ 'top-three': index < 3 }"
              >
                <div class="ranking-number" :class="getRankClass(index)">
                  {{ index + 1 }}
                </div>
                <div class="ranking-info">
                  <div class="ranking-name">{{ item.username }}</div>
                  <div class="ranking-detail">
                    完成时间: {{ formatDateTime(item.completeTime) }}
                  </div>
                </div>
                <div class="ranking-value">
                  {{ formatDuration(item.completionDuration) }}
                </div>
              </div>
              <el-empty
                v-if="!loading && completionRanking.length === 0"
                description="暂无数据"
                :image-size="100"
              />
            </div>
          </el-card>
        </el-col>

        <!-- 学习时长排行榜 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card shadow="hover" class="ranking-card">
            <template #header>
              <div class="card-header">
                <span class="chart-title">学习时长排行榜（前10名）</span>
              </div>
            </template>
            <div class="ranking-list" v-loading="loading">
              <div
                v-for="(item, index) in durationRanking"
                :key="item.userId"
                class="ranking-item"
                :class="{ 'top-three': index < 3 }"
              >
                <div class="ranking-number" :class="getRankClass(index)">
                  {{ index + 1 }}
                </div>
                <div class="ranking-info">
                  <div class="ranking-name">{{ item.username }}</div>
                  <div class="ranking-detail">累计学习时长</div>
                </div>
                <div class="ranking-value">
                  {{ formatStudyDuration(item.totalDuration) }}
                </div>
              </div>
              <el-empty
                v-if="!loading && durationRanking.length === 0"
                description="暂无数据"
                :image-size="100"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
import type { ECharts } from 'echarts';
import { learningTaskApi } from '@/apis/study/learning-task';
import { ElMessage } from 'element-plus';
import { TaskVO } from '@/types';

// Props
const props = defineProps<{
  taskId: string;
}>();

// 响应式数据
const loading = ref(false);
const taskInfo = ref<TaskVO>();
const durationDistribution = ref<any[]>([]);
const progressDistribution = ref<any[]>([]);
const completionRanking = ref<any[]>([]);
const durationRanking = ref<any[]>([]);

// 图表实例
const durationChartRef = ref<HTMLElement>();
const progressChartRef = ref<HTMLElement>();
let durationChart: ECharts | null = null;
let progressChart: ECharts | null = null;

const totalPerson = computed(() => taskInfo.value?.taskUsers?.length || 0);
const completedPerson = computed(() => taskInfo.value?.taskUsers?.filter((user: any) => user.status === 2).length || 0);
// 计算完成率
const completionRate = computed(() => {
  if (totalPerson.value === 0) return 0;
  return ((completedPerson.value / totalPerson.value) * 100).toFixed(1);
});

// 获取排名样式类
const getRankClass = (index: number) => {
  if (index === 0) return 'rank-first';
  if (index === 1) return 'rank-second';
  if (index === 2) return 'rank-third';
  return '';
};

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-';
  const date = new Date(dateTime);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
    date.getDate()
  ).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

// 格式化时长（秒转为易读格式）
const formatDuration = (seconds: number) => {
  if (!seconds || seconds === 0) return '-';
  const days = Math.floor(seconds / 86400);
  const hours = Math.floor((seconds % 86400) / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  
  const parts = [];
  if (days > 0) parts.push(`${days}天`);
  if (hours > 0) parts.push(`${hours}小时`);
  if (minutes > 0) parts.push(`${minutes}分钟`);
  
  return parts.length > 0 ? parts.join('') : '0分钟';
};

// 格式化学习时长
const formatStudyDuration = (seconds: number) => {
  if (!seconds || seconds === 0) return '0分钟';
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  
  const parts = [];
  if (hours > 0) parts.push(`${hours}小时`);
  if (minutes > 0) parts.push(`${minutes}分钟`);
  
  return parts.length > 0 ? parts.join('') : '0分钟';
};

// 初始化学习时长分布图表
const initDurationChart = () => {
  if (!durationChartRef.value) return;
  
  durationChart = echarts.init(durationChartRef.value);
  
  const categories = durationDistribution.value.map((item: any) => item.durationRange);
  const data = durationDistribution.value.map((item: any) => item.userCount);
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: (params: any) => {
        const param = params[0];
        return `${param.name}<br/>人数: ${param.value}人`;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: categories,
      axisLabel: {
        interval: 0,
        rotate: 30,
        fontSize: 12
      },
      name: '学习时长'
    },
    yAxis: {
      type: 'value',
      name: '人数',
      minInterval: 1,
      axisLabel: {
        formatter: '{value}人'
      }
    },
    series: [
      {
        name: '人数',
        type: 'bar',
        data: data,
        barMaxWidth: 60,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: '#4facfe' },
            { offset: 1, color: '#00f2fe' }
          ]),
          borderRadius: [4, 4, 0, 0]
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}人'
        }
      }
    ]
  };
  
  durationChart.setOption(option);
};

// 初始化学习进度分布图表
const initProgressChart = () => {
  if (!progressChartRef.value) return;
  
  progressChart = echarts.init(progressChartRef.value);
  
  const categories = progressDistribution.value.map((item: any) => item.progressRange);
  const data = progressDistribution.value.map((item: any) => item.userCount);
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: (params: any) => {
        const param = params[0];
        return `${param.name}<br/>人数: ${param.value}人`;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '12%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: categories,
      axisLabel: {
        interval: 0,
        rotate: 30,
        fontSize: 12
      },
      name: '学习进度'
    },
    yAxis: {
      type: 'value',
      name: '人数',
      minInterval: 1,
      axisLabel: {
        formatter: '{value}人'
      }
    },
    series: [
      {
        name: '人数',
        type: 'bar',
        data: data,
        barMaxWidth: 60,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: '#a18cd1' },
            { offset: 1, color: '#fbc2eb' }
          ]),
          borderRadius: [4, 4, 0, 0]
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}人'
        }
      }
    ]
  };
  
  progressChart.setOption(option);
};

// 调整图表大小
const resizeCharts = () => {
  durationChart?.resize();
  progressChart?.resize();
};

// 获取任务基本信息
const fetchTaskInfo = async () => {
  try {
    const result = await learningTaskApi.getTaskById(props.taskId);
    if (result.code === 200 && result.data) {
      taskInfo.value = result.data;
    }
  } catch (error) {
    console.error('获取任务信息失败:', error);
  }
};

// 获取图表数据
const fetchChartsData = async () => {
  try {
    const result = await learningTaskApi.getTaskStatisticsCharts(props.taskId);
    if (result.code === 200 && result.data) {
      durationDistribution.value = result.data.durationDistribution || [];
      progressDistribution.value = result.data.progressDistribution || [];
      
      // 初始化图表
      setTimeout(() => {
        initDurationChart();
        initProgressChart();
      }, 100);
    }
  } catch (error) {
    console.error('获取图表数据失败:', error);
    ElMessage.error('获取图表数据失败');
  }
};

// 获取排行榜数据
const fetchRankingsData = async () => {
  try {
    const result = await learningTaskApi.getTaskStatisticsRankings(props.taskId);
    if (result.code === 200 && result.data) {
      completionRanking.value = result.data.completionTimeRanking || [];
      durationRanking.value = result.data.durationRanking || [];
    }
  } catch (error) {
    console.error('获取排行榜数据失败:', error);
    ElMessage.error('获取排行榜数据失败');
  }
};

// 加载所有数据
const loadData = async () => {
  loading.value = true;
  try {
    await Promise.all([
      fetchTaskInfo(),
      fetchChartsData(),
      fetchRankingsData()
    ]);
  } finally {
    loading.value = false;
  }
};

// 监听taskId变化
watch(() => props.taskId, () => {
  if (props.taskId) {
    loadData();
  }
}, { immediate: true });

// 生命周期
onMounted(() => {
  window.addEventListener('resize', resizeCharts);
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeCharts);
  durationChart?.dispose();
  progressChart?.dispose();
});
</script>

<style lang="css" scoped>
.task-statistics {
  padding: 20px;
}

.statistics-summary {
  margin-bottom: 20px;
}

.summary-card {
  border-radius: 8px;
}

.summary-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
}

.summary-item {
  text-align: center;
  flex: 1;
}

.summary-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.summary-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
}

.summary-value.completed {
  color: #67c23a;
}

.summary-value.rate {
  color: #409eff;
}

.summary-divider {
  width: 1px;
  height: 60px;
  background: #dcdfe6;
}

.charts-container {
  margin-bottom: 20px;
}

.chart-card {
  border-radius: 8px;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.chart {
  height: 400px;
  width: 100%;
}

.rankings-container {
  margin-top: 20px;
}

.ranking-card {
  border-radius: 8px;
  margin-bottom: 20px;
}

.ranking-list {
  min-height: 400px;
  max-height: 600px;
  overflow-y: auto;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s;
}

.ranking-item:hover {
  background: #f5f7fa;
}

.ranking-item.top-three {
  background: linear-gradient(to right, #fff9e6, #ffffff);
}

.ranking-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e4e7ed;
  color: #606266;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  margin-right: 15px;
  flex-shrink: 0;
}

.ranking-number.rank-first {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.ranking-number.rank-second {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  color: #fff;
  box-shadow: 0 2px 8px rgba(192, 192, 192, 0.4);
}

.ranking-number.rank-third {
  background: linear-gradient(135deg, #cd7f32, #daa972);
  color: #fff;
  box-shadow: 0 2px 8px rgba(205, 127, 50, 0.4);
}

.ranking-info {
  flex: 1;
  min-width: 0;
}

.ranking-name {
  font-size: 15px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-detail {
  font-size: 13px;
  color: #909399;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-value {
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
  margin-left: 15px;
  flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .summary-content {
    flex-direction: column;
  }

  .summary-divider {
    width: 100%;
    height: 1px;
    margin: 10px 0;
  }

  .chart {
    height: 300px;
  }

  .ranking-list {
    max-height: 400px;
  }
}
</style>
