import React from 'react'
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css')
//使用说明   
//getBarCodeProductInfo 传入此方法获取条形码  
//barcode 变量表示条形码
//barcodeWord 变量表示条形码输入为空时显示的报错文字

class BarcodeComponent extends React.Component{
    constructor(props){
         super(props)
         this.state={
             barcode:'',
             barcodeWord:false
         }
    }

    render(){
        let { barcode , barcodeWord } = this.state;
       return (
         
               <div className={'breakageCodeContent'}>
                   {
                       barcodeWord?<p className={'font30'} style={{color:'#d0021b',textAlign:'center',marginTop:'20px'}}>条形码输入错误，请重新输入</p>:null
                   }
                   <input autoFocus="autofocus" type="text" className={'font30'} value={barcode} onChange={(ev)=>{this.setState({barcode:ev.target.value})}}/>
                   <p className={'barcodeScan font30 colfff'}>or<span className={'colff7860'}>条形码扫描</span></p>
                  <Button text={'确定'} option={this.getCodeProduct.bind(this)} btnContainer={'font30 backff775c colfff'} style={{border:'0',margin:'0 auto',marginTop:'120px'}} />
               </div>
       )
    }
    getCodeProduct(){
        let {barcode}=this.state;
        let props=this.props;
        //验证输入的条形码是否为空
        if(barcode){
           props.getBarCodeProductInfo(barcode);
        //    props.changePage&&props.changePage(2)
           this.setState({barcodeWord:false,barcode:''});
        }else{
            this.setState({barcodeWord:true,barcode:''})
        }
        
    }
    componentWillReceiveProps(nextProps){
        let props=this.props;
         if(nextProps.breakageProductInfo.product&&nextProps.breakageProductInfo.product.success!==false){
            this.setState({
                barcode:''
            })
            props.changePage&&props.changePage(2)
         }
    }
}
export default BarcodeComponent;