import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { h } from 'vue';

// 题型选项
// single_choice-单选题、multiple_choice-多选题、judgment-判断题、essay-简答题、fill_blank-填空题
export const questionTypeOptions = [
  { label: '单选题', value: 'single_choice' },
  { label: '多选题', value: 'multiple_choice' },
  { label: '判断题', value: 'judgment' },
  { label: '填空题', value: 'fill_blank' },
  { label: '简答题', value: 'essay' },
];

// 试题难度选项 easy-简单、medium-中等、hard-困难
export const difficultyOptions = [
  { label: '简单', value: 'easy', color: '' },
  { label: '中等', value: 'medium', color: 'yellow' },
  { label: '困难', value: 'hard', color: 'red' },
];

export const queryFormSchema: FormSchemaGetter = () => [
  {
    component: 'Input',
    fieldName: 'content',
    label: '试题内容',
    componentProps: {
      placeholder: '请输入试题内容',
    },
  },
  {
    component: 'Select',
    fieldName: 'questionType',
    label: '题型',
    componentProps: {
      placeholder: '请选择题型',
      options: questionTypeOptions,
    },
  },
  {
    component: 'Select',
    fieldName: 'difficultyLevel',
    label: '试题难度',
    componentProps: {
      placeholder: '请选择试题难度',
      options: difficultyOptions,
    },
  },
];

export const tableColumns: VxeGridProps['columns'] = [
  {
    type: 'checkbox',
    width: 80,
  },
  {
    field: 'questionContent',
    title: '试题内容',
    minWidth: 300,
    slots: {
      default: ({ row }) => {
        return h('div', { innerHTML: row.questionContent });
      },
    },
  },
  {
    field: 'questionType',
    title: '题型',
    minWidth: 100,
    formatter: ({ row }) => {
      const questionType = questionTypeOptions.find(
        (item) => item.value === row.questionType,
      );
      return questionType?.label || '-';
    },
  },
  {
    field: 'categoryName',
    title: '类别',
    minWidth: 120,
  },
  {
    field: 'createBy',
    title: '创建人',
    minWidth: 120,
  },
  {
    field: 'difficultyName',
    title: '试题难度',
    minWidth: 100,
    slots: {
      default: ({ row }) => {
        const difficulty = difficultyOptions.find(
          (item) => item.value === row.difficultyLevel,
        );
        // 字体颜色，返回 h函数
        return h(
          'span',
          { style: { color: difficulty?.color || 'black' } },
          difficulty?.label || '简单',
        );
      },
    },
  },
  {
    field: 'action',
    fixed: 'right',
    slots: { default: 'action' },
    title: '操作',
    width: 200,
  },
];
