import React,{Component} from 'react'
import {Input} from 'antd'



export default class AmountInput extends Component{
    
    

    constructor(props)
    {
        super(props)
        let amt = props.value || '' 
        let amtdesp = this.getFormatAmount(amt)
        this.state={
                        hasDot:props.cur=='JPY'?false:true,
                        amt:amt,
                        amtdesp:amtdesp,
                        edtMode:false //edtMode false  显示模式，只读模式
                    }   
        
    }
    getFormatAmount(amt)
    {
        if(!amt)
            return ''
        let fix = this.props.fix || 2
        let idx = amt.indexOf('.')
        let segs = undefined
        if(idx > -1)
            segs = amt.split('.')
        else
            segs = [amt||'0','0'.repeat(fix)]
        if(!segs[0])
            segs[0] = '0'
        if(segs[1].length > fix)
            segs[1] = segs[1].substring(0,fix)
        else if(segs[1].length < fix)
            segs[1] = segs[1] + '0'.repeat(fix - segs[1].length)
        let npreseg = ''
        segs[0] =  segs[0].replace(/\D+/g,'')
        let preseg = segs[0]
        for(let i = 0;i < preseg.length; i++)
        {
            npreseg = preseg.charAt(preseg.length - 1 - i) + npreseg
            if(i && (1+i)%3==0 && i!=preseg.length - 1)
                npreseg = ','+ npreseg
        }
        if(this.props.cur=='JPY')
            return npreseg
        else
            return `${npreseg}.${segs[1]}`
    }


    formatAmount(amt)
    {
        if(amt === '' || amt === undefined || amt === null)
        {
            this.setState({amt:'',amtdesp:''})
            return 
        }

        let fix = this.props.fix || 2
        let idx = amt.indexOf('.')
        let segs = undefined
        if(idx > -1)
            segs = amt.split('.')
        else
            segs = [amt||'0','0'.repeat(fix)]
        if(!segs[0])
            segs[0] = '0'
        if(segs[1].length > fix)
            segs[1] = segs[1].substring(0,fix)
        else if(segs[1].length < fix)
            segs[1] = segs[1] + '0'.repeat(fix - segs[1].length)
        let npreseg = ''
        segs[0] =  segs[0].replace(/\D+/g,'')
        let preseg = segs[0]
        for(let i = 0;i < preseg.length; i++)
        {
            npreseg = preseg.charAt(preseg.length - 1 - i) + npreseg
            if(i && (1+i)%3==0 && i!=preseg.length - 1)
                npreseg = ','+ npreseg
        }
        if(!this.state.hasDot)
            this.setState({amt:segs[0],amtdesp:npreseg})
        else
            this.setState({amt:`${segs[0]}.${segs[1]}`,amtdesp:`${npreseg}.${segs[1]}`})
    }

    componentWillReceiveProps(nextProps)
    {
        let nSta = {} 
        const props = this.props
        if(props.cur == 'JPY' && nextProps.cur != 'JPY' )
        {
            this.setState({hasDot:true},()=>{
                this.formatAmount(this.state.amt)
                setTimeout(()=>{
                    this.onChange({target:{value:this.state.amt}}) 
                },10)
            })
        }
        if(props.cur != 'JPY' && nextProps.cur == 'JPY' )
        {
            this.setState({hasDot:false},()=>{
                this.formatAmount(this.state.amt)
                setTimeout(()=>{
                    this.onChange({target:{value:this.state.amt}}) 
                },10)
                
            })
            
        }
        if(!this.state.edtMode)
        {
            this.formatAmount(nextProps.value||'')
        }
    }
    onChange=e=>{
        let val = e.target.value
        if(val.length > 0)
        {
            if(!this.state.hasDot)
            {
                if(!/^\d+$/.test(val))
                    return
            }
            else if(!/^[\.\d]+$/.test(val)){
                return
            }
            this.setState({amt:val},()=>{
                this.props.onChange && this.props.onChange({target:{value:val}})
            })
            
        }
        else
            this.setState({amt:val},()=>{
                this.props.onChange && this.props.onChange({target:{value:val}})
            })
    }
    onFocus = ()=>{
        this.setState({edtMode:true})
        this.props.onFocus &&  this.props.onFocus()
    }
    onBlur = ()=>{
        this.setState({edtMode:false},()=>{
            this.formatAmount(this.state.amt)
            setTimeout(()=>{
                this.props.onBlur && this.props.onBlur()
            },10)
            
        })
        
    }
    render(){
                
        return ( 
        <Input readOnly={!this.state.edtMode} 
            {...this.props}
            onChange={this.onChange}
            value={this.state.edtMode?this.state.amt:this.state.amtdesp}
            onFocus={this.onFocus}
            onBlur = {this.onBlur}
        />
        )
    }
}

