import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message, Upload, InputNumber } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import moment from 'moment';
import router from 'umi/router';
import request from '../../../../../utils/request';
import apis from '../../../../../services/apis';
import XForm, { FieldTypes } from '../../../../../components/XForm';
import ApartmentSelect from '../../../../../components/HouseSelect/ApartmentSelect';

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

function HouseAdd(props) {
  console.log(props,"props222")
  const houseId = props.houseId
    
  useEffect(() => {
    if (houseId && houseId !== '') {
      getById(houseId)
    }
  }, [houseId])

  function getById(houseId) {
    request({ ...apis.house.getById, urlData: { id: houseId } }).then(data => {
      props.form.setFieldsValue(data)
    }).catch((err) => {
      message.info(err.msg || err.message)
    })
  }

  //校验房源
  function checkValues() {
    request({ ...apis.house.checked, data: { ...props.form.getFieldsValue(), buildingId: props.buildingId } }).then(data => {
      message.warn(data)
    }).catch((err) => {
      message.info(err.msg || err.message)
    })
  }

  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
          if(houseId){
            request({ ...apis.house.houseEdit,urlData: {id: houseId}, data: { ...values,buildingId: props.buildingId, salesBatchId: props.salesBatchId } }).then((data) => {
              message.info('修改成功')
              props.onSuccess({type: "house"})
            }).catch((err) => {
              // message.info(err.msg || err.message)
            })
          }else{
            request({ ...apis.house.houseAdd, data: { ...values,buildingId: props.buildingId, salesBatchId: props.salesBatchId } }).then((data) => {
              message.info('保存成功')
              props.onSuccess({type: "house"})
            }).catch((err) => {
              // message.info(err.msg || err.message)
            })
          }
      }
    });
  }

  function cancelPage(e) {
    props.onSuccess({type: "house"})
  }

  const limitDecimals = (value) => {
    const reg = /^(\-)*(\d+)\.(\d\d).*$/;
    console.log(value);
    if(typeof value === 'string') {
        return !isNaN(Number(value)) ? value.replace(reg, '$1$2.$3') : ''
    } else if (typeof value === 'number') {
        return !isNaN(value) ? String(value).replace(reg, '$1$2.$3') : ''
    } else {
        return ''
    }
};


  const { getFieldDecorator } = props.form;
  return (
    <>
      <Form {...formItemLayout} onSubmit={handleSubmit}>
      <Form.Item label="期/区" >
        {getFieldDecorator('termName', {
          rules: [
            {
              required: true,
              message: '请输入期/区,且最多六个字',
              max: 6,
            },
          ],
        })(<Input disabled={houseId && houseId !== '' ? true : false} placeholder="填写期/区"/>)}
        </Form.Item>
        <Form.Item label="楼栋">
        {getFieldDecorator('blockName', {
          rules: [
            {
              required: true,
              message: '请输入楼栋,且最多六个字',
              max: 6,
            },
          ],
        })(<Input disabled={houseId && houseId !== '' ? true : false} placeholder="填写楼栋"/>)}
        </Form.Item>
        <Form.Item label="单元">
        {getFieldDecorator('unitName', {
          rules: [
            {
              required: true,
              message: '请输入单元,且最多六个字',
              max: 6,
            },
          ],
        })(<Input disabled={houseId && houseId !== '' ? true : false} placeholder="填写单元"/>)}
        </Form.Item>
        <Form.Item label="层">
        {getFieldDecorator('floorName', {
          rules: [
            {
              required: true,
              message: '请输入楼层',
              max: 6,
            },
          ],
        })(<Input disabled={houseId && houseId !== '' ? true : false} placeholder="填写楼层"/>)}
        </Form.Item>
        <Form.Item label="房号">
        {getFieldDecorator('roomName', {
          rules: [
            {
              required: true,
              message: '请输入房号,且最多六个字',
              max: 6,
            },
          ],
        })(<Input placeholder="填写房号，如101户"/> )}
         <Button type="primary" onClick={() => checkValues()}>
            校验房源
          </Button>
        </Form.Item>
        <Form.Item label="价格" >
        {getFieldDecorator('price', {
          rules: [
            {
              required: true,
              message: '请输入价格，只能是数字和小数点且最多8位',
              pattern: new RegExp('^[0-9]{1,5}([.][0-9]{1,2})?$'),
            },
          ],
        })(<Input placeholder="填写房源总价"/>)}万元
        </Form.Item>
        {/* <Form.Item label="预选基础热度">
        {getFieldDecorator('heat', {
          rules: [
            {
              required: true,
              message: '请输入预选基础热度，只能是数字',
              pattern: new RegExp('^[0-9]*$'),
            },
          ],
        })(<Input placeholder="填写基础预选热度，建议为0"/>)}
        </Form.Item> */}
        <Form.Item label="户型" help="户型不存在时，请到楼盘详情中查看是否存在户型，不存在时请新增户型。">
        {getFieldDecorator('apartmentId')(<ApartmentSelect buildingId={props.buildingId} />)}
        </Form.Item>
        <Form.Item label="发布状态">
        {getFieldDecorator('status', {
          rules: [
            {
              required: true,
              message: '请输入楼栋',
            },
          ],
        })(
          <Select placeholder="发布状态">
            <Option value={0}>否</Option>
            <Option value={1}>是</Option>
          </Select>,
        )}
        </Form.Item>
        <Form.Item wrapperCol={{ span: 12, offset: 8 }}>
          <Button type="primary" htmlType="submit">
            确认
          </Button>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <Button onClick={() => cancelPage({type: "house"})}>
            取消
          </Button>
        </Form.Item>
      </Form>
    </>
  )
}
const WrappedHouseAdd = Form.create({ name: 'house_add' })(HouseAdd);
export default WrappedHouseAdd
