import React, { useState } from 'react';
import {
  FormLayout, Button, Radio,
  FormOptions, FormLayoutBtnsConfig
} from '@deer-ui/core';

const FormLayoutDemo = () => {
  const [layout, setLayout] = useState('horizontal');
  const [resDesc, setResDesc] = useState('');

  const submit = (formData, actingRef) => {
    // 模拟获取数据
    setTimeout(() => {
      setResDesc({
        hasErr: false,
        resDesc: '成功'
      });
    }, 800);
  }

  const formBtns: FormLayoutBtnsConfig = [
    {
      action: (formRef, actingRef) => {
        submit(formRef.value, actingRef);
      },
      type: 'submit',
      text: 'Button',
      actingRef: 'forTest'
    },
  ];

  const formOptions: FormOptions = [
    {
      type: 'input',
      ref: 'InputField',
      defaultValue: '123',
    },
    {
      type: 'radio',
      ref: "RadioField",
      values: {
        radioValue1: 'radioText1',
        radioValue2: 'radioText2',
      }
    }
  ];

  return (
    <>
      <Radio
        onChange={nextLayout => setLayout(nextLayout)}
        defaultValue="horizontal"
        values={{
          'horizontal': '水平布局',
          'vertical': '垂直布局',
          'flow': '流布局',
        }} />
      <FormLayout
        layout={layout}
        formBtns={formBtns}
        onChange={(changedValues, ref, currChangeValue) => {

        }}
        formOptions={formOptions}/>
    </>
  );
}
ReactDOM.render(
  <FormLayoutDemo />,
  document.querySelector('#Main')
);