<script lang="ts" setup>
// 导入部分
import type { VbenFormProps } from '@vben/common-ui';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { ElButton, ElSpace, ElTabs, ElTabPane } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import {
  pendingExamColumns, PENDING_EXAM_MOCK_DATA,
  completedExamColumns, COMPLETED_EXAM_MOCK_DATA,
  examQueryFormSchema
} from './myExamPaper-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',
};

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

// 待考试表格配置
const pendingExamGridOptions: VxeGridProps = {
  columns: pendingExamColumns,
  height: '800px',
  proxyConfig: {
    autoLoad: true,
    ajax: {
      query: async () => ({ items: PENDING_EXAM_MOCK_DATA, total: PENDING_EXAM_MOCK_DATA.length }),
    },
  },
  rowConfig: { keyField: 'id' },
  pagerConfig: { enabled: true, pageSize: 100, pageSizes: [10, 20, 50, 100] },
};

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

// 已考试表格配置
const completedExamGridOptions: VxeGridProps = {
  columns: completedExamColumns,
  height: '800px',
  proxyConfig: {
    autoLoad: true,
    ajax: {
      query: async () => ({ items: COMPLETED_EXAM_MOCK_DATA, total: COMPLETED_EXAM_MOCK_DATA.length }),
    },
  },
  rowConfig: { keyField: 'id' },
  pagerConfig: { enabled: true, pageSize: 100, pageSizes: [10, 20, 50, 100] },
};

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

// 开始考试点击事件
const handleStartExam = (row: any) => {
  console.log('开始考试:', row);
  // 跳转到考试详情页面
  router.push(`/examManage/myExamPaper/examInfo/${row.id}`);
};

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

// 导出按钮点击事件
const handleExport = () => {
  console.log('导出数据');
  // 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" @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>
