<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';

  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
    schemas: [
      // {
      //   field: ComponentConfigFieldEnum.OPEN_COLOR,
      //   label: '设备正常颜色',
      //   component: 'ColorPicker',
      //   changeEvent: 'update:value',
      //   componentProps: {
      //     defaultValue: option.openColor,
      //   },
      // },
      // {
      //   field: ComponentConfigFieldEnum.CLOSE_COLOR,
      //   label: '设备告警颜色',
      //   component: 'ColorPicker',
      //   changeEvent: 'update:value',
      //   componentProps: {
      //     defaultValue: option.closeColor,
      //   },
      // },
      {
        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
        label: '显示设备名称',
        component: 'Checkbox',
        defaultValue: option.showDeviceName,
      },
      {
        field: ComponentConfigFieldEnum.SHOW_TIME,
        label: '显示时间',
        component: 'Checkbox',
        defaultValue: option.showTime,
      },
      {
        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;
            }
          },
        },
      },
    ],
    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>
