<template>
  <div class="part-box is-border">
    <el-form inline>
      <el-form-item label="科目">
        <select-subject v-model="searchModel.subject"></select-subject>
      </el-form-item>
      <el-form-item label="分组">
        <el-input
          v-model.trim="searchModel.group"
          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.number="searchModel.markerId"
          placeholder="请输入评卷员ID"
          clearable
          style="width: 150px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="准考证号">
        <el-input
          v-model.trim="searchModel.examCardNo"
          placeholder="请输入准考证号"
          clearable
          style="width: 150px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="密号">
        <el-input
          v-model.trim="searchModel.secretNo"
          placeholder="请输入密号"
          clearable
          style="width: 120px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="总分">
        <el-space>
          <span>从</span>
          <el-input-number
            v-model="searchModel.totalStartScore"
            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.totalEndScore"
            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.smallQuestionScore"
          placeholder=""
          :min="0"
          :max="999"
          :step="0.1"
          :precision="1"
          :controls="false"
          step-strictly
          style="width: 120px"
        />
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="searchModel.optional"> 选做题 </el-checkbox>
      </el-form-item>
    </el-form>
    <el-divider class="form-divider" />
    <div class="part-action">
      <el-space wrap>
        <el-button type="primary" @click="toPage(1)">查询</el-button>
        <!--TODO: 待复核数量 -->
        <el-button @click="onExport">待复核：0</el-button>
      </el-space>
    </div>

    <el-table
      class="page-table"
      :data="dataList"
      :loading="loading"
      border
      stripe
      @sort-change="handleSortChange"
    >
      <el-table-column
        property="subjectCode"
        label="科目代码"
        min-width="200"
      />
      <el-table-column
        property="groupNo"
        label="分组序号"
        width="110"
        sortable
      />
      <el-table-column property="examCardNo" label="准考证号" width="150" />
      <el-table-column property="secretNo" label="密号" width="120" />
      <el-table-column label="状态" width="100" sortable>
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)" size="small">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        property="returnReason"
        label="打回原因"
        min-width="150"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ scope.row.returnReason || '-' }}
        </template>
      </el-table-column>
      <el-table-column property="marker" label="评卷员" width="120" sortable />
      <el-table-column property="totalScore" label="评卷总分" width="100" />
      <el-table-column
        property="giveScoreDetail"
        label="给分明细"
        min-width="200"
        show-overflow-tooltip
      />
      <el-table-column
        property="markingTime"
        label="评卷时间"
        width="180"
        sortable
      />
      <el-table-column property="reviewer" label="复核人" width="120" sortable>
        <template #default="scope">
          {{ scope.row.reviewer || '-' }}
        </template>
      </el-table-column>
      <el-table-column
        property="reviewTime"
        label="复核时间"
        width="180"
        sortable
      >
        <template #default="scope">
          {{ scope.row.reviewTime || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            link
            @click="onView(scope.row)"
          >
            查看
          </el-button>
          <el-button
            v-if="scope.row.status === 'completed'"
            type="danger"
            size="small"
            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"
    :task-id="curRow.id"
    @modified="getList"
  />
</template>

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

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

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

  const searchModel = reactive<MarkTaskListFilter>({
    subject: null,
    group: '',
    status: '',
    markerId: undefined,
    optional: undefined,
    examCardNo: '',
    secretNo: '',
    totalStartScore: undefined,
    totalEndScore: undefined,
    smallQuestionScore: undefined,
  });

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

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

  // 获取状态类型
  function getStatusType(status: string) {
    const statusMap: Record<string, string> = {
      pending: 'warning',
      completed: 'success',
      rejected: 'danger',
    };
    return statusMap[status] || 'info';
  }

  // 获取状态文本
  function getStatusText(status: string) {
    const statusMap: Record<string, string> = {
      pending: '待评卷',
      completed: '已评卷',
      rejected: '已打回',
    };
    return statusMap[status] || status;
  }

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

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

  function onExport() {
    // TODO: 导出任务
    ElMessage.info('导出任务');
  }
</script>
