import React, { Component } from 'react'
import { Col, Input, InputNumber, Row } from 'antd'
import { AntIcon } from 'components'

export default class index extends Component {
    render() {
        const { unit, placeholder, value, onChange } = this.props

        console.log(value)

        return (
            <Input.Group>
                <Row align="middle">
                    <Col flex="1">
                        <InputNumber
                            {...this.props}
                            className="w-100-p"
                            placeholder={placeholder && placeholder[0]}
                            value={value && value[0]}
                            onChange={e => {
                                const result = [e, value && value[1]]
                                onChange && onChange(result)
                            }}
                        />
                    </Col>
                    <span className="yo-addon">
                        <AntIcon className="text-gray" type="swap-right" />
                    </span>
                    <Col flex="1">
                        <InputNumber
                            {...this.props}
                            className="w-100-p"
                            placeholder={placeholder && placeholder[1]}
                            value={value && value[1]}
                            onChange={e => {
                                const result = [value && value[0], e]
                                onChange && onChange(result)
                            }}
                        />
                    </Col>
                    {unit && <span className="yo-addon">{unit}</span>}
                </Row>
            </Input.Group>
        )
    }
}
