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: '',
  });
};
const questionnaire = `[{"question":"你的租房预算是多少/月？","key":"minPrice","type":"range","result":500,"resultId":null,"options":[500,4500]},{"question":"你的租房预算是多少/月？","key":"maxPrice","type":"range","result":3016,"resultId":null,"options":[500,4500]},{"question":"你的租房偏好？","key":"preference","type":"checkbox","result":"整租","resultId":1,"options":[{"name":"整租","id":1},{"name":"合租","id":2},{"name":"不限","id":3}]},{"question":"你想租几居室的房子？","key":"layout","type":"checkbox","result":"二室","resultId":2,"options":[{"name":"一室","id":1},{"name":"二室","id":2},{"name":"三室","id":3},{"name":"四室","id":4},{"name":"五室及以上","id":5}]},{"question":"其他要求？","key":"purpose","type":"checkbox","result":"独立阳台","resultId":5,"options":[{"name":"独卫","id":1},{"name":"近地铁","id":2},{"name":"拎包入住","id":3},{"name":"精装修","id":4},{"name":"独立阳台","id":5},{"name":"集中供暖","id":6},{"name":"押一付一","id":7},{"name":"双卫","id":8},{"name":"新上","id":9},{"name":"认证公寓","id":10}]},{"question":"您还有哪些特殊要求？","key":"remark","type":"textarea","result":"12","resultId":null},{"result":null,"key":"intentArea","question":"意向区域"},{"question":"创建人小程序人员","result":"b47e82b90071ba6142c07436c80be81f","key":"personId"}]`;
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') {
            // b[x.key] = [x.resultId];
            return;
          }
          // if (x.key === 'purpose') {
          //   b[x.key] = [x.resultId];
         
          //   return;
          // }
          if (x.key === 'maxPrice') {
            b[x.key] = x.result;
            return;
          }
          if (x.type === 'checkbox') {
            b[x.key] = x.result;
          } else {
            b[x.key] = x.result;
          }
        });

        // console.log(b, 'questionnaire');
        props.form.setFieldsValue({
          ...res,
          reportDate: moment(res.reportDate),
          ...b,
          intentArea: res.intentArea,
        });
        // props.form.setFieldsValue({ ...res, reportDate: moment(res.reportDate) });
        //包裹的没渲染完就执行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="元/月" />,
          )}
        </Form.Item>
        <Form.Item label="租房偏好">
          {getFieldDecorator('preference')(
            <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>
            </Select>,
          )}
        </Form.Item>

        <Form.Item label="其他要求">
          {getFieldDecorator('purpose')(
            <Checkbox.Group disabled={disabled}>
              <Checkbox value='独卫'>独卫</Checkbox>
              <Checkbox value='近地铁'>近地铁</Checkbox>
              <Checkbox value='拎包入住'>拎包入住</Checkbox>
              <Checkbox value='精装修'>精装修</Checkbox>
              <Checkbox value='独立阳台'>独立阳台</Checkbox>
              <Checkbox value='集中供暖'>集中供暖</Checkbox>
              <Checkbox value='押一付一'>押一付一</Checkbox>
              <Checkbox value='双卫'>双卫</Checkbox>
              <Checkbox value='新上'>新上</Checkbox>
              <Checkbox value='认证公寓'>认证公寓</Checkbox>
            </Checkbox.Group>,
          )}
        </Form.Item>

        <Form.Item label="客户备注">
          {getFieldDecorator('remark')(
            <TextArea placeholder="客户描述" disabled={disabled} rows={7} />,
          )}
        </Form.Item>
        <Form.Item label="回访备注">
          {getFieldDecorator('auditRemark', {
            rules: [{ required: true, message: '请输入回访备注！' }], 
          })(<TextArea placeholder="回访备注" disabled={type === 'detail'} rows={7} />)}
        </Form.Item>
        <Form.Item style={{ display: 'flex', justifyContent: 'center' }}>
        <AuthButton name="house.rent.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;