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

import { h } from 'vue';

import { difficultyOptions, questionTypes } from '#/utils/dicts';

export const queryFormSchema: FormSchemaGetter = () => [
  {
    component: 'Input',
    fieldName: 'content',
    label: '试题内容',
    componentProps: {
      placeholder: '请输入试题内容',
    },
  },
  {
    component: 'Select',
    fieldName: 'questionType',
    label: '题型',
    componentProps: {
      placeholder: '请选择题型',
      options: questionTypes,
    },
  },
  {
    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 = questionTypes.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,
  },
];
