<script lang="ts" setup>
// 导入部分
// @ts-ignore: 忽略类型检查错误
import type { VbenFormProps } from '@vben/common-ui';

// @ts-ignore: 忽略类型检查错误
import type { VxeGridProps } from '#/adapter/vxe-table';

import { ref } from 'vue';
import { useRouter } from 'vue-router';

// @ts-ignore: 忽略类型检查错误
import { Page } from '@vben/common-ui';

import { ElButton, ElSpace, ElTabPane, ElTabs } from 'element-plus';

// @ts-ignore: 忽略类型检查错误
import { useVbenVxeGrid } from '#/adapter/vxe-table';
// @ts-ignore: 忽略类型检查错误
import { myEndExamList, myPendingExamList } from '#/api/exam/exam/exam';

import {
  completedExamColumns,
  examQueryFormSchema,
  getStatus,
  pendingExamColumns,
} from './config-data';

// 路由
const router = useRouter();

// 当前激活的Tab
const activeTab = ref('pending');

// 表单公共配置
const commonFormConfig: Partial<VbenFormProps> = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      allowClear: true,
    },
  },
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
};

// 待考试表单配置
const pendingExamFormOptions: VbenFormProps = {
  ...commonFormConfig,
  schema: examQueryFormSchema(),
};

// 待考试表格配置
const pendingExamGridOptions: VxeGridProps = {
  columns: pendingExamColumns,
  checkboxConfig: {
    highlight: true,
    reserve: true,
    trigger: 'default',
  },
  size: 'medium',
  // 固定表格高度，避免高度不断增加
  height: 800,
  // 确保表格有唯一ID
  id: 'unique-exam-paper-table',
  proxyConfig: {
    enabled: true,
    autoLoad: true,
    page: {
      currentKey: 'currentPage',
      sizeKey: 'pageSize',
    },
    ajax: {
      query: async ({ page }, formValues = {}) => {
        const data: any = await myPendingExamList({
          ...formValues,
          pageNum: page.currentPage,
          pageSize: page.pageSize,
        });
        // 确保返回格式正确，使用 items 作为数据键
        return {
          items: data.rows,
          total: data.total,
        };
      },
    },
  },
  rowConfig: {
    keyField: 'id',
  },
  toolbarConfig: {
    custom: true,
    refresh: true,
    zoom: true,
  },
  pagerConfig: {
    pageSize: 20,
    currentPage: 1,
    pageSizes: [10, 20, 50, 100],
  },
};

// 已考试表单配置
const completedExamFormOptions: VbenFormProps = {
  ...commonFormConfig,
  schema: examQueryFormSchema(),
};

// 已考试表格配置
const completedExamGridOptions: VxeGridProps = {
  columns: completedExamColumns,
  checkboxConfig: {
    highlight: true,
    reserve: true,
    trigger: 'default',
  },
  size: 'medium',
  // 固定表格高度，避免高度不断增加
  height: 800,
  // 确保表格有唯一ID
  id: 'unique-exam-paper-table',
  proxyConfig: {
    enabled: true,
    autoLoad: true,
    page: {
      currentKey: 'currentPage',
      sizeKey: 'pageSize',
    },
    ajax: {
      query: async ({ page }, formValues = {}) => {
        const data: any = await myEndExamList({
          ...formValues,
          pageNum: page.currentPage,
          pageSize: page.pageSize,
        });
        // 确保返回格式正确，使用 items 作为数据键
        return {
          items: data.rows,
          total: data.total,
        };
      },
    },
  },
  rowConfig: {
    keyField: 'id',
  },
  toolbarConfig: {
    // custom: true,
    // refresh: true,
    // zoom: true,
  },
  pagerConfig: {
    pageSize: 20,
    currentPage: 1,
    pageSizes: [10, 20, 50, 100],
  },
};

// 创建表格实例
const [PendingExamTable] = useVbenVxeGrid({
  formOptions: pendingExamFormOptions,
  gridOptions: pendingExamGridOptions,
});
const [CompletedExamTable] = useVbenVxeGrid({
  formOptions: completedExamFormOptions,
  gridOptions: completedExamGridOptions,
});

// 开始考试点击事件
const handleStartExam = (row: any) => {
  // 跳转到考试详情页面
  router.push({
    name: 'ExamInfo',
    params: {
      id: row.id,
    },
  });
};

// 查看考试点击事件
const handleViewExam = (row: any) => {
  // 跳转到考试详情页面
  router.push({
    name: 'ViewExamResult',
    params: {
      id: row.id,
    },
    query: {
      pid: row.participantId,
    },
  });
  // router.push(`/examManage/myExamPaper/examInfo/${row.id}`);
};

// 导出按钮点击事件
const handleExport = () => {
  // TODO: 添加导出逻辑
};
</script>

<template>
  <Page :auto-content-height="true">
    <div class="my-exam-container">
      <!-- 我的考试Tab切换 -->
      <ElTabs v-model="activeTab" class="mb-4">
        <ElTabPane label="待考试" name="pending">
          <!-- 待考试表格 -->
          <PendingExamTable table-title="待考试列表">
            <!-- <template #toolbar-tools>
              <ElSpace>
                <ElButton @click="handleExport">导出</ElButton>
              </ElSpace>
            </template> -->
            <template #actionSlot="{ row }">
              <ElButton
                type="primary"
                size="small"
                v-if="getStatus(row) === 'ongoing'"
                @click="handleStartExam(row)"
              >
                开始考试
              </ElButton>
            </template>
          </PendingExamTable>
        </ElTabPane>
        <ElTabPane label="已考试" name="completed">
          <!-- 已考试表格 -->
          <CompletedExamTable table-title="已考试列表">
            <template #toolbar-tools>
              <ElSpace>
                <ElButton @click="handleExport">导出</ElButton>
              </ElSpace>
            </template>
            <template #actionSlot="{ row }">
              <ElButton
                type="primary"
                size="small"
                @click="handleViewExam(row)"
              >
                查看
              </ElButton>
            </template>
          </CompletedExamTable>
        </ElTabPane>
      </ElTabs>
    </div>
  </Page>
</template>

<style scoped lang="scss">
.my-exam-container {
  min-height: calc(100vh - 120px);
  padding: 16px;
  background-color: #fff;
}
</style>
