import React, { useEffect } from 'react'
import { Form, Select, Button, Modal, Radio } from 'antd'

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,
    },
  },
}

const blockRadio = {
  display: 'block',
  height: '30px',
  lineHeight: '30px',
}

export default Form.create()(props => {

  const handleSubmit = e => {
    e.preventDefault()
    props.form.validateFields((err, values) => {
      if (!err) {
        props.onSubmit({
          status: props.userData.status,
          ...values,
        })
      }
    })
  }

  return (
    <Modal footer={null} maskClosable={false} onCancel={props.onCancel} visible={props.visible}>
      <Form {...formItemLayout} onSubmit={handleSubmit}>
        <Form.Item label="身份">
          {
            props.form.getFieldDecorator('roleId')(
              <Select>
                <Select.Option key="1" value="1">户主</Select.Option>
                <Select.Option key="2" value="2">租客</Select.Option>
                <Select.Option key="3" value="3">家属</Select.Option>
              </Select>
            )
          }
        </Form.Item>
        {          
          props.userData.verifyStatus !== '1' && (
            <Form.Item label="审核状态">
              {
                props.form.getFieldDecorator('status')(
                  <Select>
                    <Select.Option key="1" value="1">审核通过</Select.Option>
                    <Select.Option key="2" value="2">审核未通过</Select.Option>
                    <Select.Option key="0" value="0">未审核</Select.Option>
                  </Select>
                )
              }
            </Form.Item>
          )
        }
        <Form.Item label="不通过原因">
          {
            props.form.getFieldDecorator('remark')(
              <Radio.Group>
                <Radio value="不认识的人的手机号" style={blockRadio}>不认识的人的手机号</Radio>
                <Radio value="其他原因需要沟通" style={blockRadio}>其他原因需要沟通</Radio>
              </Radio.Group>
            )
          }
        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">确定</Button>
          <Button onClick={props.onCancel} style={{ marginLeft: '48px' }}>取消</Button>
        </Form.Item>
      </Form>
    </Modal>
  )
})
