import React, { useEffect, useState } from 'react'
import { Button, Drawer, Form, Radio, Input, Select } from 'antd'
import { formItemLayout } from '../utils'
import styles from '../style.less'

const Item = Form.Item

const priceUnit = {
  average: '元/㎡',
  total: '万元/套',
  // lease: '元/㎡/天',
}

const noBorderInput = {
  width: '30px',
  borderLeft: 0,
  pointerEvents: 'none',
  backgroundColor: '#fff',
}

const BuildingTypeDetail = (props) => {
  const { title, dataset, form, visible, onClose, onSubmit } = props
  const { getFieldDecorator, validateFieldsAndScroll,getFieldValue } = form
  const [priceType, setPriceType] = useState()

  const handleSubmit = () => {
    validateFieldsAndScroll((err, values) => {
      if (err) {
        console.error(err);
        return;
      };

      const data = {
        status: 1,
        ...dataset || {},
        ...values,
      }

      // 转为数字
      data.rightsYear -= 0

      onSubmit(data)
    })
  }

  useEffect(() => {
    form.resetFields()
    if (dataset) {
      if (!dataset.rightsYear) {
        dataset.rightsYear = 70
      }
      form.setFieldsValue(dataset)
    }
  }, [dataset])

  return (
    <Drawer
      width={600}
      title={title} 
      visible={visible}
      onClose={onClose}
      bodyStyle={{ paddingBottom: 80 }}
      >
      <Form>
        <Item label="价格类型" {...formItemLayout}>
          {getFieldDecorator('priceType')(
            <Radio.Group onChange={({target}) => setPriceType(target.value)}>
              <Radio value="average">均价</Radio>
              <Radio value="total">总价</Radio>
              {/* <Radio value="lease">租赁价</Radio> */}
            </Radio.Group>
          )}
        </Item>
        <Item label="价格区间" help='最高价与最低价一致时，只展示一个' {...formItemLayout}>
          <Input.Group compact>
            {getFieldDecorator('startPrice')(<Input placeholder="最低价" style={{width: 'calc(50% - 50px)'}} />)}
            {<Input style={{...noBorderInput, borderRight: 0}} placeholder="~" disabled />}
            {getFieldDecorator('endPrice')(
              <Input placeholder="最高价" style={{width: 'calc(50% - 60px)', borderLeft: 0, borderRight: 0}} />
              )}
            {<Input style={{...noBorderInput, width: '80px', textAlign: 'right'}} placeholder={priceUnit[getFieldValue('priceType')]} disabled  />}
          </Input.Group>
        </Item>
        <Item label="销售状态" {...formItemLayout}>
          {getFieldDecorator('marketStatus')(
            <Select placeholder="销售状态">
              <Select.Option value="未开盘">未开盘</Select.Option>
              <Select.Option value="在售">在售</Select.Option>
              <Select.Option value="售罄">售罄</Select.Option>
              {/* <Select.Option value="在租">在租</Select.Option> */}
            </Select>,
          )}
        </Item>
        <Item label="装修标准" {...formItemLayout}>
          {getFieldDecorator('decoration')(<Input />)}
        </Item>
        <Item label="产权年限" {...formItemLayout}>
          {getFieldDecorator('rightsYear')(<Input />)}
        </Item>
      </Form>
      <div className={styles['drawer-form-action']}>
        <Button type="primary" onClick={handleSubmit}>确定</Button>
      </div>
    </Drawer>
  )
}

export default Form.create()(BuildingTypeDetail)
