<template>
  <div class="score-curve-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2 class="page-title">给分曲线</h2>
      <el-button @click="goBack">返回</el-button>
    </div>

    <!-- 图表区域 -->
    <div v-if="chartData.length > 0" class="part-box">
      <h3>给分分布图</h3>
      <Chart :options="chartOptions" height="400px" />
    </div>

    <!-- 数据表格 -->
    <div class="part-box">
      <el-table
        class="page-table"
        :data="dataList"
        :loading="loading"
        border
        stripe
      >
        <el-table-column prop="marker" label="评卷员" width="120" />
        <el-table-column prop="name" label="姓名" min-width="100" />
        <!-- 动态分数列 -->
        <el-table-column
          v-for="scoreRange in scoreRanges"
          :key="scoreRange.label"
          :label="scoreRange.label"
          width="80"
        >
          <template #default="scope">
            {{ getScoreCount(scope.row, scoreRange.score) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, computed, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import { qualityMonitorScoreList } from '@/api/mark';
  import { QMScoreItem, QMScoreListParam } from '@/api/types/mark';
  import useLoading from '@/hooks/loading';

  defineOptions({
    name: 'ScoreCurve',
  });

  const router = useRouter();
  const route = useRoute();
  const { loading, setLoading } = useLoading();

  // 从路由参数初始化筛选条件
  const searchModel = reactive<QMScoreListParam>({
    subject: route.query.subject ? Number(route.query.subject) : null,
    group: (route.query.group as string) || '',
  });

  const dataList = ref<QMScoreItem[]>([]);

  // 计算所有可能的分数范围
  const scoreRanges = computed(() => {
    const ranges: Array<{ score: number; label: string }> = [];
    const allScores = new Set<number>();

    // 收集所有分数
    dataList.value.forEach((item) => {
      item.scores.forEach((scoreItem) => {
        allScores.add(scoreItem.score);
      });
    });

    // 排序并生成标签
    const sortedScores = Array.from(allScores).sort((a, b) => a - b);
    sortedScores.forEach((score) => {
      ranges.push({
        score,
        label: `${score}分`,
      });
    });

    return ranges;
  });

  // 获取指定分数的数量
  const getScoreCount = (row: QMScoreItem, score: number): number => {
    const scoreItem = row.scores.find((item) => item.score === score);
    return scoreItem ? scoreItem.count : 0;
  };

  // 图表数据
  const chartData = computed(() => {
    if (dataList.value.length === 0) return [];

    const seriesData: any[] = [];
    const xAxisData = scoreRanges.value.map((range) => range.label);

    dataList.value.forEach((item) => {
      const data = scoreRanges.value.map((range) => {
        const scoreItem = item.scores.find((s) => s.score === range.score);
        return scoreItem ? scoreItem.count : 0;
      });

      seriesData.push({
        name: `${item.name}`,
        type: 'line',
        data,
        smooth: true,
      });
    });

    return {
      xAxisData,
      seriesData,
    };
  });

  // 图表配置
  const chartOptions = computed(() => {
    if (chartData.value.length === 0) return {};

    return {
      title: {
        text: '给分曲线分布',
        left: 'center',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
      },
      legend: {
        data: chartData.value.seriesData.map((item: any) => item.name),
        top: 30,
        type: 'scroll',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: chartData.value.xAxisData,
        name: '分数',
      },
      yAxis: {
        type: 'value',
        name: '数量',
      },
      series: chartData.value.seriesData,
    };
  });

  // 加载数据
  async function loadData() {
    if (!searchModel.subject) {
      ElMessage.warning('请选择科目');
      return;
    }

    try {
      setLoading(true);
      const result = await qualityMonitorScoreList(searchModel);
      dataList.value = result;
    } catch (error) {
      console.error('加载给分曲线数据失败:', error);
      ElMessage.error('加载数据失败');
    } finally {
      setLoading(false);
    }
  }

  // 返回上一页
  function goBack() {
    router.back();
  }

  onMounted(() => {
    // 如果有默认科目，自动加载数据
    if (searchModel.subject) {
      loadData();
    }
  });
</script>

<style scoped lang="scss">
  .score-curve-page {
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding: 16px 0;
      border-bottom: 1px solid #e8e8e8;

      .page-title {
        margin: 0;
        font-size: 20px;
        font-weight: 500;
        color: #333;
      }
    }

    .part-box {
      margin-bottom: 16px;

      h3 {
        margin: 0 0 16px 0;
        font-size: 16px;
        font-weight: 500;
        color: #333;
      }
    }
  }
</style>
