<script lang="ts" setup>
  import { ComponentConfigFieldEnum } from '../../../enum';
  import { option } from './config';
  import { useForm, BasicForm } from '/@/components/Form';
  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
  import { ComponentInfo } from '/@/views/visual/palette/types';

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

  const { t } = useI18n();
  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
    schemas: [
      {
        field: ComponentConfigFieldEnum.UNIT,
        label: t('visual.board.numUnitText'),
        component: 'Input',
        defaultValue: option.unit,
      },
      // {
      //   field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
      //   label: t('visual.board.isDeviceNameText'),
      //   component: 'Checkbox',
      //   defaultValue: option.showDeviceName,
      // },
    ],
    showActionButtonGroup: false,
    labelWidth: 140,
    baseColProps: {
      span: 12,
    },
  });

  const getFormValues = () => {
    // return getFieldsValue();
    const item = getFieldsValue();
    return {
      fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
      unit: item[ComponentConfigFieldEnum.UNIT],
      showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
    } as ComponentInfo;
  };

  const setFormValues = (data: Recordable) => {
    // return setFieldsValue(data);
    const { unit, fontColor, showDeviceName } = data;

    const value = {
      [ComponentConfigFieldEnum.UNIT]: unit,
      [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
      [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
    };
    return setFieldsValue(value);
  };

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

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