<template>
  <div class="part-box is-border">
    <div class="part-action">
      <el-space wrap>
        <el-button :loading="resetLoading" @click="onReset">重置</el-button>
        <el-button @click="onReview">批量校验：{{ waitTaskCount }}</el-button>
        <el-button @click="onExport('exportScoreErrorLog')">错误日志</el-button>
        <el-button @click="onExport('exportScoreMarkList')"
          >导出标记卷</el-button
        >
        <el-button @click="onExport('exportScoreCheckList')"
          >导出全部</el-button
        >
      </el-space>
    </div>
    <el-divider class="form-divider" />
    <el-table
      class="page-table"
      :data="dataList"
      :loading="loading"
      border
      stripe
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="studentCode" label="考生编号" width="150" />
      <el-table-column prop="subjectName" label="科目" width="200" />
      <el-table-column prop="fullScore" label="满分" width="100" />
      <el-table-column label="状态" width="120">
        <template #default="scope">
          {{ scope.row.status }}
        </template>
      </el-table-column>
      <el-table-column prop="totalScore" label="试卷总分" width="100" />
      <el-table-column
        prop="subjectiveScoreList"
        label="得分明细"
        min-width="200"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :layout="pagination.layout"
      :total="pagination.total"
      @size-change="pageSizeChange"
      @current-change="toPage"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';

  import {
    getScoreCheckList,
    getScoreCheckCount,
    resetScoreCheck,
  } from '@/api/review';
  import { ScoreCheckItem } from '@/api/types/review';
  import useTable from '@/hooks/table';
  import useLoading from '@/hooks/loading';
  import { modalConfirm } from '@/utils/ui';
  import { downloadExport } from '@/utils/download-export';

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

  const searchModel = reactive({});

  const { dataList, pagination, loading, toPage, pageSizeChange } =
    useTable<ScoreCheckItem>(getScoreCheckList, searchModel, false);

  // 待校验数量
  const waitTaskCount = ref(0);
  async function getWaitTaskCount() {
    waitTaskCount.value = await getScoreCheckCount();
  }

  function onReview() {
    if (waitTaskCount.value === 0) {
      ElMessage.warning('当前没有待校验任务！');
      return;
    }
    // TODO: 校验
    console.log('11');
  }

  // 重置
  const { loading: resetLoading, setLoading: setResetLoading } = useLoading();
  async function onReset() {
    if (resetLoading.value) return;

    const confirm = await modalConfirm(`确定要重置所有任务吗？`, '提示').catch(
      () => false
    );
    if (!confirm) return;

    setResetLoading(true);
    try {
      await resetScoreCheck();
      ElMessage.success('操作成功！');
    } catch (error) {
      console.error('操作失败:', error);
    } finally {
      setResetLoading(false);
    }
  }

  // 导出
  async function onExport(
    type: 'exportScoreErrorLog' | 'exportScoreMarkList' | 'exportScoreCheckList'
  ) {
    await downloadExport(type);
  }

  onMounted(() => {
    getWaitTaskCount();
  });
</script>
