import React, { PureComponent } from 'react';
import { Modal, Form, Select, InputNumber } from 'antd';
import { chargeUnit } from '../../../utils/config';

const Option = Select.Option;

@Form.create()
export default class NewPriceModal extends PureComponent {

  handleModalOnOk = () => {
    const {
      form: {
        validateFields,
        getFieldsValue,
      },
      data,
      onSubmit,
    } = this.props;
    validateFields((errors) => {
      if (errors) return;
      const formData = getFieldsValue();
      const newData = { ...formData };
      newData.duration = chargeUnit[formData.chargeUnit];
      data.id ? newData.id = data.id : null;
      onSubmit(newData);
    });
  }

  handleTest = (value) => {
    console.log(value);
  }

  render() {
    const { form, data, onSubmit, ...modalProps } = this.props;
    const { getFieldDecorator } = form;

    const formItemLayout = {
      labelCol: { span: 9 },
      wrapperCol: { span: 10 },
    };

    return (
      <Modal { ...modalProps } onOk={this.handleModalOnOk} >
        <Form layout="horizontal" >
          <Form.Item label="计价单位" { ...formItemLayout }>
            {getFieldDecorator('chargeUnit', {
              rules: [{ required: true, type: 'string', message: '请选择一种计价单位!' }],
              initialValue: data.chargeUnit,
            })(
              <Select placeholder="请选择" style={{ width: '80%' }}>
                {Object.keys(chargeUnit).map(key => <Option value={key} key={key}>{key}</Option>)}
              </Select>
            )}
          </Form.Item>
          <Form.Item label="供应商价格" { ...formItemLayout }>
            {getFieldDecorator('cpPrice', {
              initialValue: data.cpPrice,
            })(
              <InputNumber
                min={0}
                style={{ width: '80%' }}
                placeholder="请填写"
                onChange={this.handleTest}
                formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                parser={value => value.replace(/\¥\s?|(,*)/g, '')}
              />
            )}
          </Form.Item>
          <Form.Item label="渠道方价格" { ...formItemLayout }>
            {getFieldDecorator('merchantPrice', {
              initialValue: data.merchantPrice,
            })(
              <InputNumber
                min={0}
                style={{ width: '80%' }}
                placeholder="请填写"
                formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                parser={value => value.replace(/\¥\s?|(,*)/g, '')}
              />
            )}
          </Form.Item>
          <Form.Item label="终端价格" { ...formItemLayout }>
            {getFieldDecorator('terminalPrice', {
              initialValue: data.terminalPrice,
            })(
              <InputNumber
                min={0}
                style={{ width: '80%' }}
                placeholder="请填写"
                formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                parser={value => value.replace(/\¥\s?|(,*)/g, '')}
              />
            )}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}