<script lang="ts" setup>
  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
  import { useForm, BasicForm } from '/@/components/Form';
  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
  import { option } from './config';
  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
  import { createImgPreview } from '/@/components/Preview';
  import { upload } from '/@/api/oss/ossFileUploader';

  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
    schemas: [
      {
        field: ComponentConfigFieldEnum.FONT_SIZE,
        label: '文本字体大小',
        component: 'InputNumber',
        defaultValue: 14,
        componentProps: {
          min: 0,
          max: 100,
          formatter: (e) => {
            const value = e?.toString().replace(/^0/g, '');
            if (value) {
              return value.replace(/^0/g, '');
            } else {
              return 0;
            }
          },
        },
      },
      {
        field: ComponentConfigFieldEnum.PASS_WORD,
        label: '操作密码',
        component: 'InputPassword',
        defaultValue: '',
      },
      {
        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
        label: '显示设备名称',
        component: 'Checkbox',
        defaultValue: option.showDeviceName,
      },
      {
        field: ComponentConfigFieldEnum.DEFAULT_CUSTOM,
        label: '图标类型',
        component: 'RadioGroup',
        defaultValue: 'default',
        componentProps: ({ formModel }) => {
          return {
            options: [
              { label: '系统默认', value: 'default' },
              { label: '自定义', value: 'custom' },
            ],
            onChange() {
              formModel[ComponentConfigFieldEnum.CUSTOM_ICON] = [];
            },
          };
        },
      },
      {
        field: ComponentConfigFieldEnum.ICON_COLOR,
        label: '图标颜色',
        component: 'ColorPicker',
        changeEvent: 'update:value',
        defaultValue: option.iconColor,
        ifShow: ({ model }) => {
          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
        },
      },
      {
        field: ComponentConfigFieldEnum.ICON,
        label: '图标',
        component: 'IconDrawer',
        changeEvent: 'update:value',
        defaultValue: option.icon,
        ifShow: ({ model }) => {
          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
        },
        componentProps({ formModel }) {
          const color = formModel[ComponentConfigFieldEnum.ICON_COLOR];
          return {
            color,
          };
        },
      },
      {
        field: ComponentConfigFieldEnum.CUSTOM_ICON,
        label: '图标',
        component: 'ApiUpload',
        ifShow: ({ model }) => model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] === 'custom',
        changeEvent: 'update:fileList',
        valueField: 'fileList',
        helpMessage: ['支持.svg格式，建议尺寸为32*32px，大小不超过50kb '],
        componentProps: ({ formModel }) => {
          return {
            listType: 'picture-card',
            maxSize: 50 * 1024,
            maxFileLimit: 1,
            accept: '.svg',
            api: async (file: File) => {
              try {
                const formData = new FormData();
                const { name } = file;
                formData.set('file', file);
                const { fileStaticUri, fileName } = await upload(formData);
                return {
                  uid: fileStaticUri,
                  name: name || fileName,
                  url: fileStaticUri,
                } as FileItem;
              } catch (error) {
                return {};
              }
            },
            // showUploadList: true,
            onDownload() {},
            onPreview: (fileList: FileItem) => {
              createImgPreview({ imageList: [fileList.url!] });
            },

            onDelete(url: string) {
              formModel.deleteUrl = url!;
            },
          };
        },
      },
      {
        field: 'deleteUrl',
        label: '',
        component: 'Input',
        show: false,
      },
    ],
    showActionButtonGroup: false,
    labelWidth: 120,
    baseColProps: {
      span: 12,
    },
  });

  const getFormValues = () => {
    return getFieldsValue();
  };

  const setFormValues = (data: Recordable) => {
    return setFieldsValue(data);
  };

  defineExpose({
    getFormValues,
    setFormValues,
    resetFormValues: resetFields,
  } as PublicFormInstaceType);
</script>

<template>
  <BasicForm @register="register" />
</template>