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 questionnaire = `[{"question":"你的购房预算是多少？","key":"minPrice","type":"range","result":1000000,"resultId":null,"options":[100,500]},{"question":"你的购房预算是多少？","key":"maxPrice","type":"range","result":2910000,"resultId":null,"options":[100,500]},{"question":"你想购买的是新房还是二手房？","key":"isNew","type":"checkbox","result":"新房","resultId":1,"options":[{"name":"新房","id":1},{"name":"二手房","id":2},{"name":"不限","id":3}]},{"question":"你想住几居室的房子？","key":"layout","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}]},{"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}]},{"question":"你更注重项目的哪些优势？","key":"advantage","type":"checkbox","result":"学区","resultId":2,"options":[{"name":"发展规划","id":1},{"name":"学区","id":2},{"name":"交通","id":3},{"name":"配套","id":4},{"name":"环境","id":5}]},{"question":"你对小区物业管理和社区设施有什么要求？","key":"facility","type":"checkbox","result":"楼栋管家","resultId":1,"remark":"","options":[{"name":"楼栋管家","id":1},{"name":"金钥匙服务","id":2},{"name":"社区娱乐","id":3},{"name":"会所功能","id":4}]},{"question":"你想买多大面积？","key":"area","type":"checkbox","result":"110-130㎡","resultId":4,"options":[{"name":"60㎡以下","id":1},{"name":"60-90㎡","id":2},{"name":"90-110㎡","id":3},{"name":"110-130㎡","id":4},{"name":"130-150㎡","id":5},{"name":"150-200㎡","id":6},{"name":"200㎡以上","id":7}]},{"question":"你更喜欢的朝向？","key":"orientation","type":"checkbox","result":"朝南","resultId":2,"options":[{"name":"朝东","id":1},{"name":"朝南","id":2},{"name":"朝西","id":3},{"name":"朝北","id":4},{"name":"南北通透","id":5}]},{"question":"你想住高楼层还是低楼层？","key":"isHigh","type":"checkbox","result":"低楼层","resultId":1,"options":[{"name":"低楼层","id":1},{"name":"中楼层","id":2},{"name":"高楼层","id":3},{"name":"低层","id":4},{"name":"顶层","id":5}]},{"question":"你对楼龄的要求是？","key":"buildingAge","type":"checkbox","result":"5年以内","resultId":1,"options":[{"name":"5年以内","id":1},{"name":"10年以内","id":2},{"name":"15年以内","id":3},{"name":"20年以内","id":4},{"name":"20年以上","id":5}]},{"result":null,"key":"intentArea","question":"意向区域"},{"question":"创建人小程序人员","result":"b47e82b90071ba6142c07436c80be81f","key":"personId"}]`;
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 === 'intentArea') {
            return;
          }
          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;
          }
        });

        // 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')(
            <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')(
            <Select placeholder="社区要求" disabled={disabled}>
              <Option value={1}>楼栋管家</Option>
              <Option value={2}>金钥匙服务</Option>
              <Option value={3}>社区娱乐</Option>
              <Option value={4}>会所功能</Option>
            </Select>,
          )}
        </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;
