import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Upload, message } from 'antd';
import ImageUpload from '../../../components/XForm/ImageUpload';
import moment from 'moment';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import Styles from './style.less';
import { router } from 'umi';

const { Option } = Select;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { Meta } = Card;

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

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

  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)
     props.form.setFieldsValue(res)
    })
  }

  function submitDate(params) {
    // props.form.setFieldsValue(res)
    request({ ...apis.customer.auto, urlData: { id: params.customerId }, params: { verifyStatus: params.verifyStatus } }).then(() => {
      // eslint-disable-next-line no-unused-expressions
      <Alert
        style={{
          marginBottom: 24,
        }}
        message="操作成功"
        type="success"
        showIcon
      />
      router.go(-1)
    }).catch(err => {
      // eslint-disable-next-line no-unused-expressions
      <Alert
        style={{
          marginBottom: 24,
        }}
        message={err}
        type="error"
        showIcon
      />
    })
  }

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

  // Change 事件
  function handleSelectChange(e) {
    // eslint-disable-next-line no-console
    console.log(e)
  }

  return (
    <>
      <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('picture')(
            <ImageUpload value={dataSource.picture} />,
          )}
        </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('visiteNum')(
            <Input placeholder="到访人数" />,
          )}
        </Form.Item>
        <Form.Item label="客户描述">
          {getFieldDecorator('describe')(
            <TextArea placeholder="客户描述" rows={10} />,
          )}
        </Form.Item>
        <Form.Item label="物业类型">
          {getFieldDecorator('realtyManageType')(
            <Input placeholder="物业类型" />,
          )}
        </Form.Item>
        <Form.Item label="需求类型">
          {getFieldDecorator('demandType')(
            <Input placeholder="需求类型" />,
          )}
        </Form.Item>
        <Form.Item label="价格区间">
          {getFieldDecorator('priceRange')(
            <Input placeholder="价格区间" />,
          )}
        </Form.Item>
        <Form.Item label="报备日期">
          {getFieldDecorator('reportDate')(
            <DatePicker showTime placeholder="报备日期" />,
          )}
        </Form.Item>
        <Form.Item label="状态">
          {getFieldDecorator('verifyStatus')(
            <Select style={{ width: '180px' }} placeholder="状态" onChange={handleSelectChange}>
              <Option value={0}>未通过</Option>
              <Option value={1}>已通过</Option>
              <Option value={2}>已驳回</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item label="归属置业顾问">
            <Row gutter={8}>
              <Col span={12}>
                {getFieldDecorator('consultantName')(<Input placeholder="归属置业顾问" />)}
              </Col>
              <Col span={12}>
                <Button>选择</Button>
              </Col>
            </Row>
        </Form.Item>
        <Form.Item style={{ display: 'flex', justifyContent: 'center' }}>
          <Button type="primary" htmlType="submit" className={Styles.SubmitButton}>
            确定
          </Button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Button onClick={() => router.go(-1)}>
            取消
          </Button>
        </Form.Item>
      </Form>
    </>
  );
}
const WrappedBody = Form.create({ name: 'body' })(body);

export default WrappedBody