<script setup lang="ts">
// @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 { ElDialog, ElTable, ElTableColumn } from 'element-plus';

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

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

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

// 弹窗相关变量
const dialogVisible = ref(false);
const absentTableData = ref([]);
const currentExamName = ref('');

// 搜索表单配置
const formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      allowClear: true,
    },
  },
  schema: queryFormSchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2',
  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 = {}) => {
        // 模拟API调用，后续替换为实际API
        const res: any = await startExamList({
          ...formValues,
          pageNum: page.currentPage,
          pageSize: page.pageSize,
        });

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

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

// 查看统计
function handleViewReport(row: any) {
  router.push({
    name: 'ExamReport',
    params: {
      id: row.id,
    },
    query: {
      paper: row.paperId,
    },
  });
}

// 未参加人数点击事件
function handleAbsentClick(row: any) {
  // 调用API获取未参加人数据
  getDetailParticipantList({
    examId: row.id,
    pageNum: 1,
    status: 'pending',
    pageSize: row.noAnswerCount,
  }).then((res: any) => {
    absentTableData.value = res.rows || [];
  });

  currentExamName.value = row.examName;
  dialogVisible.value = true;
}
</script>

<template>
  <div>
    <Page :auto-content-height="true">
      <BasicTable table-title="考试分析">
        <template #noAnswerCount="{ row }">
          <ElSpace>
            <ElButton type="primary" link @click="handleAbsentClick(row)">
              {{ row.noAnswerCount }}
            </ElButton>
          </ElSpace>
        </template>
        <template #action="{ row }">
          <ElSpace>
            <ElButton
              size="small"
              type="primary"
              plain
              @click="handleViewReport(row)"
            >
              查看统计
            </ElButton>
          </ElSpace>
        </template>
      </BasicTable>
      <!-- 未参加人弹窗 -->
      <ElDialog
        v-model="dialogVisible"
        title="未参加人"
        width="500px"
        destroy-on-close
      >
        <ElTable
          :data="absentTableData"
          border
          size="small"
          height="300px"
          style="width: 100%"
          row-class-name="row-height-40"
          header-row-class-name="header-row-height-40"
        >
          <ElTableColumn
            prop="userName"
            label="姓名"
            align="center"
            header-align="center"
          />
          <ElTableColumn
            prop="postName"
            label="岗位"
            align="center"
            header-align="center"
          />
        </ElTable>
      </ElDialog>
    </Page>
  </div>
</template>

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

// 弹窗表格表头样式
:deep(.el-dialog .el-table__header-wrapper th) {
  text-align: center;
  background-color: #f5f7fa;
}

// 设置表头行高度
:deep(.el-dialog .header-row-height-40) {
  height: 40px;
}

// 设置数据行高度
:deep(.el-dialog .row-height-40) {
  height: 40px;
}

// 确保表格单元格内容垂直居中
:deep(.el-dialog .el-table__cell) {
  padding: 0;
  line-height: 40px;
}
</style>
