import React,{Component} from 'react'
import {Input as Input1} from 'antd'
import AmountInput from './AmountInput'
import FormItem from './FormItem'

const TextArea1  = Input1.TextArea;


export  class Input extends Component{
    onChange=e=>{
        this.props.onChange && this.props.onChange(e.target.value)
        this.props.onAfterChange && this.props.onAfterChange(e.target.value)
    }
    render()
    {
        const {formBlur,type,cur,...rest} = this.props

        if(type == 'amount')
            return <AmountInput size='small' cur={cur} {...rest} onChange={this.onChange}/> 

        return (<Input1 type={type } size="small" {...rest} onChange={this.onChange}/>
        )
    }
}

export  class InputItem extends Component{
    constructor(props)
    {
        super(props)
        this.state = {hadBlur:false}
    }
    shouldComponentUpdate(nextProps,nextState)
    {
        if(isEquals(nextProps,this.props) && isEquals(nextState,this.state))
            return false
        return true;
    }
    setBlur=()=>{
        if(!this.state.hadBlur)
            this.setState({hadBlur:true})
        this.props.InputProps.onBlur && this.props.InputProps.onBlur()
    }
    render()
    {
        const {InputProps,ItemProps,disabled,Isstar} = this.props
        const  help = (InputProps && InputProps.formBlur) || this.state.hadBlur ? InputProps.help :''
        const {inDisplay,displayChanged,...rest} =  InputProps
        return (
            <FormItem validateStatus={help?"error":null}  help={help} {...ItemProps}>
       <div>  <Input {...rest} onBlur={this.setBlur} disabled={disabled} style={{color:displayChanged?'red':undefined,widtch:"5%"}}/>
          { Isstar==true?<span style={{color:"red",widtch:"5%"}}>*</span>:null }</div>
               
            </FormItem>
            
        )
    }
}

export class  TextArea extends Component{
    onChange=e=>{
        this.props.onChange && this.props.onChange(e.target.value)
        this.props.onAfterChange && this.props.onAfterChange(e.target.value)
    }
    render()
    {
        return (<TextArea1 {...this.props} onChange={this.onChange}/>)
    }
}
export  class TextAreaItem extends Component{
    constructor(props)
    {
        super(props)
        this.state = {hadBlur:false}
    }
    shouldComponentUpdate(nextProps,nextState)
    {
        if(isEquals(nextProps,this.props) && isEquals(nextState,this.state))
            return false
        return true;
    }
    setBlur=()=>{
        if(!this.state.hadBlur)
            this.setState({hadBlur:true})
        this.props.onBlur && this.props.onBlur()
    }
    render()
    {
        const {InputProps,ItemProps,style,...res} = this.props
        const  help = this.props.formBlur || this.state.hadBlur ? InputProps.help :''
        const {inDisplay,displayChanged,...rest} =  InputProps
        return (
            <FormItem validateStatus={help?"error":null}  help={help} {...ItemProps}>
                <TextArea {...rest} {...res}  onBlur={this.setBlur} style={{color:displayChanged?'red':null,...style}}/>
            </FormItem>
        )
    }
}