import React,{useEffect} from 'react'
import { Button, Form, Input, DatePicker,notification } from 'antd'
import moment from 'moment'
import request from '@/utils/request';
import apis from '@/services/apis';
import AuthButton from '@/components/AuthButton'
import ModalForm from '../components/ModalForm'
import InputNumber from '../components/InputNumber'
import { validMinNum } from '../utils'

const fullWidth = { width: '100%' }

const AMForm = (props) => {
  const { visibleData, onCancel, form, panoramaList, onSuccess } = props;
  const { visible, data } = visibleData;
  const { getFieldDecorator, setFieldsValue, resetFields, validateFields } = form;

  useEffect(() => {
    if (data) {
      // data.trendTime=moment(data.trendTime)
      data.time=[moment(data.startTime),moment(data.endTime)]
      setFieldsValue(data);
    }
  }, [data]);

  function submitData(e) {
    e.preventDefault();
    validateFields((err, values) => {
      if (err) {
        console.error(err);
        return;
      }
      values.buildingId = props.buildingId;
      values.startTime = values.time[0]
      values.endTime = values.time[1]
      // 网路请求
      if (data?.specialRoomId) {
        request({ ...apis.building.putbuildingSpecialRoom, urlData: {id:data?.specialRoomId}, data: { ...values } })
          .then(() => {
            notification.success({ message: '操作成功' });
            onSuccess();
          })
          .catch(err => {
            notification.error({ message: 'err' });
            props.onCancel();
          });
      } else {
        request({ ...apis.building.addbuildingSpecialRoom, data: { ...values } })
          .then(() => {
            notification.success({ message: '操作成功' });
            onSuccess();
          })
          .catch(err => {
            notification.error({ message: 'err' });
            props.onCancel();
          });
      }
    });
  }

  return (
    <ModalForm
      title="特价房设置"
      visible={visible}
      onCancel={onCancel}
      modalProps={{ destroyOnClose: true }}
      onSubmit={submitData}
    >
      <Form.Item label="房源">
        {getFieldDecorator('roomName', {
          rules: [
            { required: true, message: '请填写房源' },
            { max: 30, message: '房源不超过30个字符' },
          ],
        })(<Input placeholder="比如 3# 15-02"/>)}
      </Form.Item>
      <Form.Item label="户型">
        {getFieldDecorator('unitType', {
          rules: [
            { required: true, message: '请填写房源' },
            { max: 30, message: '房源不超过30个字符' },
          ],
        })(<Input placeholder="比如 三室一厅"/>)}
      </Form.Item>
      <Form.Item label="面积">
        {getFieldDecorator('area', {
          rules: [
            { required: true, message: '请填写面积' },
            { validator: validMinNum },
          ],
        })(<InputNumber min={0} precision={0.01} step={1} placeholder="请填写建筑面积" addonAfter="㎡"/>)}
      </Form.Item>
      <Form.Item label="时间">
      {getFieldDecorator('time', {
          rules: [{ required: true, message: '请选择时间' }],
      })(
        <DatePicker.RangePicker
          showTime={{ format: 'HH:mm' }}
          format="YYYY-MM-DD HH:mm"
          placeholder={['开始时间', '结束时间']}
          style={fullWidth} />,
      )}
      </Form.Item>
      <Form.Item label="原始价">
        {getFieldDecorator('originalPrice', {
          rules: [
            { required: true, message: '请填写原始价' },
          ],
        })(<InputNumber min={0} precision={0.01} step={1} placeholder="请填写原始总价" addonAfter="元"/>)}
      </Form.Item>
      <Form.Item label="现价">
        {getFieldDecorator('currentPrice', {
          rules: [
            { required: true, message: '请填写现价' },
          ],
        })(<InputNumber min={0} precision={0.01} step={1} placeholder="请填写现总价"  addonAfter="元"/>)}
      </Form.Item>
      <Form.Item label="节省价">
        {getFieldDecorator('thriftPrice', {
          rules: [
            { required: true, message: '请填写节省价' },
          ],
        })(<InputNumber min={0} precision={0.01} step={1} placeholder="请填写节省总价" addonAfter="元"/>)}
      </Form.Item>
      <Form.Item label=" " colon={false} style={{marginTop: '2em'}}>
        <AuthButton name="building.special.edit">
          <Button style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
        </AuthButton>
        <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button>
      </Form.Item>
    </ModalForm>
  )
}

export default Form.create({})(AMForm)
