import { Button } from 'antd';
import React, { useRef } from 'react';
import { XForm } from '../packages/react/src/index';
import { ISchema } from '../packages/types/src/index';

const schema: ISchema = [
    {
        key: 'radio1',
        type: 'Radio',
        ui: {
            label: '状态'
        },
        options: [
            {
                name: '编辑',
                value: 'edit'
            },
            {
                name: '预览',
                value: 'preview'
            },
            {
                name: '禁用',
                value: 'disabled'
            },
            {
                name: '隐藏',
                value: 'hidden'
            }
        ]
    },
    {
        key: 'input1',
        type: 'Input',
        ui: {
            label: '输入框'
        },
        listeners: [
            {
                watch: [ 'radio1' ],
                set: (_valid, field, form) => {
                    field.setStatus(form.fieldMap.radio1.value);
                }
            }
        ]
    }
];

export default function() {
    const formRef = useRef(null);

    const onSubmit = () => {
        formRef.current.submit().then((data: any) => {
            console.log(data);
        });
    };

    const onReset = () => {
        formRef.current.reset();
    };

    const onEmpty = () => {
        formRef.current.empty();
    };

    return (
        <>
            <XForm
                ref={formRef}
                schema={schema}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 12 }}
            />
            <div style={{display: 'flex', justifyContent: 'center'}}>
                <Button type="primary" onClick={onSubmit}>提交</Button>
                <Button style={{ marginLeft: '10px' }} onClick={onReset}>重置</Button>
                <Button style={{ marginLeft: '10px' }} onClick={onEmpty}>清空</Button>
            </div>
        </>
    );
}