import React, { useCallback } from "react";
import { Form, Input, InputNumber, Radio, Row, Select, Cascader } from "antd";
import InputWithLen from "./widget/InputWithLen";
import TextArea from "./widget/TextArea";
import CateSelect from "./widget/CateSelect";
import { locData } from "../data/locData";
import { mapPropsToFields } from "../data/mapJobData";
import styled from "styled-components";

const Divider = styled.div`
  position: relative;
  top: 20px;
  border: 1px solid #bbbbbb;
  width: 30px;
  height: 1px;
  margin: 0 10px;
`;
const Label = styled.div`
  &::before{
    content:${p=>p.required?'"*"':'""'};
    color:${p=>p.required?"red":"black"};
  }
  &::after{
    content:"：";
  }
  margin-bottom:5px;
  font-size: 16px;
  font-family: MicrosoftYaHeiSemibold;
  color: rgba(51, 51, 51, 1);
`;

export default Form.create({ mapPropsToFields })(({ form }) => {
  const { getFieldDecorator } = form;
  const helper = useCallback(
    (label, name, rules, widget, isRequired = true) => (
      <React.Fragment>
        <Label required={isRequired}>{label}</Label>
        <Form.Item>
          {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
        </Form.Item>
      </React.Fragment>
    ),
    []
  );
  const jobValidator = useCallback((r, v, cb) => {
    if (!v) {
      cb("请选择职位类别");
    } else if (!v.father || !v.son) {
      cb("请选择职位类别");
    } else {
      cb();
    }
  }, []);
  const greatValidator = useCallback((r, v, cb) => {
    if (Number(v) >= Number(form.getFieldValue("min"))) {
      cb();
    } else {
      cb("薪酬范围不正确");
    }
  }, []);
  const cityValidator = useCallback((r, v, cb) => {
    if (!v[1]) {
      cb("请选择城市");
    } else {
      cb();
    }
  }, []);
  return (
    <Form>
      {helper(
        "职位名称",
        "name",
        [
          { required: true, message: "请输入职位名称" },
          { max: 60, message: "超过60字符" },
        ],
        <InputWithLen maxLen={60} placeholder="请输入职位名称" />
      )}
      {helper(
        "职位类别",
        "class",
        [{ validator: jobValidator }],
        <CateSelect />
      )}
      {helper(
        "招聘人数",
        "num",
        [],
        <InputNumber placeholder="请输入招聘人数" min={0} style={{width:"252px"}}/>,
        false
      )}
      {helper(
        "工作性质",
        "prop",
        [{ required: true, message: "请选择工作性质" }],
        <Radio.Group>
          {["全职", "兼职", "实习"].map((s) => (
            <Radio value={s}>{s}</Radio>
          ))}
        </Radio.Group>
      )}
      <Label required>工作地址</Label>
      <Row type="flex">
        <Form.Item>
          {getFieldDecorator("city", {
            rules: [{ validator: cityValidator }],
          })(<Cascader placeholder="请选择城市" options={locData} style={{width:"191px",marginRight:"15px"}}/>)}
        </Form.Item>
        <Form.Item sty>
          {getFieldDecorator("address", {
            rules: [
              { required: true, message: "请输入详细地址" },
              { max: 60, message: "超过60字符" },
            ],
            validateFirst: true,
          })(<Input placeholder="请输入详细地址" style={{width:"910px"}}/>)}
        </Form.Item>
      </Row>
      <Label>月薪范围</Label>
      <Row type="flex">
        <Form.Item>
          {getFieldDecorator("min", {
            rules: [
              { pattern: /^\s*\d+\s*$/, message: "请输入数字" },
              { required: true, message: "请输入最低薪酬" },
            ],
            validateFirst: true,
          })(<Input placeholder="最低" suffix="元" style={{width:"252px"}}/>)}
        </Form.Item>
        <Divider />
        <Form.Item>
          {getFieldDecorator("max", {
            rules: [
              { pattern: /^\s*\d+\s*$/, message: "请输入数字" },
              { required: true, message: "请输入最高薪酬" },
              { validator: greatValidator },
            ],
            validateFirst: true,
          })(<Input placeholder="最高" suffix="元" style={{width:"252px"}}/>)}
        </Form.Item>
      </Row>
      {helper(
        "最低学历",
        "edu",
        [{ required: true, message: "请选择最低学历" }],
        <Select style={{width:"252px"}}>
          {[
            "学历不限",
            "本科",
            "硕士",
            "博士",
            "大专",
            "中技",
            "中专",
            "高中",
          ].map((s) => (
            <Select.Option value={s}>{s}</Select.Option>
          ))}
        </Select>
      )}
      {helper(
        "工作年限",
        "exp",
        [{ required: true, message: "请选择工作年限" }],
        <Select style={{width:"252px"}}>
          {["经验不限", "1年以下", "1-3年", "3-5年", "5-10年", "10年以上"].map(
            (s) => (
              <Select.Option value={s}>{s}</Select.Option>
            )
          )}
        </Select>
      )}
      {helper(
        "职位描述",
        "desc",
        [
          { required: true, message: "请输入职位描述" },
          { max: 5000, message: "超过5000字符" },
        ],
        <TextArea
          placeholder="请输入职位描述"
          autoSize={{ minRows: 6, maxRows: 6 }}
        ></TextArea>
      )}
      {helper(
        "公司介绍",
        "intro",
        [{ max: 5000, message: "超过5000字符" }],
        <TextArea
          placeholder="请输入公司介绍"
          autoSize={{ minRows: 6, maxRows: 6 }}
        ></TextArea>
      )}
    </Form>
  );
});
