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

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

const PlateNoGetData: React.FC<FormComponentProps> = props => {

    const [state, setState] = React.useState({
        plateNoDialogVisible: false,
        plateNo: "",
        plateType: ""
    })


    const {getFieldDecorator, validateFieldsAndScroll, setFieldsValue} = props.form


    const changeDialogVisible = () => {
        setState(() => ({...state, plateNoDialogVisible: !state.plateNoDialogVisible}))
    }

    const handConfirmPlateNo = () => {
        validateFieldsAndScroll((error, values) => {
            if (error) {
                return
            }
        })
    }


    return (
        <>
            <Button onClick={changeDialogVisible}>
                车牌号
            </Button>

            <Modal title="车牌号"
                   onCancel={changeDialogVisible}
                   onOk={handConfirmPlateNo}
                   visible={state.plateNoDialogVisible}>

                <Form {...formItemLayout}>
                    <Form.Item label="车牌号">
                        {
                            getFieldDecorator("plateNo", {
                                rules: [
                                    {required: true, message: "必填"},
                                    {len: 3, message: "为3位"}
                                ],
                                initialValue: "川"
                            })(<Input/>)
                        }
                    </Form.Item>
                    <Form.Item label="号牌类型">
                        {
                            getFieldDecorator("plateType")(<Input/>)
                        }
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default Form.create<FormComponentProps>()(PlateNoGetData)
