/** @format */

import * as React from 'react'
import {Form, Input, Spin, Row, Col, Button, InputNumber} from "antd"
import {FormComponentProps} from "antd/es/form"
import {useState} from "react"


interface DataTitle {
    title: string
    key: string,
    value: string,
    type: string,
    formFiled:any
}

interface DynamicForm {
    dataList: DataTitle[],
    onChange: any,
    handleReset: any,
    handFormSubmit: any
}


const formItemLayout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 12
    },
}

const DbSourceSelect: React.FC<FormComponentProps & DynamicForm> = props => {


    const {getFieldDecorator, getFieldValue, validateFieldsAndScroll, validateFields} = props.form

    const [state, setState] = useState(() => {
        return {
            confirmLoading: false
        }
    })

    const handFormSubmit = () => {
        validateFields((errors, values) => {
            if (errors) {
                return
            }

            setState(prevState => {
                return {
                    ...prevState,
                    confirmLoading: true
                }
            })

            props.handFormSubmit && props.handFormSubmit().finally(()=>{
                setState(prevState => {
                    return {
                        ...prevState,
                        confirmLoading: false
                    }
                })
            })
        })
    }


    return (
        <Form {...formItemLayout}>

            {
                !!props.dataList.length && (
                    <Row>
                        <Col span={6}/>
                        <Col span={12} style={{textAlign: 'left'}}>
                            <Button onClick={props.handleReset}>
                                重置表单
                            </Button>
                        </Col>
                    </Row>
                )
            }
            {
                props.dataList.map((keyItem, index) => {
                    let {title, key} = keyItem
                    return (
                        <Form.Item label={title}
                                   key={index}>
                            {
                                getFieldDecorator(index.toString(), {
                                    rules: [
                                        {
                                            validator: function (rule, value, callback, source, options) {
                                                if (keyItem.type === "int" && value !== "") {
                                                    if (!/\d/.test(value)) {
                                                        callback(title + "请输入数字")
                                                        return
                                                    }
                                                }
                                                callback()
                                            }
                                        }
                                    ]
                                })(
                                    <Input/>
                                )
                            }
                        </Form.Item>
                    )
                })
            }
            {
                !!props.dataList.length && (
                    <Row>
                        <Col span={6}/>
                        <Col span={12} style={{textAlign: 'left'}}>
                            <Button type="primary"
                                    loading={state.confirmLoading}
                                    onClick={handFormSubmit}>
                                提交数据
                            </Button>
                        </Col>
                    </Row>
                )
            }
        </Form>
    )
}


export default Form.create<FormComponentProps & DynamicForm>({

    onFieldsChange(props, changedFields) {

        Object.keys(changedFields).forEach((index) => {
            props.onChange && props.onChange({
                index,
                value: changedFields[index].value,
                formFiled: changedFields[index]
            })
        })
    },

    mapPropsToFields(props) {
        let fields = Object.create(null)
        props.dataList.forEach(({key, value,formFiled}, index) => {
            fields[index] = Form.createFormField({
                ...formFiled,
                value: value,
            })
        })
        return fields
    }
})(DbSourceSelect)
