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: 'input',
        type: 'Input',
        value: '12124',
        ui: {
            label: 'Input'
        }
    },
    {
        key: 'startTime',
        type: 'DateTimePicker',
        props: {
            format: 'HH:mm',
            valueType: 'timestamp'
        },
        ui: {
            label: '开始时间'
        },
        rules: [
            {
                required: true,
                message: '输入内容不能为空'
            }
        ]
    },
    {
        key: 'startTime1',
        type: 'TimePicker',
        props: {
            format: 'HH:mm',
            valueType: 'timestamp'
        },
        ui: {
            label: '开始时间'
        },
        // rules: [
        //     {
        //         required: true,
        //         message: '输入内容不能为空'
        //     }
        // ]
    }
];

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 }}></XForm>
            <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>
        </>
    );
}