<template>
  <div class="part-box is-border">
    <el-form inline>
      <el-form-item label="科目">
        <select-subject v-model="searchModel.subjectCode"></select-subject>
      </el-form-item>
      <el-form-item label="分组">
        <el-input
          v-model.trim="searchModel.groupNumber"
          placeholder="请输入分组"
          clearable
          style="width: 120px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="searchModel.status"
          placeholder="请选择状态"
          clearable
          style="width: 120px"
        >
          <el-option label="待评卷" value="pending" />
          <el-option label="已评卷" value="completed" />
          <el-option label="已打回" value="rejected" />
        </el-select>
      </el-form-item>
      <el-form-item label="评卷员">
        <el-input
          v-model="searchModel.markerId"
          placeholder="请输入评卷员登录名"
          clearable
          style="width: 150px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="选做题">
        <el-select
          v-model="searchModel.unselective"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="未选做" :value="true" />
        </el-select>
      </el-form-item>
      <el-form-item label="准考证号">
        <el-input
          v-model.trim="searchModel.examNumber"
          placeholder="请输入准考证号"
          clearable
          style="width: 150px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="密号">
        <el-input
          v-model.trim="searchModel.secretNumber"
          placeholder="请输入密号"
          clearable
          style="width: 120px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="得分">
        <el-space>
          <span>从</span>
          <el-input-number
            v-model="searchModel.startScore"
            placeholder="低分"
            :min="0"
            :max="999"
            :step="0.1"
            :precision="1"
            :controls="false"
            step-strictly
            style="width: 80px"
          />
          <span>到</span>
          <el-input-number
            v-model="searchModel.endScore"
            placeholder="高分"
            :min="0"
            :max="999"
            :step="0.1"
            :precision="1"
            :controls="false"
            step-strictly
            style="width: 80px"
          />
        </el-space>
      </el-form-item>
      <el-form-item label="小题得分">
        <el-input-number
          v-model="searchModel.questionScore"
          placeholder=""
          :min="0"
          :max="999"
          :step="0.1"
          :precision="1"
          :controls="false"
          step-strictly
          style="width: 120px"
        />
      </el-form-item>
    </el-form>
    <el-divider class="form-divider" />
    <div class="part-action">
      <el-space wrap>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="onExport">导出</el-button>
        <el-button @click="onReview">待复核：{{ inspectedCount }}</el-button>
      </el-space>
    </div>

    <el-table
      class="page-table"
      :data="dataList"
      :loading="loading"
      border
      stripe
      @sort-change="handleSortChange"
    >
      <el-table-column prop="subjectCode" label="科目代码" min-width="200" />
      <el-table-column
        prop="groupNumber"
        label="分组序号"
        width="110"
        sortable
      />
      <el-table-column prop="examNumber" label="准考证号" width="150" />
      <el-table-column prop="secretNumber" label="密号" width="120" />
      <el-table-column prop="statusText" label="状态" width="100" sortable>
      </el-table-column>
      <el-table-column
        prop="rejectReason"
        label="打回原因"
        min-width="150"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ scope.row.rejectReason || '-' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="markerLoginName"
        label="评卷员"
        width="120"
        sortable
      >
        <template #default="scope">
          {{ scope.row.markerLoginName }} / {{ scope.row.markerName }}
        </template>
      </el-table-column>
      <el-table-column prop="markerScore" label="评卷总分" width="100" />
      <el-table-column
        prop="markerScoreList"
        label="给分明细"
        min-width="200"
        show-overflow-tooltip
      />
      <el-table-column
        prop="markerTime"
        label="评卷时间"
        width="180"
        sortable
      />
      <el-table-column
        prop="headerLoginName"
        label="复核人"
        width="120"
        sortable
      >
        <template #default="scope">
          {{ scope.row.headerLoginName || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="headerTime" label="复核时间" width="180" sortable>
        <template #default="scope">
          {{ scope.row.headerTime || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="scope">
          <el-button type="primary" link @click="onView(scope.row)">
            查看
          </el-button>
          <el-button
            v-if="scope.row.status === 'completed'"
            type="danger"
            link
            @click="onReject(scope.row)"
          >
            打回
          </el-button>
        </template>
      </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>

  <RejectTaskDialog
    ref="rejectTaskDialogRef"
    :row-data="curRow"
    @modified="getList"
  />
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { getMarkInspectedTaskCount, getMarkTaskList } from '@/api/mark';
  import { MarkTaskItem, MarkTaskListFilter } from '@/api/types/mark';
  import useTable from '@/hooks/table';
  import { downloadExport } from '@/utils/download-export';

  import RejectTaskDialog from './components/RejectTaskDialog.vue';

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

  const searchModel = reactive<MarkTaskListFilter>({
    subjectCode: null,
    groupNumber: '',
    status: '',
    markerId: undefined,
    unselective: undefined,
    examNumber: '',
    secretNumber: '',
    startScore: undefined,
    endScore: undefined,
    questionScore: undefined,
  });

  const curRow = ref<MarkTaskItem>({});
  const rejectTaskDialogRef = ref<InstanceType<typeof RejectTaskDialog>>();

  const {
    dataList,
    pagination,
    loading,
    toPage,
    getList,
    pageSizeChange,
    handleSortChange,
  } = useTable<MarkTaskItem>(getMarkTaskList, searchModel, false);

  async function search() {
    await toPage(1);
    await getInspectedCount();
  }

  const inspectedCount = ref(0);
  async function getInspectedCount() {
    const count = await getMarkInspectedTaskCount(searchModel);
    inspectedCount.value = count;
  }

  // 查看详情
  function onView(row: MarkTaskItem) {
    ElMessage.info(`查看任务：${row.examNumber}`);
    // TODO: 实现查看任务详情的逻辑
  }

  // 打回任务
  async function onReject(row: MarkTaskItem) {
    curRow.value = row;
    rejectTaskDialogRef.value?.show();
  }

  async function onExport() {
    await downloadExport('exportMarkTaskList', searchModel);
  }

  function onReview() {
    // TODO: 待复核任务
    ElMessage.info('待复核任务');
  }
</script>
