// @ts-ignore: 忽略vxe-table的类型检查错误
import type { VbenFormSchema } from '@vben/common-ui';

// @ts-ignore: 忽略vxe-table的类型检查错误
import type { VxeColumnPropTypes } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { examList } from '#/api/exam/exam/exam';

// const keyword = ref('');
const fetching = ref(false);
// 模拟远程获取数据
function fetchRemoteOptions(query: string) {
  fetching.value = true;
  return new Promise((resolve) => {
    examList({
      examName: query || '',
      pageNum: 1,
      pageSize: 20,
    }).then((res: any) => {
      const options = (res.rows || []).map((item: any) => ({
        label: item.examName || '',
        value: item.id || '',
      }));
      resolve(options);
      fetching.value = false;
    });
  });
}

/**
 * 搜索表单配置
 */
export function queryFormSchema(): VbenFormSchema[] {
  return [
    {
      component: 'ApiSelect',
      // 对应组件的参数
      componentProps: () => {
        return {
          api: fetchRemoteOptions,
          // 禁止本地过滤
          filterOption: false,
          clearable: true,
          // 如果正在获取数据，使用插槽显示一个loading
          notFoundContent: fetching.value ? undefined : null,
          // 搜索词变化时记录下来， 使用useDebounceFn防抖。
          // onSearch: useDebounceFn((value: string) => {
          //   keyword.value = value;
          // }, 300),
          // 远程搜索参数。当搜索词变化时，params也会更新
          // params: {
          //   keyword: keyword.value || undefined,
          // },
          showSearch: true,
          filterable: true,
          remote: true,
          reserveKeyword: true,
          remoteMethod: fetchRemoteOptions,
        };
      },
      // 字段名
      fieldName: 'examId',
      // 界面显示的label
      label: '考试名称',
      renderComponentContent: () => {
        return {
          notFoundContent: fetching.value ? undefined : undefined,
        };
      },
    },
    {
      component: 'DatePicker',
      fieldName: 'examTime',
      label: '考试时间',
      componentProps: {
        placeholder: '请选择时间范围',
        type: 'daterange',
        rangeSeparator: '至',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
    },
  ];
}

/**
 * 表格列配置
 */
export const tableColumns: VxeColumnPropTypes[] = [
  {
    title: '考试名称',
    field: 'examName',
    showOverflow: true,
    // width: 200,
  },

  {
    title: '应考试人数',
    field: 'allCount',
    align: 'center',
    width: 100,
    // slots: {
    //   default: (data: any) => {
    //     const users = JSON.parse(data.row.users || '[]');
    //     return users.length;
    //   },
    // },
  },
  {
    title: '实际考试人数',
    field: 'answerCount',
    align: 'center',
    width: 150,
  },
  {
    title: '及格人数',
    field: 'passCount',
    align: 'center',
    width: 100,
  },
  {
    title: '未参加人数',
    field: 'noAnswerCount',
    align: 'center',
    slots: { default: 'noAnswerCount' },
    width: 100,
  },
  {
    title: '及格率',
    field: 'passRate',
    align: 'center',
    width: 100,
    slots: { default: (data: any) => `${data.row.passRate || 0}%` },
  },
  {
    title: '考试开始时间',
    field: 'examStartTime',
    showOverflow: true,
    width: 200,
  },
  {
    title: '考试结束时间',
    field: 'examEndTime',
    showOverflow: true,
    width: 200,
  },
  {
    title: '操作',
    field: 'action',
    align: 'center',
    slots: { default: 'action' },
    fixed: 'right',
    width: 130,
  },
];
