import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Upload, message, notification } 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';

import Attribution from './components/attribution'

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 },
  },
};

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 !== '') {
    // 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)
    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 })
      }
    });
  }

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

  // 显示选择置业顾问的窗口
  function showConsultant() {
    setVisibleData({ visible: true, customerId: props.form.getFieldValue('customerId'), realtyConsultant: props.form.getFieldValue('realtyConsultant'), buildingId: props.form.getFieldValue('buildingId') })
  }

  // 关闭选择置业顾问的窗口
  function closeConsultant() {
    setVisibleData({ visible: false, customerId: '', realtyConsultant: '', buildingId: '' })
  }

  // 选择置业顾问弹窗
  function consultantSuccess(e) {
    console.log(e)
    props.form.setFieldsValue({ realtyConsultant: e.realtyConsultant, consultantName: e.name })
  }

  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="项目ID" style={{ display: 'none' }}>
          {getFieldDecorator('buildingId')(
            <Input
              placeholder="项目ID"
            />,
          )}
        </Form.Item>
        <Form.Item label="归属人" style={{ display: 'none' }}>
          {getFieldDecorator('realtyConsultant')(
            <Input
              placeholder="归属人"
            />,
          )}
        </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>,
          )}onClick={() => submitDate({ verifyStatus: '1' })}
        </Form.Item> */}
        <Form.Item label="归属置业顾问"
      >
          <Row gutter={8}>
            <Col span={12}>
              {getFieldDecorator('consultantName', {
                rules: [
                  {
                    required: true,
                    message: '请选择置业顾问',
                  },
                ],
              })(<Input placeholder="请选择置业顾问" />)}
            </Col>
            <Col span={12}>
              <Button onClick={() => showConsultant()}>选择</Button>
            </Col>
          </Row>
        </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>

      {/* 选择置业顾问 */}
      <Attribution visibleData={visibleData} onCancel={() => closeConsultant()} onSuccess={e => consultantSuccess(e)} />
    </>
  );
}
const WrappedBody = Form.create({ name: 'body' })(body);

export default WrappedBody