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

  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
    schemas: [
      {
        field: ComponentConfigFieldEnum.FONT_COLOR,
        label: '数值字体颜色',
        component: 'ColorPicker',
        changeEvent: 'update:value',
        defaultValue: option.fontColor,
      },
      {
        field: ComponentConfigFieldEnum.UNIT,
        label: '数值单位',
        component: 'Input',
        defaultValue: option.unit,
        componentProps: {
          placeholder: '请输入数值单位',
        },
      },
      {
        field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,
        label: '一阶段颜色',
        component: 'ColorPicker',
        changeEvent: 'update:value',
        defaultValue: GradientColor.FIRST,
      },
      {
        field: ComponentConfigFieldEnum.FIRST_PHASE_VALUE,
        label: '一阶段阀值',
        component: 'InputNumber',
        componentProps: {
          placeholder: '请输入一阶段阀值',
          min: 0,
        },
      },
      {
        field: ComponentConfigFieldEnum.SECOND_PHASE_COLOR,
        label: '二阶段颜色',
        component: 'ColorPicker',
        changeEvent: 'update:value',
        defaultValue: GradientColor.SECOND,
      },
      {
        field: ComponentConfigFieldEnum.SECOND_PHASE_VALUE,
        label: '二阶段阀值',
        component: 'InputNumber',
        componentProps: ({ formModel }) => {
          return {
            placeholder: '请输入二阶段阀值',
            min: formModel[ComponentConfigFieldEnum.FIRST_PHASE_VALUE],
          };
        },
      },
      {
        field: ComponentConfigFieldEnum.THIRD_PHASE_COLOR,
        label: '三阶段颜色',
        component: 'ColorPicker',
        changeEvent: 'update:value',
        defaultValue: GradientColor.THIRD,
      },
      {
        field: ComponentConfigFieldEnum.THIRD_PHASE_VALUE,
        label: '三阶段阀值',
        component: 'InputNumber',
        componentProps: ({ formModel }) => {
          return {
            placeholder: '请输入三阶段阀值',
            min: formModel[ComponentConfigFieldEnum.SECOND_PHASE_VALUE],
          };
        },
      },
      {
        field: ComponentConfigFieldEnum.VALUE_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.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.MAX_NUMBER,
        label: '最大值',
        component: 'InputNumber',
        defaultValue: 100,
        componentProps: ({ formActionType }) => {
          const { setFieldsValue } = formActionType;
          return {
            placeholder: '请输入最大值',
            min: 100,
            onChange: async (e) => {
              if (!e) {
                await nextTick();
                setFieldsValue({
                  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
                });
              }
            },
          };
        },
      },
      {
        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
        label: '显示设备名称',
        component: 'Checkbox',
        defaultValue: option.showDeviceName,
      },
      {
        field: ComponentConfigFieldEnum.SHOW_TIME,
        label: '显示时间',
        component: 'Checkbox',
        defaultValue: option.showTime,
      },
    ],
    showActionButtonGroup: false,
    labelWidth: 120,
    baseColProps: {
      span: 12,
    },
  });

  const getFormValues = () => {
    const value = getFieldsValue();
    return {
      gradientInfo: [
        {
          key: Gradient.FIRST,
          value: value[ComponentConfigFieldEnum.FIRST_PHASE_VALUE],
          color: value[ComponentConfigFieldEnum.FIRST_PHASE_COLOR],
        },
        {
          key: Gradient.SECOND,
          value: value[ComponentConfigFieldEnum.SECOND_PHASE_VALUE],
          color: value[ComponentConfigFieldEnum.SECOND_PHASE_COLOR],
        },
        {
          key: Gradient.THIRD,
          value: value[ComponentConfigFieldEnum.THIRD_PHASE_VALUE],
          color: value[ComponentConfigFieldEnum.THIRD_PHASE_COLOR],
        },
      ],
      fontColor: value[ComponentConfigFieldEnum.FONT_COLOR],
      unit: value[ComponentConfigFieldEnum.UNIT],
      showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
      showTime: value[ComponentConfigFieldEnum.SHOW_TIME],
      maxNumber: value[ComponentConfigFieldEnum.MAX_NUMBER],
      valueSize: value[ComponentConfigFieldEnum.VALUE_SIZE],
      fontSize: value[ComponentConfigFieldEnum.FONT_SIZE],
    } as ComponentInfo;
  };

  const setFormValues = (data: ComponentInfo) => {
    const {
      gradientInfo,
      unit,
      fontColor,
      showDeviceName,
      showTime,
      maxNumber,
      valueSize,
      fontSize,
    } = data;
    const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
    const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
    const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD);
    const value = {
      [ComponentConfigFieldEnum.UNIT]: unit,
      [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
      [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
      [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
      [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
      [ComponentConfigFieldEnum.VALUE_SIZE]: valueSize,
      [ComponentConfigFieldEnum.FONT_SIZE]: fontSize,
      [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value,
      [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
      [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value,
      [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
      [ComponentConfigFieldEnum.THIRD_PHASE_VALUE]: thirdRecord?.value,
      [ComponentConfigFieldEnum.THIRD_PHASE_COLOR]: thirdRecord?.color,
    };
    return setFieldsValue(value);
  };

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

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