/** @format */
import * as React from 'react';
import Modal, {ModalFormProps} from '../../../../../components/modalForm';
import RangePicker from '../../../../../components/datePicker/rangePicker';
import {Form, Input} from 'antd';
import moment from 'moment';
import 'antd/es/date-picker/locale/zh_CN';
import {FormComponentProps} from 'antd/es/form';
import {GetFieldDecoratorOptions} from 'antd/es/form/Form';

moment.locale('zh-cn');

interface FormItemProps extends GetFieldDecoratorOptions {
    key: string;
    component: React.ReactNode;
    label: string;
}
interface createReportFormProps extends FormComponentProps, ModalFormProps {
    childs?: FormItemProps[];
    handlePost: (values: any) => void;
    error?: null | string;
    loading?: boolean;
    onCancel: () => void;
}
const formItemLayout = {
    labelCol: {
        xs: {span: 24},
        sm: {span: 4},
    },
    wrapperCol: {
        sm: {span: 20},
    },
};
export default Form.create<createReportFormProps>({name: 'createReportForm'})((props: createReportFormProps) => {
    const {form, childs = [], visible, handlePost, error, loading, onCancel} = props;
    const {getFieldDecorator, validateFieldsAndScroll} = form;
    const disabledDate = (current: moment.Moment | undefined) => {
        return !!current && current > moment().endOf('day');
    };
    const handleSubmit = () => {
        validateFieldsAndScroll((error, values) => {
            if (error) return;
            const {time, ...rest} = values;
            handlePost({
                ...rest,
                start_timestamp: values.time[0].unix(),
                end_timestamp: values.time[1].unix(),
            });
        });
    };
    return (
        <Modal
            onCancel={onCancel}
            title='导出任务'
            visible={visible}
            onOk={handleSubmit}
            error={error}
            loading={loading}
        >
            <Form {...formItemLayout}>
                <Form.Item label='任务名称'>
                    {getFieldDecorator('export_name', {
                        initialValue: '',
                        rules: [
                            {
                                required: true,
                                message: '请输入任务名称!',
                            },
                        ],
                    })(<Input placeholder='请输入任务名称!' />)}
                </Form.Item>
                {childs.map(element => {
                    const {key, component, label, ...rest} = element;
                    return (
                        <Form.Item label={label} key={key}>
                            {getFieldDecorator(key, rest)(component)}
                        </Form.Item>
                    );
                })}
                <Form.Item label='超时时长(s)'>
                    {getFieldDecorator('time_list', {
                        initialValue: '',
                    })(<Input placeholder='可设置多个数值，用英文逗号（,）分隔!' />)}
                </Form.Item>
                <Form.Item label='日期范围'>
                    {getFieldDecorator('time', {
                        rules: [
                            {
                                required: true,

                                message: '请选择时间!',
                            },
                        ],
                    })(<RangePicker format='YYYY-MM-DD HH:mm:ss' disabledDate={disabledDate} />)}
                </Form.Item>
            </Form>
        </Modal>
    );
});
