import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Card, Radio, notification, Select } 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';
import AuthButton from '@/components/AuthButton';

const { TextArea } = Input;
const { Option } = Select;

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, type } = props.location.query;
  const disabled = true;

  useEffect(() => {
    if (id !== '') {
      getById(id);
    }
  }, [id]);
  // 获取详情信息
  function getById(currentId) {
    request({ ...apis.searchHouse.IdHouse, urlData: { id: currentId } }).then(res => {
      // res.reportDate = moment(res.reportDate)
      if (res) {
        const b = {};
        JSON.parse(res?.questionnaire)?.map(x => {
          if (x.key === 'maxPrice') {
            b[x.key] = x.result / 10000;
            return;
          }
          if (x.type === 'checkbox') {
            b[x.key] = x.resultId;
          } else {
            b[x.key] = x.result;
          }
        });

        props.form.setFieldsValue({
          ...res,
          reportDate: moment(res.reportDate),
          ...b,
        });
      }
    });
  }

  function submitDate(params) {
    // props.form.setFieldsValue(res)
    console.log(params, 'params');
    request({
      ...apis.searchHouse.reply,
      urlData: { id },
      data: {
        auditRemark: props.form.getFieldValue('auditRemark'),
        status: params.status,
      },
    })
      .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({ status: '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('intentArea')(<Input placeholder="意向区域：" disabled={disabled} />)}
        </Form.Item>
        <Form.Item label="客户姓名">
          {getFieldDecorator('nickname')(<Input placeholder="客户姓名" disabled={disabled} />)}
        </Form.Item>
        <Form.Item label="客户电话">
          {getFieldDecorator('phone')(<Input placeholder="客户电话" disabled={disabled} />)}
        </Form.Item>
        <Form.Item label="客户性别">
          {getFieldDecorator('gender')(
            <Radio.Group disabled>
              <Radio value="1">男</Radio>
              <Radio value="2">女</Radio>
            </Radio.Group>,
          )}
        </Form.Item>
        <Form.Item label="客户预算">
          {getFieldDecorator('maxPrice')(
            <Input placeholder="客户预算" disabled={disabled} suffix="W" />,
          )}
        </Form.Item>
        <Form.Item label="房屋类型">
          {getFieldDecorator('isNew')(
            <Select placeholder="房屋类型" disabled={disabled}>
              <Option value={1}>新房</Option>
              <Option value={2}>二手房</Option>
              <Option value={3}>不限</Option>
            </Select>,
          )}
        </Form.Item>

        <Form.Item label="购房目的">
          {getFieldDecorator('layout')(
            <Select placeholder="购房目的" disabled={disabled}>
              <Option value={1}>投资</Option>
              <Option value={2}>移民</Option>
              <Option value={3}>养老</Option>
              <Option value={4}>留学</Option>
              <Option value={5}>度假</Option>
            </Select>,
          )}
        </Form.Item>

        <Form.Item label="客户备注">
          {getFieldDecorator('remark')(
            <TextArea placeholder="客户描述" disabled={disabled} rows={7} />,
          )}
        </Form.Item>
        <Form.Item label="回访备注">
          {getFieldDecorator('auditRemark', {
            rules: [{ required: true, message: '请输入回访备注！' }], //v3x必填
          })(<TextArea placeholder="回访备注" disabled={type === 'detail'} rows={7} />)}
        </Form.Item>
        <Form.Item style={{ display: 'flex', justifyContent: 'center' }}>
          <AuthButton name="house.abroad.reply.submit" noRight={null}>
            {type !== 'detail' && (
              <>
                <Button type="primary" htmlType="submit">
                  有效
                </Button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <Button onClick={() => submitDate({ status: '2' })}>无效</Button>
              </>
            )}
          </AuthButton>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Button
            onClick={() => {
              router.go('-1');
            }}
          >
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}
const HouseCopm = Form.create({ name: 'body' })(body);

export default HouseCopm;
