import { FileItem } from '../types';
import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
import type { FormSchema } from '/@/components/Form/index';
import { createImgPreview } from '/@/components/Preview';
import { useI18n } from '/@/hooks/web/useI18n';

const { t } = useI18n();

export const schemas: FormSchema[] = [
  {
    field: 'name',
    component: 'Input',
    label: t('system.platform.platformName'),
    colProps: {
      span: 24,
    },
    componentProps: {
      maxLength: 255,
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 255) {
              return Promise.reject(t('common.limitTextLengthIs'));
            }
            return Promise.resolve();
          },
        },
      ];
    },
  },
  {
    field: 'logo',
    label: t('system.platform.platformLogo'),
    // component: 'Upload',
    // colProps: {
    //   span: 24,
    // },
    // slot: 'logoUpload',
    helpMessage: [t('common.limitUploadText1')],
    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,
            } as FileItem;
          } catch (error) {
            return {};
          }
        },
        // showUploadList: true,
        onDownload() {},
        onPreview: (fileList: FileItem) => {
          createImgPreview({ imageList: [fileList.url!] });
        },
        onDelete(url: string) {
          formModel.deleteLogoUrl = url!;
        },
      };
    },
  },
  {
    field: 'deleteLogoUrl',
    label: '',
    component: 'Input',
    show: false,
  },
  {
    field: 'icon',
    label: t('system.platform.browserICOIcon'),
    // component: 'Upload',
    // colProps: {
    //   span: 24,
    // },
    // slot: 'iconUpload',
    helpMessage: [t('common.limitUploadText2')],
    component: 'ApiUpload',
    changeEvent: 'update:fileList',
    valueField: 'fileList',
    componentProps: ({ formModel }) => {
      return {
        listType: 'picture-card',
        maxFileLimit: 1,
        maxSize: 500 * 1024,
        accept: '.icon,.ico',
        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,
            } as FileItem;
          } catch (error) {
            return {};
          }
        },
        // showUploadList: true,
        onDownload() {},
        onPreview: (fileList: FileItem) => {
          createImgPreview({ imageList: [fileList.url!] });
        },
        onDelete(url: string) {
          formModel.deleteIconUrl = url!;
        },
      };
    },
  },
  {
    field: 'deleteIconUrl',
    label: '',
    component: 'Input',
    show: false,
  },
  {
    field: 'background',
    label: t('system.platform.loginPageBackgroundImage'),
    // component: 'Input',
    // colProps: {
    //   span: 24,
    // },
    // slot: 'bgUpload',
    helpMessage: [t('common.limitUploadText3')],
    component: 'ApiUpload',
    changeEvent: 'update:fileList',
    valueField: 'fileList',
    componentProps: ({ formModel }) => {
      return {
        listType: 'picture-card',
        maxFileLimit: 1,
        accept: '.png,.jpg,.jpeg,.gif,.jfif',
        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,
            } as FileItem;
          } catch (error) {
            return {};
          }
        },
        // showUploadList: true,
        onDownload() {},
        onPreview: (fileList: FileItem) => {
          createImgPreview({ imageList: [fileList.url!] });
        },
        onDelete(url: string) {
          formModel.deleteBackgroundUrl = url!;
        },
      };
    },
  },
  {
    field: 'deleteBackgroundUrl',
    label: '',
    component: 'Input',
    show: false,
  },
  {
    field: 'backgroundColor',
    component: 'AutoComplete',
    label: t('system.platform.platformColor'),
    colProps: {
      span: 24,
    },
    slot: 'colorInput',
  },
  {
    field: 'copyright',
    component: 'Input',
    label: t('system.platform.platformCopyright'),
    colProps: {
      span: 24,
    },
    componentProps: {
      maxLength: 100,
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 100) {
              return Promise.reject(t('common.limitTextLengthIs2'));
            }
            return Promise.resolve();
          },
        },
      ];
    },
  },
  {
    field: 'presentedOurselves',
    component: 'Input',
    label: t('system.platform.filingInformation'),
    colProps: {
      span: 24,
    },
    componentProps: {
      maxLength: 50,
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 50) {
              return Promise.reject(t('common.limitTextLengthIs3'));
            }
            return Promise.resolve();
          },
        },
      ];
    },
  },
  // {
  //   field: 'domain',
  //   component: 'Input',
  //   label: '绑定域名',
  //   colProps: {
  //     span: 24,
  //   },
  //   componentProps: {
  //     maxLength: 100,
  //     placeholder: '请输入绑定域名',
  //   },
  //   dynamicRules: () => {
  //     return [
  //       {
  //         required: false,
  //         validator: (_, value) => {
  //           if (String(value).length > 100) {
  //             return Promise.reject('字数不超过100个字');
  //           }
  //           return Promise.resolve();
  //         },
  //       },
  //     ];
  //   },
  // },
];