import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Card, Radio, notification } from 'antd';
import moment from 'moment';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import Styles from './style.less';
import { router } from 'umi';


const { TextArea } = Input;

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

const openNotificationWithIcon = (type, message) => {
  notification[type]({
    message, 
    description:
      '',
  });
}

function body(props) {
  const { getFieldDecorator } = props.form

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [visibleData, setVisibleData] = useState({ visible: false, customerId: '', realtyConsultant: '', buildingId: ''})

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [dataSource, setDataSource] = useState({ picture: '' })

  const { id } = props.location.query;

  if (id !== '') {
    //useEffect循环可能导致在呈现字段之前无法设置表单字段
    // 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)})
        //包裹的没渲染完就执行set 导致在呈现字段之前无法设置表单字段
    }

    })
  }

  function submitDate(params) {
    // props.form.setFieldsValue(res)
    console.log(params, 'params')
    request({ ...apis.customer.auto, urlData: { id: params.customerId || props.form.getFieldValue('customerId') }, params: { verifyStatus: params.verifyStatus, realtyConsultant: props.form.getFieldValue('realtyConsultant') } }).then(() => {
      // eslint-disable-next-line no-unused-expressions
      openNotificationWithIcon('success', '操作成功')
      router.go(-1)
    }).catch(err => {
      // eslint-disable-next-line no-unused-expressions

    })
  }

  // 提交事件
  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        submitDate({ verifyStatus: '1' })
        // submitDate({ ...values })
      }
    });
  }

  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,message:'请输入回访备注！'}]//v3x必填
          })(
            <TextArea placeholder="回访备注" rows={7} />,
          )}
        </Form.Item>
        <Form.Item style={{ display: 'flex', justifyContent: 'center' }}>
          <Button type="primary" className={Styles.SubmitButton} htmlType="submit" >
            有效
          </Button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Button onClick={() => submitDate({ verifyStatus: '2' })}>
            无效
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}
const HouseCopm = Form.create({ name: 'body' })(body);

export default HouseCopm