import React, { useEffect } from 'react';
import { Form, Input, Button, Card, Radio } from 'antd';
import moment from 'moment';
import request from '../../../utils/request';
import apis from '../../../services/apis';


const { TextArea } = Input;

const tailFormItemLayout = {
  labelCol: {
    xs: { span: 20 },
    sm: { span: 3 },
  },
  wrapperCol: {
    xs: { span: 20 },
    sm: { span: 16 },
  },
};

function body(props) {
  const { getFieldDecorator } = props.form
  const { id } = props.location.query;

  if (id !== '') {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(() => {
      getById(id)
    }, [])
  }

  // 获取详情信息
  function getById(currentId) {
    request({ ...apis.customer.recommendGetById, urlData: { id: currentId } }).then(res => {
      // res.reportDate = moment(res.reportDate)
      if (res) {
        props.form.setFieldsValue({ ...res, reportDate: moment(res.reportDate) })
      }

    })
  }
  //返回上一页
  function backCom() {
    window.history.back(-1)
  }
  return (
    <Card>
      <Form {...tailFormItemLayout} onSubmit={e => handleSubmit(e)} style={{ width: '800px', margin: 'auto' }}>
        <Form.Item label="客户ID" style={{ display: 'none' }}>
          {getFieldDecorator('customerId')(
            <Input
              placeholder="客户ID"
            />,
          )}
        </Form.Item>
        {/* ············分割线............. */}
        <Form.Item label="意向项目：">
          {getFieldDecorator('intention')(
            <Input
              placeholder="意向项目"
            />,
          )}
        </Form.Item>
        <Form.Item label="客户姓名">
          {getFieldDecorator('name')(
            <Input placeholder="客户姓名" />,
          )}
        </Form.Item>
        <Form.Item label="客户电话">
          {getFieldDecorator('phone')(
            <Input placeholder="客户电话" />,
          )}
        </Form.Item>
        <Form.Item label="客户性别">
          {getFieldDecorator('sex')(
            <Radio.Group>
              <Radio value={1}>男</Radio>
              <Radio value={2}>女</Radio>
            </Radio.Group>,
          )}
        </Form.Item>
        <Form.Item label="客户备注"  >
          {getFieldDecorator('say')(
            <TextArea placeholder="客户描述" rows={7}
            />,
          )}
        </Form.Item>
        <Form.Item label="回访备注" >
          {getFieldDecorator('describe', {
            rules: [{ required: true }]//v3x必填
          })(
            <TextArea placeholder="回访备注" rows={7} value={props} />,
          )}
        </Form.Item>
        <Form.Item style={{ display: 'flex', justifyContent: 'center' }}>
          <Button onClick={backCom} >返回</Button>
        </Form.Item>
      </Form>
    </Card>
  );
}
const HouseCopm = Form.create({ name: 'body' })(body);

export default HouseCopm