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

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

import { useRouter } from 'vue-router';

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

// @ts-ignore
import { useVbenVxeGrid } from '#/adapter/vxe-table';
// @ts-ignore
import { startExamList } from '#/api/exam/exam/exam';

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

// 路由实例
const router = useRouter();

// 搜索表单配置
const formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      allowClear: true,
    },
  },
  schema: queryFormSchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
  fieldMappingTime: [
    [
      'examTime',
      ['params[beginExamTime]', 'params[endExamTime]'],
      ['YYYY-MM-DD', 'YYYY-MM-DD'],
    ],
  ],
};

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

        const res: any = await startExamList(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-index',
};

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

// 查看详情
function handleView(row: any) {
  router.push(`/examManage/questScoring/examScoring/${row.id}`);
}
</script>

<template>
  <div>
    <Page :auto-content-height="true">
      <BasicTable table-title="人工阅卷">
        <template #action="{ row }">
          <ElSpace>
            <ElButton
              size="small"
              type="primary"
              plain
              @click="handleView(row)"
            >
              查看
            </ElButton>
          </ElSpace>
        </template>
      </BasicTable>
    </Page>
  </div>
</template>

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