// @ts-ignore: 忽略
import type { VbenFormSchema } from '@vben/common-ui';

// @ts-ignore: 忽略
import type { VxeColumnPropTypes } from '#/adapter/vxe-table';

import { h, ref } from 'vue';

import { useDebounceFn } from '@vueuse/core';

import { examList } from '#/api/exam/exam/exam';
import { getPostList } from '#/api/system/post/post';

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: 'Input',
      fieldName: 'userName',
      label: '考试姓名',
      componentProps: {
        placeholder: '请输入考试姓名',
      },
    },
    {
      component: 'DatePicker',
      fieldName: 'examTime',
      label: '考试时间',
      componentProps: {
        placeholder: '请选择时间范围',
        type: 'daterange',
        rangeSeparator: '至',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
    },
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: 'ApiSelect',
      // 对应组件的参数
      componentProps: {
        // 菜单接口转options格式
        afterFetch: ({
          rows: data,
        }: {
          rows: { postId: number; postName: string }[];
        }) => {
          return data.map((item: any) => ({
            label: item.postName,
            value: item.postId,
          }));
        },
        // 菜单接口
        api: getPostList,
        clearable: true,
        autoSelect: 'first',
      },
      // 字段名
      fieldName: 'postId',
      // 界面显示的label
      label: '岗位',
    },
  ];
}

/**
 * 表格列配置
 */
export const tableColumns: VxeColumnPropTypes[] = [
  {
    title: '姓名',
    field: 'userName',
    showOverflow: true,
    width: 120,
  },
  {
    title: '岗位',
    field: 'postName',
    showOverflow: true,
    width: 200,
  },
  {
    title: '考试名称',
    field: 'examName',
    showOverflow: true,
    width: 200,
  },
  {
    title: '考试总分',
    field: 'totalScore',
    align: 'center',
    width: 120,
  },
  {
    title: '考生得分',
    field: 'score',
    align: 'center',
    width: 120,
  },
  {
    title: '是否及格',
    field: 'passScore',
    align: 'center',
    width: 120,
    slots: {
      default: (data: any) => {
        const isPass = data.row.passScore <= data.row.score;
        return h(
          'span',
          { style: { color: isPass ? '#38B865' : '#EB5E12' } },
          isPass ? '及格' : '不及格',
        );
      },
    },
  },
  {
    title: '答题开始时间',
    field: 'startTime',
    showOverflow: true,
    width: 200,
  },
  {
    title: '答题结束时间',
    field: 'submitTime',
    showOverflow: true,
    width: 200,
  },
  {
    title: '答题时长',
    field: 'answerDuration',
    align: 'center',
    width: 130,
    slots: {
      default: (data: any) => {
        // 计算开始时间和结束时间相差多少分钟
        const startTime = new Date(data.row.startTime).getTime();
        const endTime = new Date(data.row.submitTime).getTime();
        const duration = (endTime - startTime) / 60_000;
        return `${duration.toFixed(2)} 分钟`;
      },
    },
  },
  {
    title: '考试开始时间',
    field: 'examStartTime',
    showOverflow: true,
    width: 200,
  },
  {
    title: '考试结束时间',
    field: 'examEndTime',
    showOverflow: true,
    width: 200,
  },
  {
    title: '操作',
    field: 'action',
    align: 'center',
    width: 130,
    fixed: 'right',
    slots: { default: 'action' },
  },
];
