/** @format */
import * as React from 'react';
import ModalForm from '../modalForm';
import {FormComponentProps} from 'antd/es/form';
import {Form, InputNumber, Switch, Alert} from 'antd';
const formItemLayout = {
    labelCol: {
        sm: {span: 6},
    },
    wrapperCol: {
        sm: {span: 18},
    },
};
export interface AlertFormDataProps {
    threshold_timeout: number;
    threshold_fail_rate: number;
    threshold_norecord_rate: number;
    warning_enable: boolean;
    rate_limit:number;
}

interface AlertSetProps extends FormComponentProps {
    values: AlertFormDataProps;
    loading?: boolean;
    visible?: boolean;
    error?: null | string;
    name?: string;
    onCancel: () => void;
    onSubmit?: (values: AlertFormDataProps) => void;
}

const AlertSet: React.FC<AlertSetProps> = props => {
    const {values, onSubmit,visible=false,loading=false,error=null, form, name, onCancel} = props;
    const {getFieldDecorator, validateFieldsAndScroll} = form;
    const handleSubmit = () => {
        validateFieldsAndScroll((error, values) => {
            if (error) return;
            onSubmit && onSubmit({
              ...values,
              threshold_fail_rate:values.threshold_fail_rate/100,
              threshold_norecord_rate:values.threshold_norecord_rate/100
            });
        });
    };
    return (
        <ModalForm
            title={`预警阈值(${name})`}
            visible={visible}
            onCancel={onCancel}
            error={error}
            onOk={handleSubmit}
            maskClosable={false}
            loading={loading}
        >
            <Form {...formItemLayout}>
                <Form.Item label='超时时长(s)'>
                    {getFieldDecorator('threshold_timeout', {
                        initialValue: values.threshold_timeout,
                        rules: [
                            {
                                required: true,
                                message: '请设置超时时长!',
                            },
                        ],
                    })(<InputNumber min={0} />)}
                </Form.Item>
                <Form.Item label='异常占比(%)'>
                    {getFieldDecorator('threshold_fail_rate', {
                        initialValue: values.threshold_fail_rate*100,
                        rules: [
                            {
                                required: true,
                                message: '请输入占比率',
                            },
                        ],
                    })(<InputNumber min={0} />)}
                </Form.Item>
                <Form.Item label='查无占比(%)'>
                    {getFieldDecorator('threshold_norecord_rate', {
                        initialValue: values.threshold_norecord_rate*100,

                        rules: [
                            {
                                required: true,
                                message: '请输入占比率',
                            },
                        ],
                    })(<InputNumber min={0} />)}
                </Form.Item>
                <Form.Item label='并发限制'>
                    {getFieldDecorator('rate_limit', {
                        initialValue: values.rate_limit,
                    })(<InputNumber min={0} precision={0}/>)}
                </Form.Item>
                <Alert message='提示：阈值预警按每15分钟统计一次。' type='warning' />
                <Form.Item label='是否预警'>
                    {getFieldDecorator('warning_enable', {
                        valuePropName: 'checked',
                        initialValue: values?.warning_enable || false,
                    })(<Switch />)}
                </Form.Item>
            </Form>
        </ModalForm>
    );
};
export default Form.create<AlertSetProps>({name: 'alertSet'})(AlertSet);
