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

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

import { Page } from '@vben/common-ui';

import { ElDialog, ElTable,ElTableColumn } from 'element-plus'
import { useVbenVxeGrid } from '#/adapter/vxe-table';

// 模拟API，后续需要替换为实际API
import { queryFormSchema, tableColumns } from './examAnalysis-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',
      ['params[beginExamTime]', 'params[endExamTime]'],
      ['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 examNames = ['安全知识考试', '业务能力测试', '产品知识考核', '团队协作培训', '新员工入职考试'];
        
        const mockData = {
          rows: Array.from({ length: 37 }, (_, index) => {
            const shouldExamCount = Math.floor(Math.random() * 100) + 50; // 50-150人
            const actualExamCount = Math.floor(Math.random() * shouldExamCount) + 1; // 1-应考人数
            const passCount = Math.floor(Math.random() * actualExamCount) + 1; // 1-实际考试人数
            const absentCount = shouldExamCount - actualExamCount;
            const passRate = passCount / actualExamCount;
            const examName = examNames[index % examNames.length];
            
            return {
              id: index + 1,
              examName: examName,
              examStartTime: `2025-01-${String(index + 1).padStart(2, '0')} 09:00:00`,
              examEndTime: `2025-01-${String(index + 1).padStart(2, '0')} 11:00:00`,
              shouldExamCount: shouldExamCount,
              actualExamCount: actualExamCount,
              passCount: passCount,
              absentCount: absentCount,
              passRate: `${(passRate * 100).toFixed(2)}%`,
            };
          }),
          total: 37,
        };
        return { items: mockData.rows, total: mockData.total };
      },
    },
  },
  rowConfig: {
    keyField: 'id',
  },
  toolbarConfig: {
    custom: true,
    refresh: true,
    zoom: true,
    export: true,
  },
  id: 'examManage-examAnalysis-index',
};

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

// 查看统计
function handleViewReport(row: any) {
  router.push(`/examManage/examAnalysis/examReport/${row.id}`);
}

// 未参加人数点击事件
function handleAbsentClick(row: any) {
  // 生成虚拟数据
  const departments = ['技术部', '财务部', '人力资源部', '市场部', '销售部'];
  const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'];
  
  absentTableData.value = Array.from({ length: row.absentCount }, (_, index) => ({
    id: index + 1,
    name: names[Math.floor(Math.random() * names.length)],
    department: departments[Math.floor(Math.random() * departments.length)],
  }));
  
  currentExamName.value = row.examName;
  dialogVisible.value = true;
}
</script>

<template>
  <div>
  <Page :auto-content-height="true">
    <BasicTable table-title="考试分析">
      <template #absentCount="{ row }">
        <ElSpace>
          <ElButton
            size="small"
            type="primary"
            link
            @click="handleAbsentClick(row)"
          >
            {{ row.absentCount }}
          </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="name" 
          label="姓名" 
          align="center"
          header-align="center"
        />
        <ElTableColumn 
          prop="department" 
          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>
