<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';

import { ElMessageBox } from 'element-plus';

// @ts-ignore: 忽略
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  deleteParticipant,
  getDetailParticipantList,
  // @ts-ignore
} from '#/api/exam/exam/participant';

// 模拟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-4',
  fieldMappingTime: [
    [
      'examTime',
      ['startTime', 'endTime'],
      ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss'],
    ],
  ],
};

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

        const res: any = await getDetailParticipantList(params);

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

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

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

// 删除
function handleDelete(row: any) {
  // 这里可以添加删除确认逻辑
  ElMessageBox.confirm('确认删除该记录吗？', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await deleteParticipant(row.id);
    // 模拟删除操作
    basicTableApi.reload();
  });
}
</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>
            <ElButton
              size="small"
              type="danger"
              plain
              @click="handleDelete(row)"
            >
              删除
            </ElButton>
          </ElSpace>
        </template>
      </BasicTable>
    </Page>
  </div>
</template>

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