/** @format */

import * as React from 'react';
import {Form, Row, Col} from 'antd';
import {FormComponentProps, FormItemProps, FormProps} from 'antd/es/form';
import {GetFieldDecoratorOptions} from 'antd/es/form/Form';
import {ColProps} from 'antd/es/col';
import Button from '../button';

export interface SearchItemProps {
    key: string;
    col?: ColProps;
    formItem?: FormItemProps;
    options?: GetFieldDecoratorOptions;
    component: React.ReactNode;
    style?:any
}
export interface SearchFromProps {
    dataSource?: SearchItemProps[];
    right?:number;
    preRender?: {
        col: ColProps;
        render: React.ReactNode;
    };
    handleSubmit?: (values: any) => void;
    handleReset?: () => void;
    formOption?: FormProps;
    disabled?: boolean;
    algin?: 'start' | 'center' | 'end' | 'space-around' | 'space-between';
    extra?: React.ReactNode;
}
/**
 * 搜索组件(动态表单,不限制内容，只是带有搜索和重置按钮)
 */
class SearchForm extends React.Component<SearchFromProps & FormComponentProps> {
    onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        event.stopPropagation();
        this.props.form.validateFields((error, values) => {
            if (error) return;
            if (this.props.handleSubmit) {
                this.props.handleSubmit(values);
            }
        });
    };
    render() {
        const {dataSource = [], preRender, form, extra, algin = 'end', disabled = false, handleReset,right} = this.props;
        const {getFieldDecorator} = form;
        return (
            <Form onSubmit={this.onSubmit} style={{marginRight:right}}>
                <Row type='flex' justify={algin} gutter={8}>
                    {!!preRender && (
                        <Col {...preRender.col || {xxl: 4}}>
                            <Form.Item>{preRender.render}</Form.Item>
                        </Col>
                    )}
                    {dataSource.map(element => {
                        const {formItem, key, col = {xxl: 4, lg: 5}, component, options,style} = element;
                        return (
                            <Col key={key} {...col} style={style}>
                                <Form.Item {...formItem}>{getFieldDecorator(key, options)(component)}</Form.Item>
                            </Col>
                        );
                    })}
                    <Form.Item>
                        <Button
                            disabled={disabled}
                            type='primary'
                            htmlType='submit'
                            icon='search'
                            style={{marginRight: 12}}
                        >
                            搜索
                        </Button>
                    </Form.Item>
                    <Form.Item>
                        <Button
                            htmlType='reset'
                            onClick={() => {
                                form.resetFields();
                                if (handleReset) {
                                    handleReset();
                                }
                            }}
                        >
                            重置
                        </Button>
                    </Form.Item>
                    {!!extra && <Form.Item style={{marginLeft: 15}}>{extra}</Form.Item>}
                </Row>
            </Form>
        );
    }
}

export default Form.create<SearchFromProps & FormComponentProps>({name: 'searchFrom'})(SearchForm);
