<template>
  <el-dialog
    v-model="visible"
    title="考试统计信息"
    width="600px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    top="10vh"
    append-to-body
    @open="modalBeforeOpen"
  >
    <div v-loading="loading">
      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column prop="name" label="名称" width="100" />
        <el-table-column prop="attribute" label="属性" min-width="200" />
        <el-table-column label="操作" width="80">
          <template #default="scope">
            <el-button type="primary" link @click="handleAction(scope.row)">
              进入
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-10">
        <el-button @click="onViewReport">验收报告</el-button>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { getExamStatisticInfo } from '@/api/exam';
  import { ExamStatDetailInfo } from '@/api/types/exam';
  import useModal from '@/hooks/modal';
  import useLoading from '@/hooks/loading';

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

  interface Props {
    examId?: number;
  }

  const props = withDefaults(defineProps<Props>(), {
    examId: 0,
  });

  /* modal */
  const { visible, open, close } = useModal();
  defineExpose({ open, close });

  const { loading, setLoading } = useLoading();

  const router = useRouter();

  const statInfo = ref<ExamStatDetailInfo>({
    studentCount: 0,
    subjectCount: 0,
    scanCount: 0,
    paperCount: 0,
    markedCount: 0,
  });

  interface TableDataItem {
    name: string;
    attribute: string;
    type: string;
    router: string;
  }

  const tableData = computed<TableDataItem[]>(() => [
    {
      name: '考生',
      attribute: `共录入 ${statInfo.value.studentCount} 个考生`,
      type: 'student',
      router: 'StudentManage',
    },
    {
      name: '科目',
      attribute: `共录入 ${statInfo.value.subjectCount} 个科目`,
      type: 'subject',
      router: 'SubjectManage',
    },
    {
      name: '扫描进度',
      attribute: `已扫描 ${statInfo.value.scanCount} 个考生`,
      type: 'scanProgress',
      router: 'ScanManage',
    },
    {
      name: '扫描张数',
      attribute: `已扫描 ${statInfo.value.paperCount} 张`,
      type: 'scanImage',
      router: 'ScanManage',
    },
    {
      name: '评卷进度',
      attribute: `已评完 ${statInfo.value.markedCount} 个考生`,
      type: 'markingProgress',
      router: 'MarkProgress',
    },
  ]);

  async function loadStatInfo() {
    if (!props.examId) return;

    setLoading(true);
    try {
      const result = await getExamStatisticInfo(props.examId);
      statInfo.value = result;
    } catch (error) {
      console.error('获取统计信息失败:', error);
    } finally {
      setLoading(false);
    }
  }

  function handleAction(row: TableDataItem) {
    router.push({
      name: row.router,
      // TODO: 这里是否直接切换全局的科目
      query: {
        examId: props.examId,
      },
    });
  }

  function onViewReport() {
    // TODO: 查看报告
    console.log('查看报告');
  }

  /* init modal */
  function modalBeforeOpen() {
    loadStatInfo();
  }
</script>
