import React, { useContext, useCallback } from "react";
import { FormCtx } from "../Form";
import { Row, Col, Form, Input, Icon } from "antd";
import MonthPicker from "./MothPicker";

export default ({ nameKey, onDelete }) => {
  const { getFieldDecorator, getFieldValue } = useContext(FormCtx);
  const greatValidater = useCallback((r, v, cb) => {
    if (v >= getFieldValue(`experience[${nameKey}].begin_on`)) {
      cb();
    } else {
      cb("时间范围不正确");
    }
  }, []);
  return (
    <div>
      <Row>
        <Col span={7}>
          <Form.Item>
            {getFieldDecorator(`experience[${nameKey}].begin_on`, {
              rules: [{ required: true, message: "请选择开始日期" }],
            })(<MonthPicker placeholder="请选择开始日期" />)}
          </Form.Item>
        </Col>
        <Col span={7}>
          <Form.Item>
            {getFieldDecorator(`experience[${nameKey}].end_on`, {
              rules: [
                { required: true, message: "请选择结束日期" },
                { validator: greatValidater },
              ],
              validateFirst: true,
            })(<MonthPicker placeholder="请选择结束日期" />)}
          </Form.Item>
        </Col>
        <Col>
          {onDelete ? (
            <Icon
              type="close-circle"
              onClick={onDelete}
              style={{ color: "red", marginTop: "15px" }}
            />
          ) : null}
        </Col>
      </Row>
      <Form.Item>
        {getFieldDecorator(`experience[${nameKey}].company`, {
          rules: [
            { max: 60, message: "超过60字符" },
            { required: true, message: "请输入公司名称" },
            { whitespace: true, message: "不能全空" },
          ],
          validateFirst: true,
        })(<Input placeholder="请输入公司名称" />)}
      </Form.Item>
      <Form.Item>
        {getFieldDecorator(`experience[${nameKey}].desc`, {
          rules: [
            { max: 5000, message: "超过5000字符" },
            { required: true, message: "请输入工作描述" },
          ],
          validateFirst: true,
        })(
          <Input.TextArea
            placeholder="请输入工作描述"
            autoSize={{ minRows: 4, maxRows: 4 }}
          />
        )}
      </Form.Item>
    </div>
  );
};
