import React, { useEffect, useState } from 'react'
import { Form, Button, Input, Select } from 'antd'
import useRoomSelect from '../../../utils/hooks/useRoomSelect'

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
  },
}

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 6,
    },
  },
}

export default Form.create()(props => {
  const {
    phaseId,
    setPhaseId,
    buildingId,
    setBuildingId,
    unitId,
    setUnitId,
    levelId,
    setLevelId,
    roomNoId,
    setRoomNoId,
    phaseList,
    buildingList,
    unitList,
    levelList,
    roomNoList
  } = useRoomSelect()
  const [formData, setFormData] = useState({})

  const [phaseErr, setPhaseErr] = useState('')
  const [buildingErr, setBuildingErr] = useState('')
  const [unitErr, setUnitErr] = useState('')
  const [levelErr, setLevelErr] = useState('')
  const [roomNoErr, setRoomNoErr] = useState('')

  const resetForm = () => {
    setPhaseId()
    setBuildingId()
    setUnitId()
    setLevelId()
    setRoomNoId()
    setFormData({})
  }

  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err && !phaseId && !buildingId && !unitId && !levelId && !roomNoId) {
        props.onSubmit({
          phaseId,
          buildingId,
          unitId,
          levelId,
          roomNoId,
          ...values,
        }, () => resetForm())
      }
    });
  }

  const handleReset = e => {
    resetForm()
    if (props.onReset) {
      props.onReset({
        phaseId,
        buildingId,
        unitId,
        levelId,
        roomNoId,
        ...formData,
      })
    }
  }
  
  const handlePhaseChange = e => setPhaseId(e)
  const handleBuildingChange = e => setBuildingId(e)
  const handleUnitChange = e => setUnitId(e)
  const handleLevelChange = e => setLevelId(e)
  const handleRoomChange = e => setRoomNoId(e)

  useEffect(() => {
    props.form.setFieldsValue(formData)
  }, [formData])

  useEffect(() => {
    setPhaseErr(!phaseId ? '请选择期数': undefined)
  }, [phaseId])

  useEffect(() => {
    setBuildingErr(!buildingId ? '请选择楼栋': undefined)
  }, [buildingId])

  useEffect(() => {
    setUnitErr(!unitId ? '请选择单元': undefined)
  }, [unitId])

  useEffect(() => {
    setLevelErr(!levelId ? '请选择层数': undefined)
  }, [levelId])

  useEffect(() => {
    setRoomNoErr(!roomNoId ? '请选择户号': undefined)
  }, [roomNoId])

  return (
    <Form {...formItemLayout} onSubmit={handleSubmit}>
      <Form.Item label="请选择期数" required validateStatus={phaseErr ? 'error' : undefined} help={phaseErr}>
        <Select value={phaseId} onChange={handlePhaseChange} style={{ minWidth: '120px' }} placeholder="期/区">
          {
            phaseList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
          }
        </Select>
      </Form.Item>
      <Form.Item label="请选择楼栋" required validateStatus={buildingErr ? 'error' : undefined} help={buildingErr}>
        <Select value={buildingId} onChange={handleBuildingChange} style={{ minWidth: '120px' }} placeholder="栋">
          {
            buildingList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
          }
        </Select>
      </Form.Item>
      <Form.Item label="请选择单元" required validateStatus={unitErr ? 'error' : undefined} help={unitErr}>
        <Select value={unitId} onChange={handleUnitChange} style={{ minWidth: '120px' }} placeholder="单元">
          {
            unitList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
          }
        </Select>
      </Form.Item>
      <Form.Item label="请选择楼层" required validateStatus={levelErr ? 'error' : undefined} help={levelErr}>
        <Select value={levelId} onChange={handleLevelChange} style={{ minWidth: '120px' }} placeholder="楼层">
          {
            levelList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
          }
        </Select>
      </Form.Item>
      <Form.Item label="请选择户号" required validateStatus={roomNoErr ? 'error' : undefined} help={roomNoErr}>
        <Select value={roomNoId} onChange={handleRoomChange} style={{ minWidth: '120px' }} placeholder="户号">
          {
            roomNoList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
          }
        </Select>
      </Form.Item>
      <Form.Item label="收费单说明">
      {
        props.form.getFieldDecorator('billInvoiceExplain', {
          rules: [
            {required: true, message: '请填写收费单说明'}
          ]
        })(<Input placeholder="收费单说明" />)
      }
      </Form.Item>
      <Form.Item label="收费金额(元)">
      {
        props.form.getFieldDecorator('payPrice', {
          rules: [
            {required: true, message: '请填写收费金额'}
          ]
        })(<Input placeholder="收费金额(元)" />)
      }
      </Form.Item>
      <Form.Item {...tailFormItemLayout} >
        <Button type="primary" htmlType="submit">添加到列表</Button>
        <Button style={{ marginLeft: '24px' }} onClick={props.onCancel}>取消</Button>
      </Form.Item>
    </Form>
  )
})
