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 = {};
        JSON.parse(res?.questionnaire)?.map(x => {
          // if (x.key === 'important' ||x.key === 'special' ||x.key === 'style'||x.key === 'mostImportant') {
          //   b[x.key] = [x.resultId];
          //   return;
          // }
          if (x.key === 'maxPrice') {
            b[x.key] = x.result / 10000;
            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,
        });
      }
    });
  }

  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="客户姓名">
          {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('houseStatus')(
            <Select placeholder="房屋现状" disabled={disabled}>
              <Option value={1}>毛坯</Option>
              <Option value={2}>旧房装修5年以内</Option>
              <Option value={3}>旧房装修5-10年</Option>
              <Option value={4}>旧房装修10年以上</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item label="房屋面积">
          {getFieldDecorator('area')(
            <Select placeholder="房屋面积" disabled={disabled}>
              <Option value={1}>50m²</Option>
              <Option value={2}>50~70m²</Option>
              <Option value={3}>70~90m²</Option>
              <Option value={4}>90~110m²</Option>
              <Option value={5}>110~130m²</Option>
              <Option value={6}>130~150m²</Option>
              <Option value={7}>150~200m²</Option>
              <Option value={8}>200m²以上</Option>
            </Select>,
          )}
        </Form.Item>

        <Form.Item label="家装模式">
          {getFieldDecorator('type')(
            <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('important')(
            <Checkbox.Group disabled={disabled}>
              <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('style')(
            <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 value="混搭风格">混搭风格</Checkbox>
            </Checkbox.Group>,
          )}
        </Form.Item>

        <Form.Item label="关键诉求">
          {getFieldDecorator('mostImportant')(
            <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.Group>,
          )}
        </Form.Item>

        <Form.Item label="特殊功能区">
          {getFieldDecorator('special')(
            <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('samrt')(
            <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={4}>暂时不了解智能家居</Option>
              <Option value={5}>其他</Option>
            </Select>,
          )}
        </Form.Item>
        {/* <Form.Item label="家装侧重点">
          {getFieldDecorator('important')(
            <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 value={6}>集中供暖</Checkbox>
              <Checkbox value={7}>押一付一</Checkbox>
              <Checkbox value={8}>双卫</Checkbox>
              <Checkbox value={9}>新上</Checkbox>
              <Checkbox value={10}>认证公寓</Checkbox>
            </Checkbox.Group>,
          )}
        </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.added.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;
