import * as React from "react"
import {Button, Form, Modal, Input} from "antd"
import {FormComponentProps} from "antd/es/form"


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

const vinGetData: React.FC<FormComponentProps> = props => {
    const [state, setState] = React.useState({dialogVisible: false})
    let {form} = props

    let targetDialogVisible = () => {
        setState(() => {
            return {dialogVisible: true}
        })
    }
    let {getFieldDecorator} = form
    
    return (
        <>
            <Button onClick={targetDialogVisible}>vin</Button>

            <Modal visible={state.dialogVisible}
                   title="VIN"
                   onCancel={targetDialogVisible}>
                <Form {...formItemLayout}>
                    <Form.Item label="VIN">
                        {getFieldDecorator("vin")(<Input/>)}
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default Form.create()(vinGetData)
