<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 { ComponentInfo } from '/@/views/visual/palette/types';
  import { nextTick, toRaw } from 'vue';

  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
    schemas: [
      {
        field: ComponentConfigFieldEnum.FONT_COLOR,
        label: t('visual.board.numberColorText'),
        component: 'ColorPicker',
        changeEvent: 'update:value',
        defaultValue: option.fontColor,
      },
      {
        field: ComponentConfigFieldEnum.BACKGROUND_COLOR,
        label: t('visual.board.bgcolorText'),
        component: 'ColorPicker',
        changeEvent: 'update:value',
        defaultValue: option.flowmeterConfig?.backgroundColor,
      },
      {
        field: ComponentConfigFieldEnum.WAVE_FIRST,
        label: t('visual.board.wave1Text'),
        component: 'ColorPicker',
        changeEvent: 'update:value',
        defaultValue: option.flowmeterConfig?.waveFirst,
      },
      {
        field: ComponentConfigFieldEnum.WAVE_SECOND,
        label: t('visual.board.wave2Text'),
        component: 'ColorPicker',
        changeEvent: 'update:value',
        defaultValue: option.flowmeterConfig?.waveSecond,
      },
      {
        field: ComponentConfigFieldEnum.WAVE_THIRD,
        label: t('visual.board.wave3Text'),
        component: 'ColorPicker',
        changeEvent: 'update:value',
        defaultValue: option.flowmeterConfig?.waveThird,
      },
      {
        field: ComponentConfigFieldEnum.UNIT,
        label: t('visual.board.unitText'),
        component: 'Input',
        defaultValue: option.unit,
      },
      {
        field: ComponentConfigFieldEnum.VALUE_SIZE,
        label: t('visual.board.numberSizeText'),
        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.FONT_SIZE,
        label: t('visual.board.fontSizeText'),
        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.MAX_NUMBER,
        label: t('visual.board.maxNumText'),
        component: 'InputNumber',
        defaultValue: 100,
        componentProps: ({ formActionType }) => {
          const { setFieldsValue } = formActionType;
          return {
            min: 100,
            onChange: async (e) => {
              if (!e) {
                await nextTick();
                setFieldsValue({
                  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
                });
              }
            },
          };
        },
      },
      {
        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
        label: t('visual.board.isDeviceNameText'),
        component: 'Checkbox',
        defaultValue: option.showDeviceName,
      },
      {
        field: ComponentConfigFieldEnum.SHOW_TIME,
        label: t('visual.board.isTimeText'),
        component: 'Checkbox',
        defaultValue: option.showDeviceName,
      },
    ],
    showActionButtonGroup: false,
    labelWidth: 140,
    baseColProps: {
      span: 12,
    },
  });

  const getFormValues = () => {
    const value = getFieldsValue();
    return {
      ...value,
      flowmeterConfig: {
        backgroundColor: value[ComponentConfigFieldEnum.BACKGROUND_COLOR],
        waveFirst: value[ComponentConfigFieldEnum.WAVE_FIRST],
        waveSecond: value[ComponentConfigFieldEnum.WAVE_SECOND],
        waveThird: value[ComponentConfigFieldEnum.WAVE_THIRD],
      },
    } as ComponentInfo;
  };

  const setFormValues = (data: ComponentInfo) => {
    const { flowmeterConfig } = data || {};
    return setFieldsValue({
      ...toRaw(data),
      [ComponentConfigFieldEnum.BACKGROUND_COLOR]: flowmeterConfig?.backgroundColor,
      [ComponentConfigFieldEnum.WAVE_FIRST]: flowmeterConfig?.waveFirst,
      [ComponentConfigFieldEnum.WAVE_SECOND]: flowmeterConfig?.waveSecond,
      [ComponentConfigFieldEnum.WAVE_THIRD]: flowmeterConfig?.waveThird,
    });
  };

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

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