import React from "react";
import MenuHeader from "./Menu";
import { Row, Col, Image, Form, Input, Button, InputNumber } from "antd";
import ComputerImg from '../static/web/home/computer.png';
import './style/form.less';

const ContactUsForm = () => {
    const onFinish = (values) => {
        console.log('Success:', values);
    };
    return (<>
        <MenuHeader />
        <div className="form_container">
            <Row className="form_row">
                <Col className="image" span={10} offset={2}>
                    <Image src={ComputerImg} preview={false} width={500} />
                </Col>
                <Col className="value" span={8} offset={2}>
                    <Form
                        autoComplete="off"
                        onFinish={onFinish}
                        scrollToFirstError={true}
                        style={{ height: "100%" }}
                    >
                        <Form.Item>
                            <h2>联系我们</h2>
                        </Form.Item>
                        <Form.Item
                            name="company_name"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入公司名称',
                                },
                            ]}
                        >
                            <Input placeholder="请输入公司名称" />
                        </Form.Item>
                        <Form.Item
                            name="name"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入姓名',
                                },
                            ]}
                        >
                            <Input placeholder="请输入姓名" />
                        </Form.Item>
                        <Form.Item
                            name="phone"
                            validateTrigger='onChange'
                            rules={[
                                {
                                    required: true,
                                    message: '请输入正确的手机号码',
                                    pattern: /^1[3-9]\d{9}$/,
                                    type: 'number',
                                    validateTrigger: 'onBlur',
                                },
                            ]}
                        >
                            <InputNumber placeholder="请输入手机号码"
                                style={{ width: "100%", boxShadow: 'none' }} controls={false} />
                        </Form.Item>
                        <Form.Item
                            name="e-mail"
                        >
                            <Input placeholder="请输入邮箱" />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
                                立即提交
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        </div>
    </>)
};

export default ContactUsForm;