<script lang="ts" setup>
// 导入依赖
import type { EchartsUIType } from '@vben/plugins/echarts';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { computed, onMounted, ref, watch } from 'vue';

import { Page, useVbenDrawer } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import { ElButton, ElMessageBox } from 'element-plus';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

// ========================== 类型定义 ==========================
// 考卷分类接口
interface ExamCategory {
  id: number;
  name: string;
  updateTime: string;
  count: number;
}

// 题目统计接口
interface QuestionStat {
  id: number;
  category: string;
  name: string;
  correctCount: number;
  correctRate: string;
}

// 操作日志接口
interface OperationLog {
  id: number;
  department: string;
  operator: string;
  content: string;
  time: string;
}

// 人员得分接口
interface ScoreRank {
  id: number;
  station: string;
  name: string;
  score: number;
}

// 题目配置接口
interface QuestionConfig {
  type: string;
  count: number;
  extractType: string;
  scorePerQuestion: number;
}

// ========================== 常量定义 ==========================
// 图表类型常量
const CHART_TYPE = {
  PARTICIPATION: 'participation',
  PASS: 'pass',
};

// 题目类型选项
const QUESTION_TYPE_OPTIONS = [
  { value: 'single', label: '单选题' },
  { value: 'multiple', label: '多选题' },
  { value: 'judgment', label: '判断题' },
  { value: 'fill', label: '填空题' },
  { value: 'short', label: '简答题' },
];

// 题目类型映射
const QUESTION_TYPE_MAP: Record<string, string> = {
  single: '单选题',
  multiple: '多选题',
  judgment: '判断题',
  fill: '填空题',
  short: '简答题',
};

// 默认题目配置
const DEFAULT_QUESTION_CONFIG: Omit<QuestionConfig, 'type'> = {
  count: 0,
  extractType: 'random',
  scorePerQuestion: 0,
};

// 表单验证消息
const FORM_VALIDATION_MESSAGES = {
  RULE_NAME_REQUIRED: '请输入规则名称',
  QUESTION_CONFIG_REQUIRED: '请选择并配置题目类型',
  PARTICIPANTS_REQUIRED: '请选择参与人员',
  CORRECTORS_REQUIRED: '请选择批改人员',
  TIME_RANGE_REQUIRED: '请选择规则起止时间',
  EXECUTION_MODE_REQUIRED: '请选择规则执行方式',
};

// ========================== 数据管理 ==========================
// 考卷分类数据
const categories = ref<ExamCategory[]>([
  {
    id: 1,
    name: '安全知识',
    ruleName: '安全知识考试',
    questionConfig: [
      { type: 'single', count: 10, scorePerQuestion: 2, extractType: 'random' },
      { type: 'multiple', count: 10, scorePerQuestion: 2, extractType: 'random' },
      { type: 'judgment', count: 10, scorePerQuestion: 1, extractType: 'random' },
    ],
    totalScore: 50,
    passScore: 30,
    createTime: '2023-06-15 10:30:00',
    createUser: 'admin',
  },
  {
    id: 2,
    name: '消防知识',
    ruleName: '消防知识考试',
    questionConfig: [
      { type: 'single', count: 20, scorePerQuestion: 2, extractType: 'random' },
      { type: 'multiple', count: 10, scorePerQuestion: 3, extractType: 'random' },
      { type: 'judgment', count: 10, scorePerQuestion: 1, extractType: 'random' },
    ],
    totalScore: 80,
    passScore: 48,
    createTime: '2023-06-16 14:20:00',
    createUser: 'admin',
  },
  {
    id: 3,
    name: '环保知识',
    ruleName: '环保知识考试',
    questionConfig: [
      { type: 'single', count: 15, scorePerQuestion: 2, extractType: 'random' },
      { type: 'multiple', count: 10, scorePerQuestion: 2, extractType: 'random' },
      { type: 'fill', count: 5, scorePerQuestion: 4, extractType: 'random' },
    ],
    totalScore: 70,
    passScore: 42,
    createTime: '2023-06-17 09:15:00',
    createUser: 'admin',
  },
  {
    id: 4,
    name: '交通安全',
    ruleName: '交通安全知识考试',
    questionConfig: [
      { type: 'single', count: 25, scorePerQuestion: 2, extractType: 'random' },
      { type: 'multiple', count: 15, scorePerQuestion: 2, extractType: 'random' },
    ],
    totalScore: 80,
    passScore: 48,
    createTime: '2023-06-18 11:40:00',
    createUser: 'admin',
  },
  {
    id: 5,
    name: '职业健康',
    ruleName: '职业健康知识考试',
    questionConfig: [
      { type: 'single', count: 20, scorePerQuestion: 2, extractType: 'random' },
      { type: 'multiple', count: 10, scorePerQuestion: 3, extractType: 'random' },
      { type: 'short', count: 5, scorePerQuestion: 6, extractType: 'random' },
    ],
    totalScore: 100,
    passScore: 60,
    createTime: '2023-06-19 16:30:00',
    createUser: 'admin',
  },
]);

// 筛选后的分类列表
const filteredCategories = computed(() => {
  return categories.value;
});

// 选中的考卷分类
const selectedCategory = ref(1);

// 当前编辑的分类
const editingCategory = ref<ExamCategory | null>(null);

// ========================== 页面状态管理 ==========================
// 右侧内容标签页切换
const activeTab = ref('dashboard');

// ========================== 事件处理 ==========================
// 选择考卷分类
const selectCategory = (id: number) => {
  selectedCategory.value = id;
};

// 切换右侧标签页
const switchTab = (tab: string) => {
  activeTab.value = tab;
};

// ========================== 题目统计表格 ==========================
// 列配置
const questionStatsColumns: VxeGridProps['columns'] = [
  { title: '序号', width: 80, field: 'id', type: 'seq' },
  { title: '题目类别', width: 120, field: 'category' },
  { title: '题目名称', field: 'name' },
  { title: '正确数', width: 100, field: 'correctCount' },
  { title: '正确率', width: 100, field: 'correctRate' },
];

// 表格配置
const questionStatsGridOptions: VxeGridProps = {
  columns: questionStatsColumns,
  size: 'medium',
  height: '300px',
  useSearchForm: false,
  proxyConfig: {
    enabled: true,
    autoLoad: true,
    ajax: {
      query: async () => {
        const mockData: QuestionStat[] = [
          {
            id: 1,
            category: '单选题',
            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
            correctCount: 89,
            correctRate: '98.02%',
          },
          {
            id: 2,
            category: '单选题',
            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
            correctCount: 88,
            correctRate: '98.82%',
          },
          {
            id: 3,
            category: '多选题',
            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
            correctCount: 90,
            correctRate: '100%',
          },
          {
            id: 4,
            category: '多选题',
            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
            correctCount: 90,
            correctRate: '100%',
          },
          {
            id: 5,
            category: '简答题',
            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
            correctCount: 86,
            correctRate: '95.26%',
          },
          {
            id: 6,
            category: '简答题',
            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
            correctCount: 85,
            correctRate: '94.87%',
          },
          {
            id: 7,
            category: '简答题',
            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
            correctCount: 85,
            correctRate: '94.87%',
          },
        ];
        return { items: mockData, total: mockData.length };
      },
    },
  },
  rowConfig: { keyField: 'id' },
  toolbarConfig: {},
  id: 'exam-paper-question-stats',
};


// 创建表格组件
const [QuestionStatsTable] = useVbenVxeGrid({
  gridOptions: questionStatsGridOptions,
});

// ========================== 操作日志表格 ==========================
// 列配置
const operationLogsColumns: VxeGridProps['columns'] = [
  { title: '序号',field: 'id', type: 'seq' },
  { title: '操作部门', field: 'department' },
  { title: '操作人', field: 'operator' },
  { title: '操作内容', field: 'content' },
  { title: '操作时间', field: 'time' },
];

// 表格配置
const operationLogsGridOptions: VxeGridProps = {
  columns: operationLogsColumns,
  size: 'medium',
  height: '300px',
  useSearchForm: false,
  proxyConfig: {
    enabled: true,
    autoLoad: true,
    ajax: {
      query: async () => {
        const mockData: OperationLog[] = [
          {
            id: 1,
            department: '运营部',
            operator: '张三',
            content: '创建考试',
            time: '2025-11-11 10:00:00',
          },
          {
            id: 2,
            department: '运营部',
            operator: '李四',
            content: '更新考试内容',
            time: '2025-11-11 10:30:00',
          },
          {
            id: 3,
            department: '人事部',
            operator: '王五',
            content: '发送考试通知',
            time: '2025-11-12 09:00:00',
          },
          {
            id: 4,
            department: '财务部',
            operator: '赵六',
            content: '查看考试结果',
            time: '2025-11-13 14:00:00',
          },
          {
            id: 5,
            department: '运营部',
            operator: '张三',
            content: '导出考试数据',
            time: '2025-11-13 15:30:00',
          },
        ];
        return { items: mockData, total: mockData.length };
      },
    },
  },
  rowConfig: { keyField: 'id' },
  toolbarConfig: {},
  id: 'exam-paper-operation-logs',
};



// 创建表格组件
const [OperationLogsTable] = useVbenVxeGrid({
  gridOptions: operationLogsGridOptions,
});

// ========================== 人员得分排名表格 ==========================
// 列配置
const scoreRanksColumns: VxeGridProps['columns'] = [
  { title: '排名', width: 80, field: 'id', type: 'seq' },
  { title: '所属油站', width: 150, field: 'station' },
  { title: '人员姓名', width: 120, field: 'name' },
  { title: '得分', width: 100, field: 'score' },
  {
    title: '操作',
    width: 100,
    field: 'action',
    slots: { default: 'action' },
  },
];

// 表格配置
const scoreRanksGridOptions: VxeGridProps = {
  columns: scoreRanksColumns,
  size: 'medium',
  height: '300px',
  useSearchForm: false,
  proxyConfig: {
    enabled: true,
    autoLoad: true,
    ajax: {
      query: async () => {
        const mockData: ScoreRank[] = [
          { id: 1, station: '所属油站', name: '张三', score: 100 },
          { id: 2, station: '所属油站', name: '李四', score: 99 },
          { id: 3, station: '所属油站', name: '王五', score: 98 },
          { id: 4, station: '所属油站', name: '赵六', score: 97 },
          { id: 5, station: '所属油站', name: '刘七', score: 96 },
        ];
        return { items: mockData, total: mockData.length };
      },
    },
  },
  rowConfig: { keyField: 'id' },
  toolbarConfig: {},
  id: 'exam-paper-score-ranks',
};



// 创建表格组件
const [ScoreRanksTable] = useVbenVxeGrid({
  gridOptions: scoreRanksGridOptions,
});

// 查看详情操作
const viewDetail = (id: number) => {
  console.log('查看详情:', id);
};

// ========================== 图表配置 ==========================
// 图表类型切换
const chartType = ref(CHART_TYPE.PARTICIPATION);

// ECharts 引用
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

// 切换图表类型
const switchChartType = (type: string) => {
  chartType.value = type;
  updateChart();
};

// 更新图表
const updateChart = () => {
  if (chartType.value === CHART_TYPE.PARTICIPATION) {
    // 参与情况图表
    renderEcharts({
      series: [
        {
          type: 'pie',
          radius: ['60%', '80%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 0,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: false
            },
          },
          labelLine: { show: false },
          data: [
            { value: 60, name: '参与人数', itemStyle: { color: '#5ab1ef' } },
            { value: 40, name: '未参与人数', itemStyle: { color: '#f5f7fa' } },
          ],
        },
      ],
      tooltip: {
        formatter: '{b}: {c}<br/>参与率: 60.00%',
      },
    });
  } else if (chartType.value === CHART_TYPE.PASS) {
    // 及格情况图表
    renderEcharts({
      series: [
        {
          type: 'pie',
          radius: ['60%', '80%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 0,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: false
            },
          },
          labelLine: { show: false },
          data: [
            { value: 55, name: '及格人数', itemStyle: { color: '#52c41a' } },
            { value: 5, name: '不及格人数', itemStyle: { color: '#f5f7fa' } },
          ],
        },
      ],
      tooltip: {
        formatter: '{b}: {c}<br/>及格率: 91.67%',
      },
    });
  }
};

// ========================== 表单数据 ==========================
// 定义表单数据
const formData = ref({
  ruleName: '',
  questionConfig: [] as QuestionConfig[],
  participants: [] as string[],
  correctors: [] as string[],
  timeRange: [] as [Date, Date] | null,
  executionMode: '',
});

// 用于选择题目类型的临时变量
const selectedQuestionTypes = ref<string[]>([]);

// 表单验证规则
const formRules = ref({
  ruleName: [{ required: true, message: FORM_VALIDATION_MESSAGES.RULE_NAME_REQUIRED, trigger: 'blur' }],
  questionConfig: [{ required: true, message: FORM_VALIDATION_MESSAGES.QUESTION_CONFIG_REQUIRED, trigger: 'change' }],
  participants: [{ required: true, message: FORM_VALIDATION_MESSAGES.PARTICIPANTS_REQUIRED, trigger: 'change' }],
  correctors: [{ required: true, message: FORM_VALIDATION_MESSAGES.CORRECTORS_REQUIRED, trigger: 'change' }],
  timeRange: [{ required: true, message: FORM_VALIDATION_MESSAGES.TIME_RANGE_REQUIRED, trigger: 'change' }],
  executionMode: [{ required: true, message: FORM_VALIDATION_MESSAGES.EXECUTION_MODE_REQUIRED, trigger: 'change' }],
});

// 题目类型选项已在常量中定义

// 表单引用
const formRef = ref<InstanceType<typeof ElForm> | null>(null);

// 处理题目类型选择变化
const handleQuestionTypeChange = (newTypes: string[]) => {
  // 清除已经存在于配置中的类型，避免重复添加
  const existingTypeKeys = formData.value.questionConfig.map(config => config.type);
  const filteredTypes = newTypes.filter(type => !existingTypeKeys.includes(type));
  
  // 将新选择的类型添加到配置中
  filteredTypes.forEach(type => {
    formData.value.questionConfig.push({
      type,
      ...DEFAULT_QUESTION_CONFIG
    });
  });
  
  // 更新选择器的值，确保只显示未添加的类型
  selectedQuestionTypes.value = newTypes.filter(type => existingTypeKeys.includes(type));
};

// 移除题目配置
const removeQuestionConfig = (index: number) => {
  formData.value.questionConfig.splice(index, 1);
};

// 计算每种题型的总分
const calculateTypeTotal = (config: QuestionConfig): number => {
  return config.count * config.scorePerQuestion;
};

// 计算所有题型的总分
const grandTotal = computed(() => {
  const configs = formData.value.questionConfig || [];
  return configs.reduce((total, config) => {
    return total + calculateTypeTotal(config);
  }, 0);
});

// 计算所有题型的总题数
const totalQuestions = computed(() => {
  const configs = formData.value.questionConfig || [];
  return configs.reduce((total, config) => {
    return total + config.count;
  }, 0);
});

// 定义抽屉
const [Drawer, drawerApi] = useVbenDrawer({
  title: computed(() => editingCategory.value ? '编辑规则' : '添加规则'),
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      return;
    }
    try {
      drawerApi.drawerLoading(true);
      // 可以在这里加载表单数据
      if (editingCategory.value) {
        // 如果是编辑模式，填充表单数据
        formData.value.ruleName = editingCategory.value.name;
        // 这里需要根据实际情况填充其他表单字段
        // 由于当前表单是针对考题规则的，而分类是简单的名称，所以可能需要调整
        // 暂时只填充规则名称
      }
    } catch (error) {
      console.error(error);
    } finally {
      drawerApi.drawerLoading(false);
    }
  },
  async onClosed() {
    // 重置表单
    if (formRef.value) {
      formRef.value.resetFields();
    }
    editingCategory.value = null;
  },
  async onConfirm() {
    try {
      drawerApi.drawerLoading(true);
      if (!formRef.value) return;
      
      await formRef.value.validate((valid) => {
        if (!valid) {
          return;
        }
        // 处理表单提交逻辑
        if (editingCategory.value) {
          // 编辑模式
          const index = categories.value.findIndex(c => c.id === editingCategory.value!.id);
          if (index !== -1) {
            categories.value[index] = {
              ...categories.value[index],
              name: formData.value.ruleName,
              updateTime: new Date().toISOString().split('T')[0]
            };
          }
        } else {
          // 添加模式
          console.log('提交的数据:', formData.value);
          // 这里需要根据实际情况添加新分类
          // 暂时模拟添加
          const newCategory: ExamCategory = {
            id: categories.value.length + 1,
            name: formData.value.ruleName,
            updateTime: new Date().toISOString().split('T')[0],
            count: 0
          };
          categories.value.push(newCategory);
        }
        drawerApi.close();
      });
    } catch (error) {
      console.error(error);
    } finally {
      drawerApi.drawerLoading(false);
    }
  },
});

// 打开添加分类抽屉
const openAddCategoryDrawer = () => {
  editingCategory.value = null;
  drawerApi.open();
};

// 打开编辑分类抽屉
const openEditCategoryDrawer = (category: ExamCategory) => {
  editingCategory.value = category;
  drawerApi.open();
};

// 删除分类
const deleteCategory = async (category: ExamCategory) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除考卷分类 "${category.name}" 吗？`, 
      '确认删除', 
      { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
    );
    
    // 执行删除操作
    const index = categories.value.findIndex(c => c.id === category.id);
    if (index !== -1) {
      categories.value.splice(index, 1);
      
      // 如果删除的是当前选中的分类，重新选择第一个分类
      if (selectedCategory.value === category.id) {
        selectedCategory.value = categories.value.length > 0 ? categories.value[0].id : 0;
      }
      
      ElMessage.success('分类删除成功');
    }
  } catch (error) {
    // 用户取消删除或操作失败
    if (error !== 'cancel') {
      console.error('删除分类失败:', error);
      ElMessage.error('删除分类失败');
    }
  }
};

// 获取题目类型中文名称
const getQuestionTypeName = (type: string): string => {
  return QUESTION_TYPE_MAP[type] || type;
};



// ========================== 生命周期钩子 ==========================
onMounted(() => {
  // 初始化图表
  updateChart();
});
</script>

<template>
  <div>
    <Page>
      <div class="exam-paper-container">
        <!-- 左侧考卷分类 -->
        <div class="left-panel">
          <div class="panel-header">
            <h2>考卷管理</h2>
            <button class="add-btn" @click="openAddCategoryDrawer">
              添加考卷规则
            </button>
          </div>
          <div class="category-list">
            <div
              v-for="category in filteredCategories"
              :key="category.id"
              class="category-card"
              :class="{ active: selectedCategory === category.id }"
              @click="selectCategory(category.id)"
            >
              <div class="category-name">{{ category.name }}</div>
              <div class="category-info">
                <span>更新时间: {{ category.updateTime }}</span>
                <span>考卷数量: {{ category.count }}</span>
              </div>
              <div class="category-actions">
                <button class="action-btn edit-btn" @click.stop="openEditCategoryDrawer(category)">
                  编辑
                </button>
                <button class="action-btn delete-btn" @click.stop="deleteCategory(category)">
                  删除
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧考试统计 -->
        <div class="right-panel">
          <div class="panel-header">
            <h2>考试统计</h2>
            <div class="exam-info">
              <span>考试名称</span>
              <span>创建时间: 2025-11-11</span>
              <span>截止时间: 2025-11-12</span>
              <span>发放人数: 100</span>
              <span>参考人数: 68</span>
              <span>提交人数: 60</span>
            </div>
          </div>

          <!-- 数据看板和操作日志切换 -->
          <div class="tab-container">
            <div
              class="tab-item"
              :class="{ active: activeTab === 'dashboard' }"
              @click="switchTab('dashboard')"
            >
              数据看板
            </div>
            <div
              class="tab-item"
              :class="{ active: activeTab === 'log' }"
              @click="switchTab('log')"
            >
              操作日志
            </div>
          </div>

          <!-- 数据看板内容 -->
          <div v-show="activeTab === 'dashboard'" class="dashboard-content">
            <QuestionStatsTable/>
          </div>

          <!-- 操作日志内容 -->
          <div v-show="activeTab === 'log'" class="log-content">
            <OperationLogsTable/>
          </div>

          <!-- 下方统计区域 -->
          <div class="bottom-stats">
            <!-- 数据占比圆环图 -->
            <div class="chart-section">
              <div class="section-header">
                <div
                  class="tab-item"
                  :class="{ active: chartType === CHART_TYPE.PARTICIPATION }"
                  @click="switchChartType(CHART_TYPE.PARTICIPATION)"
                >
                  参与情况
                </div>
                <div
                  class="tab-item"
                  :class="{ active: chartType === CHART_TYPE.PASS }"
                  @click="switchChartType(CHART_TYPE.PASS)"
                >
                  及格情况
                </div>
              </div>
              <div class="chart-container">
                <EchartsUI ref="chartRef" />
                <div class="total-count">
                  <div class="count-label">发放人数</div>
                  <div class="count-value">100</div>
                </div>
              </div>
            </div>

            <!-- 人员得分排名 -->
            <div class="rank-section">
              <div class="section-header">
                <h3>人员得分排名</h3>
              </div>
              <ScoreRanksTable>
                <template #action="{ row }">
                  <ElButton size="small" @click="viewDetail(row.id)">
                    查看
                  </ElButton>
                </template>
              </ScoreRanksTable>
            </div>
          </div>
        </div>
      </div>
    </Page>

    <!-- 添加考卷规则抽屉 -->
    <Drawer class="w-[800px]">
      <ElForm ref="formRef" :model="formData" :rules="formRules" label-width="120px">
        <ElFormItem label="规则名称" prop="ruleName">
          <ElInput v-model="formData.ruleName" placeholder="请输入规则名称" />
        </ElFormItem>
        
        <ElFormItem label="题目类型" prop="questionConfig">
          <ElSelect v-model="selectedQuestionTypes" multiple placeholder="请选择题目类型" @change="handleQuestionTypeChange">
            <ElOption
              v-for="option in QUESTION_TYPE_OPTIONS"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </ElSelect>
        </ElFormItem>
      
      <!-- 动态表格：题目数量和分值配置 -->
      <ElFormItem label="题目配置" prop="questionConfig">
        <div v-if="formData.questionConfig.length > 0">
          <ElTable :data="formData.questionConfig" border style="width: 100%">
            <ElTableColumn prop="type" label="类型" width="120">
              <template #default="scope">
                {{ getQuestionTypeName(scope.row.type) }}
              </template>
            </ElTableColumn>
            <ElTableColumn prop="count" label="数量" width="120">
              <template #default="scope">
                <ElInput-number
                  v-model="scope.row.count"
                  :min="0"
                  :step="1"
                  style="width: 100%"
                />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="extractType" label="抽取方式" width="120">
              <template #default="scope">
                <ElSelect v-model="scope.row.extractType" style="width: 100%">
                  <ElOption label="随机" value="random" />
                </ElSelect>
              </template>
            </ElTableColumn>
            <ElTableColumn prop="scorePerQuestion" label="每题分值" width="120">
              <template #default="scope">
                <ElInput-number
                  v-model="scope.row.scorePerQuestion"
                  :min="0"
                  :step="0.5"
                  style="width: 100%"
                />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="total" label="合计分值" width="120">
              <template #default="scope">
                {{ calculateTypeTotal(scope.row) }}
              </template>
            </ElTableColumn>
            <ElTableColumn prop="action" label="操作" width="100">
              <template #default="scope">
                <ElButton size="small" type="danger" @click="removeQuestionConfig(scope.$index)">
                  删除
                </ElButton>
              </template>
            </ElTableColumn>
          </ElTable>
          
          <!-- 汇总信息 -->
          <div class="summary-info" style=" display: flex; align-items: center; justify-content: flex-end; padding: 12px;margin-top: 16px; background-color: #f5f7fa; border-radius: 4px;">
            <ElDescriptions :column="2" border size="small" style="width: auto;">
              <ElDescriptionsItem label="总题数">{{ totalQuestions }}</ElDescriptionsItem>
              <ElDescriptionsItem label="总分值">{{ grandTotal }}</ElDescriptionsItem>
            </ElDescriptions>
          </div>
        </div>
        <div v-else style="padding: 20px; color: #999; text-align: center; background-color: #fafafa; border: 1px dashed #dcdfe6; border-radius: 4px;">
          请先选择题目类型
        </div>
      </ElFormItem>
      
      <ElFormItem label="参与人员" prop="participants">
        <ElSelect v-model="formData.participants" multiple placeholder="请选择参与人员">
          <!-- 这里可以根据实际情况添加参与人员选项 -->
        </ElSelect>
      </ElFormItem>
      
      <ElFormItem label="批改人员" prop="correctors">
        <ElSelect v-model="formData.correctors" multiple placeholder="请选择批改人员">
          <!-- 这里可以根据实际情况添加批改人员选项 -->
        </ElSelect>
      </ElFormItem>
      
      <ElFormItem label="规则起止时间" prop="timeRange">
        <ElDatePicker
          v-model="formData.timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%"
        />
      </ElFormItem>
      
      <ElFormItem label="规则执行方式" prop="executionMode">
        <ElSelect v-model="formData.executionMode" placeholder="请选择规则执行方式">
          <!-- 这里可以根据实际情况添加执行方式选项 -->
        </ElSelect>
      </ElFormItem>
    </ElForm>
  </Drawer>
  </div>
</template>

<style lang="scss" scoped>
/* 页面布局 */
.exam-paper-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  height: calc(100vh - 120px);
  padding: 0;
  overflow: hidden;
}

.left-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

/* 面板头部 */
.panel-header {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.panel-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 添加按钮 */
.add-btn {
  padding: 6px 16px;
  font-size: 14px;
  color: white;
  cursor: pointer;
  background-color: #1890ff;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s;

  &:hover {
    background-color: #40a9ff;
  }
}

/* 考试信息 */
.exam-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: #666;
}

/* 分类列表 */
.category-list {
  height: calc(100vh - 160px);
  padding: 16px;
  overflow-y: auto;
}

/* 分类卡片 */
.category-card {
  position: relative;
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: all 0.3s;

  &:hover {
    background-color: #e6f7ff;
    box-shadow: 0 2px 8px rgb(24 144 255 / 15%);
  }

  &.active {
    background-color: #e6f7ff;
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgb(24 144 255 / 15%);
  }
}

.category-name {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.category-info {
  font-size: 12px;
  color: #666;
}

.category-info span {
  display: block;
  margin-bottom: 4px;
}

/* 分类操作按钮 */
.category-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

.category-card:hover .category-actions {
  opacity: 1;
}

.action-btn {
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  transition: all 0.3s;
}

.edit-btn {
  color: white;
  background-color: #1890ff;
}

.edit-btn:hover {
  background-color: #40a9ff;
}

.delete-btn {
  color: white;
  background-color: #ff4d4f;
}

.delete-btn:hover {
  background-color: #ff7875;
}

/* 右侧面板 */
.right-panel {
  height: 100%;
  overflow: hidden;
}

/* 占位符 */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 16px;
  color: #999;
  background-color: #fafafa;
  border-radius: 4px;
}

/* 标签页 */
.tab-container {
  display: flex;
  padding: 0 16px;
  border-bottom: 1px solid #e8e8e8;
}

.tab-item {
  padding: 12px 20px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;

  &:hover {
    color: #1890ff;
  }

  &.active {
    font-weight: 500;
    color: #1890ff;
    border-bottom-color: #1890ff;
  }
}

/* 内容区域 */
.dashboard-content,
.log-content {
  flex: 1;
  min-height: 300px;
  padding: 16px;
  overflow-y: auto;
}

/* 下方统计区域 */
.bottom-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 16px;
  border-top: 1px solid #e8e8e8;
}

/* 图表和排名部分 */
.chart-section,
.rank-section {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: #fafafa;
  border-radius: 6px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* 图表容器 */
.chart-container {
  position: relative;
  height: 250px;
}

.total-count {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

.count-label {
  font-size: 12px;
  color: #666;
}

.count-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* 表格样式 */
:deep(.vben-basic-table) {
  .vben-table-wrapper {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
  }
}

/* 动态表格样式 */
.vben-table {
  overflow: hidden;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.vben-table th {
  font-weight: 500;
  color: #333;
  background-color: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.vben-table td {
  color: #666;
  border-bottom: 1px solid #f0f0f0;
}

.vben-table tr:last-child td {
  border-bottom: none;
}

/* 表单控件样式 */
.vben-input,
.vben-select {
  height: 28px;
  padding: 4px 8px;
  font-size: 12px;
  border-color: #d9d9d9;
  border-radius: 4px;
  outline: none;
  transition: all 0.3s;

  &:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
  }
}

/* 汇总信息 */
.summary-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px;
  margin-top: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

/* 数据看板卡片 */
.dashboard-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.card-content .card-title {
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.card-content .card-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.card-icon {
  font-size: 28px;
  color: #409eff;
}

/* 数据看板布局 */
.data-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* 统计卡片 */
.stat-card {
  padding: 20px;
  text-align: center;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}

.stat-value {
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

/* 表格行悬停 */
.el-table__row:hover > td {
  background-color: #f5f7fa !important;
}

/* 表单标签 */
.el-form-item__label {
  font-weight: 500;
  color: #303133;
}

/* 空状态 */
.empty-state {
  padding: 20px;
  color: #999;
  text-align: center;
  background-color: #fafafa;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
}
</style>
