<script lang="ts" setup>
import type { VbenFormProps } from '@vben/common-ui';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { useRouter } from 'vue-router';
import { ElButton, ElSpace } from 'element-plus';

import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';

// 导入表格配置
import { queryFormSchema, tableColumns } from './myExamPaper-data';

// 类型定义
interface ExamPaper {
  id: number;
  examRule: string;
  examName: string;
  corrector: string;
  correctTime: string;
  score: number;
}

// 常量定义
const TABLE_HEIGHT = 'calc(100vh - 200px)';
const MOCK_DATA_COUNT = 15;
const MOCK_DEFAULT_EXAM_RULE = '考卷规则1';
const MOCK_DEFAULT_CORRECTOR = '张三';
const MOCK_DEFAULT_CORRECT_TIME = '2025-11-20 11:02';
const MOCK_DEFAULT_SCORE = 80;
const ROUTE_NAME_VIEW = 'MyExamPaperView';
const TABLE_TITLE = '我的考卷';
const BUTTON_TEXT_VIEW = '查看';

// 路由实例
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',
};

// 表格配置
const gridOptions: VxeGridProps = {
  columns: tableColumns,
  size: 'medium',
  height: 'auto', // 固定高度，避免内容过少时表格过短
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues = {}) => {
        // 模拟API调用
        const mockExamPapers: ExamPaper[] = Array.from({ length: MOCK_DATA_COUNT }, (_, index) => ({
          id: index + 1,
          examRule: MOCK_DEFAULT_EXAM_RULE,
          examName: `考卷名称${index + 1}`,
          corrector: MOCK_DEFAULT_CORRECTOR,
          correctTime: MOCK_DEFAULT_CORRECT_TIME,
          score: MOCK_DEFAULT_SCORE,
        }));
        
        // 模拟搜索功能
        const filteredExamPapers = mockExamPapers.filter(paper => {
          if (!formValues.examName) return true;
          return paper.examName.toLowerCase().includes((formValues.examName as string).toLowerCase());
        });
        
        return { items: filteredExamPapers, total: filteredExamPapers.length };
      },
    },
  },
  rowConfig: {
    keyField: 'id',
  },
  toolbarConfig: {
    custom: true,
    refresh: true,
    zoom: true,
  },
  id: 'examManage-myExamPaper-index',
};

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

// 查看考卷详情
const handleView = (row: ExamPaper) => {
  router.push(`/examManage/myExamPaper/view/${row.id}`);
};
</script>

<template>
  <div>
    <Page :auto-content-height="true">
      <BasicTable :table-title="TABLE_TITLE">
        <template #action="{ row }">
          <ElSpace>
            <ElButton
              size="small"
              type="primary"
              plain
              @click="handleView(row)"
            >
              {{ BUTTON_TEXT_VIEW }}
            </ElButton>
          </ElSpace>
        </template>
      </BasicTable>
    </Page>
    <!-- 详情页路由视图，使用精确匹配 -->
    <router-view v-if="$route.name === ROUTE_NAME_VIEW" />
  </div>
</template>

<style scoped lang="scss">
// 移除tooltip触发元素的默认焦点样式
:deep(.el-tooltip__trigger:focus) {
  outline: none;
}

// 优化表格操作按钮样式
:deep(.vxe-grid-body--row) {
  .el-button {
    margin: 0;
  }
}
</style>
