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

const edu_bg = ["本科", "硕士", "博士", "大专", "其他"];
const edu_category = ["统招全日制", "统招非全日制", "自考", "其他"];

export default ({ nameKey, onDelete }) => {
  const { getFieldDecorator, getFieldValue } = useContext(FormCtx);
  const greatValidater = useCallback((r, v, cb) => {
    if (v >= getFieldValue(`education[${nameKey}].begin_on`)) {
      cb();
    } else {
      cb("时间范围不正确");
    }
  }, []);
  return (
    <div>
      <Row>
        <Col span={7}>
          <Form.Item>
            {getFieldDecorator(`education[${nameKey}].begin_on`, {
              rules: [{ required: true, message: "请选择开始日期" }],
            })(<MonthPicker placeholder="请选择开始日期" />)}
          </Form.Item>
        </Col>
        <Col span={7}>
          <Form.Item>
            {getFieldDecorator(`education[${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>
      <Row>
        <Col span={6}>
          <Form.Item>
            {getFieldDecorator(`education[${nameKey}].edu_bg`, {
              rules: [{ required: true, message: "请选择学历" }],
            })(
              <Select placeholder="请选择学历">
                {edu_bg.map((i) => (
                  <Select.Option value={i}>{i}</Select.Option>
                ))}
              </Select>
            )}
          </Form.Item>
        </Col>
        <Col span={6} push={1}>
          <Form.Item>
            {getFieldDecorator(`education[${nameKey}].edu_category`, {
              rules: [{ required: true, message: "请选择学历类型" }],
            })(
              <Select placeholder="请选择学历类型">
                {edu_category.map((i) => (
                  <Select.Option value={i}>{i}</Select.Option>
                ))}
              </Select>
            )}
          </Form.Item>
        </Col>
        <Col span={6} push={2}>
          <Form.Item>
            {getFieldDecorator(`education[${nameKey}].major`, {
              rules: [
                { required: true, message: "请输入专业" },
                { max: 60, message: "超过60字符" },
                { whitespace: true, message: "不能全空" },
              ],
              validateFirst: true,
            })(<Input placeholder="请输入专业" />)}
          </Form.Item>
        </Col>
      </Row>
      <Form.Item>
        {getFieldDecorator(`education[${nameKey}].school`, {
          rules: [
            { required: true, message: "请输入学校名称" },
            { max: 60, message: "超过60字符" },
            { whitespace: true, message: "不能全空" },
          ],
          validateFirst: true,
        })(<Input placeholder="请输入学校名称" />)}
      </Form.Item>
    </div>
  );
};
