import { FormSchema } from '/@/components/Form';
import { useI18n } from '/@/hooks/web/useI18n';
import { BasicColumn } from '/@/components/Table';
import { getLedgerList } from '/@/api/equipment/ledger';
const { t } = useI18n();
// import { UserSelector } from '../../common/UserSelector';
import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
import { createImgPreview } from '/@/components/Preview';
// useComponentRegister('UserSelector', UserSelector);

const statusOptions = [
  { label: t('repair.order.DRAFT'), value: 'DRAFT' },
  { label: t('repair.order.SCHEDULING'), value: 'SCHEDULING' },
  { label: t('repair.order.REPAIRFINISH'), value: 'REPAIRFINISH' },
  { label: t('repair.order.ACCEPTANCEPASSED'), value: 'ACCEPTANCEPASSED' },
];
const emergencyOptions = [
  { label: '是', value: true },
  { label: '否', value: false },
];

export const columns: BasicColumn[] = [
  {
    title: t('repair.order.situationImg'),
    dataIndex: 'situationImg',
    slots: { customRender: 'situationImg' },
  },
  {
    title: t('repair.order.nameCode'),
    dataIndex: 'orderCode',
  },
  {
    title: t('repair.order.deviceNameText'),
    dataIndex: 'deviceId',
    slots: { customRender: 'deviceId' },
  },
  {
    title: t('repair.order.reportDateText'),
    dataIndex: 'reportDate',
  },
  {
    title: t('repair.order.reportByName'),
    dataIndex: 'reportByName',
  },
  {
    title: t('repair.order.description'),
    dataIndex: 'description',
  },
  {
    title: t('repair.order.statusText'),
    dataIndex: 'status',
    slots: { customRender: 'status' },
  },
  {
    title: t('repair.order.emergencyText'),
    dataIndex: 'emergency',
    slots: { customRender: 'emergency' },
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'deviceId',
    label: t('repair.order.deviceNameText'),
    component: 'ApiSelect',
    colProps: { span: 6 },
    componentProps: {
      api: getLedgerList,
      params: {
        page: 1,
        pageSize: 999,
      },
      resultField: 'items',
      labelField: 'name',
      valueField: 'id',
    },
  },
  {
    field: 'status',
    label: t('repair.order.statusText'),
    component: 'Select',
    colProps: { span: 6 },
    componentProps: {
      options: statusOptions,
    },
  },
];

export const schemas: FormSchema[] = [
  {
    field: 'image',
    label: t('deviceManagement.product.imageText'),
    component: 'ApiUpload',
    changeEvent: 'update:fileList',
    valueField: 'fileList',
    componentProps: ({ formModel }) => {
      return {
        listType: 'picture-card',
        maxFileLimit: 1,
        accept: '.png,.jpg,.jpeg,.gif',
        api: async (file: File) => {
          try {
            const formData = new FormData();
            formData.set('file', file);
            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
            return {
              uid: fileStaticUri,
              name: fileName,
              url: fileStaticUri,
            };
          } catch (error) {
            return {};
          }
        },
        onPreview: (fileList) => {
          createImgPreview({ imageList: [fileList.url!] });
        },
        onDelete(url: string) {
          formModel.deleteUrl = url!;
        },
      };
    },
  },
  {
    field: 'orderCode',
    label: t('repair.order.nameCode'),
    component: 'Input',
    colProps: { span: 21 },
    required: true,
    componentProps: {
      maxLength: 20,
    },
  },
  {
    field: 'deviceId',
    label: t('repair.order.deviceNameText'),
    component: 'ApiSelect',
    colProps: { span: 21 },
    required: true,
    componentProps: {
      api: getLedgerList,
      params: {
        page: 1,
        pageSize: 999,
      },
      resultField: 'items',
      labelField: 'name',
      valueField: 'id',
    },
  },
  {
    field: 'reportDate',
    label: t('repair.order.time'),
    component: 'DatePicker',
    componentProps: {
      showTime: true,
      format: 'YYYY-MM-DD HH:mm:ss',
    },
  },
  {
    field: 'emergency',
    label: t('repair.order.emergencyText'),
    component: 'Select',
    colProps: { span: 21 },
    required: true,
    componentProps: {
      options: emergencyOptions,
    },
  },
  {
    field: 'description',
    label: '故障描述',
    colProps: { span: 21 },
    component: 'InputTextArea',
    componentProps: {
      maxLength: 255,
      placeholder: '请输入描述',
    },
  },
  // {
  //   field: 'repairBy',
  //   label: '报修人',
  //   component: 'UserSelector',
  //   colProps: { span: 24 },
  //   required: true,
  //   componentProps: {
  //     // 告诉组件需要接收对象格式 {id, username}
  //     valueType: 'object',
  //     mode: 'single',
  //     // 显示格式处理
  //     displayFormat: (user) => user?.username || '',
  //     // 验证规则
  //     rules: [{ required: true, message: '请选择报修人' }]
  //   },
  // }
];