<script setup lang="ts">
// @ts-ignore
import type { VbenFormProps } from '@vben/common-ui';

// @ts-ignore
import type { VxeGridProps } from '#/adapter/vxe-table';

import { useRoute, useRouter } from 'vue-router';

// @ts-ignore
import { Page } from '@vben/common-ui';

// @ts-ignore
import { useVbenVxeGrid } from '#/adapter/vxe-table';
// @ts-ignore: 引入API
import { getParticipantList } from '#/api/exam/exam/participant';

// 模拟API，后续需要替换为实际API
import { queryFormSchema, tableColumns } from './config-data';

// 路由实例
const router = useRouter();
const route = useRoute();
const examId = route.params.examId;

// 搜索表单配置
const formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      allowClear: true,
    },
  },
  schema: queryFormSchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
};

// 表格配置
const gridOptions: VxeGridProps = {
  columns: tableColumns,
  size: 'medium',
  height: 'auto',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues = {}) => {
        const params: any = {
          ...formValues,
          examId,
          status: 'completed',
          pageNum: page.currentPage,
          pageSize: page.pageSize,
        };
        if (params.timeRange?.length) {
          params.startTime = params.timeRange[0];
          params.endTime = params.timeRange[1];
        }

        const res: any = await getParticipantList(params);

        // 确保返回格式正确，使用 items 作为数据键
        return {
          items: res.rows || [],
          total: res.total || 0,
        };
      },
    },
  },
  rowConfig: {
    keyField: 'id',
  },
  toolbarConfig: {
    custom: true,
    refresh: true,
    zoom: true,
    export: true,
  },
  id: 'examManage-questScoring-examScoring',
};

// 初始化表格
const [BasicTable] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

// 查看详情
function handleView(row: any) {
  router.replace({
    name: 'ViewExamResult',
    params: {
      id: row.examId,
    },
    query: {
      pid: row.id,
    },
  });
}

// 批改
function handleCorrect(row: any) {
  router.push({
    name: 'ExamCorrect',
    params: {
      id: row.examId,
    },
    query: {
      pid: row.id,
    },
  });
}
</script>

<template>
  <div>
    <Page :auto-content-height="true">
      <BasicTable table-title="考试阅卷">
        <template #action="{ row }">
          <ElSpace>
            <ElButton
              size="small"
              type="primary"
              plain
              v-if="row.reviewStatus === 'reviewed'"
              @click="handleView(row)"
            >
              查看
            </ElButton>
            <ElButton
              size="small"
              type="success"
              plain
              v-if="row.reviewStatus !== 'reviewed'"
              @click="handleCorrect(row)"
            >
              批改
            </ElButton>
          </ElSpace>
        </template>
      </BasicTable>
    </Page>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-tooltip__trigger:focus) {
  outline: none;
}
</style>
