import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Card, Radio, notification, Select,Checkbox } 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 = {};
        console.log(JSON.parse(res?.questionnaire))
        JSON.parse(res?.questionnaire)?.map(x => {
          if (x.key === 'intentArea') {
            return;
          }
          if (x.key === 'maxPrice') {
            b[x.key] = x.result / 10000;
            return;
          }
          if (x.type === 'checkbox') {
            b[x.key] = x.resultId;
          } 
          if (x.type === 'checkboxs') {
            b[x.key] = x.options.filter(r=>r.selected).map(t=>t.id);
          }
          else {
            b[x.key] = x.result;
          }
        });

        // console.log(b, 'questionnaire');
        props.form.setFieldsValue({
          ...res,
          reportDate: moment(res.reportDate),
          ...b,
          intentArea: res.intentArea,
        });
        //包裹的没渲染完就执行set 导致在呈现字段之前无法设置表单字段
      }
    });
  }

  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('name')(<Input placeholder="意向区域" disabled={disabled} />)}
        </Form.Item>
        <Form.Item label="客户姓名">
          {getFieldDecorator('nickname')(<Input placeholder="客户姓名" disabled />)}
        </Form.Item>
        <Form.Item label="客户电话">
          {getFieldDecorator('phone')(<Input placeholder="客户电话" 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>
              <Option value={6}>四室一厅</Option>
              <Option value={7}>四室二厅</Option>
              <Option value={8}>四室二五室及以上厅</Option>
            </Select>,
          )}
        </Form.Item>

        <Form.Item label="购房目的">
          {getFieldDecorator('purpose')(
            <Select placeholder="购房目的" disabled={disabled}>
              <Option value={1}>刚需</Option>
              <Option value={2}>结婚</Option>
              <Option value={3}>养老</Option>
              <Option value={4}>改善</Option>
              <Option value={5}>教育</Option>
              <Option value={6}>投资</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item label="侧重优势">
          {getFieldDecorator('advantage')(
            <Checkbox.Group disabled={disabled}>
            <Checkbox value={1}>发展规划</Checkbox>
            <Checkbox value={2}>学区</Checkbox>
            <Checkbox value={3}>交通</Checkbox>
            <Checkbox value={4}>配套</Checkbox>
            <Checkbox value={5}>环境</Checkbox>
          </Checkbox.Group>,
            // <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('facility')(
            <Checkbox.Group placeholder="社区要求" disabled={disabled}>
              <Checkbox value={1}>楼栋管家</Checkbox>
              <Checkbox value={2}>金钥匙服务</Checkbox>
              <Checkbox value={3}>社区娱乐</Checkbox>
              <Checkbox value={4}>会所功能</Checkbox>
            </Checkbox.Group>,
          )}
        </Form.Item>

        <Form.Item label="面积要求">
          {getFieldDecorator('area')(
            <Select placeholder="面积要求" disabled={disabled}>
              <Option value={1}>60m²</Option>
              <Option value={2}>60~90m²</Option>
              <Option value={3}>110~130m²</Option>
              <Option value={4}>130~150m²</Option>
              <Option value={5}>150~200m²</Option>
              <Option value={6}>200m²以上</Option>
            </Select>,
          )}
        </Form.Item>

        <Form.Item label="朝向要求">
          {getFieldDecorator('orientation')(
            <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('isHigh')(
            <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('buildingAge')(
            <Select placeholder="楼龄要求" disabled={disabled}>
              <Option value={1}>5年以内</Option>
              <Option value={2}>10年以内</Option>
              <Option value={3}>15年以内</Option>
              <Option value={4}>20年以内</Option>
              <Option value={5}>20年以上</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.seach.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;
