import React from 'react';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
import Header from '../../CommonComponent/HeaderComponent/HeaderComponent';
import PopModel from '../../CommonComponent/PopupComponent/PopupChildComponent'
require('./index.css')
export default class RecoveryScanPage extends React.Component{
    constructor(props){
        super(props);
        this.getOtherHeader = this.getOtherHeader.bind(this)
        this.getBarcodeInput = this.getBarcodeInput.bind(this)
        this.wrongQrcode = this.wrongQrcode.bind(this)
        this.makeSureScanOver = this.makeSureScanOver.bind(this);
        this.submitBarcode = this.submitBarcode.bind(this);
        this.failSubmit = this.failSubmit.bind(this);
        this.getScanDom = this.getScanDom.bind(this);
        this.changeShowInput = this.changeShowInput.bind(this);
        this.getPopInfo = this.getPopInfo.bind(this);
        this.correctQrcode = this.correctQrcode.bind(this);
        this.hidePop = this.hidePop.bind(this); //关闭弹窗
        this.state = {
            barcodeText : '',
            barcodeErrorText : '',
            showInput : true
        }
    }

    componentWillReceiveProps(nextProps){
        let {recoveryInfo} = nextProps;

    }

    getPopInfo(){
        let {finishBoxRecovery} = this.props;
        let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} style={{marginTop:'10%'}}  key={"recoveryContainerCorrectQrcode"} text={"已放入"} option={finishBoxRecovery}/>
        return (
            <PopModel popupTitle={"货品匹配成功"} classContainer={"recoveryPopInfo"}>
                <div className={"icon iconfont icon-correct font150 col27ce61"} />
                <div className={"text font40 col000"}>
                    <p>请将货品放入回收箱</p>
                </div>
                <div className={"btn"}>
                    {btnDom}
                </div>
            </PopModel>

        )
    }

    getOtherHeader(){
        let {headerInfo,goBack} = this.props;
        return <div className={"otherHeader replenishScanQrcodeHeader font32 clearfix colfff "}>
            <i className={"iconfont middle icon font50 icon-circle-left circleIcon fl"} onClick={()=>goBack(2)}/>
        </div>
    }

    hidePop(){
        this.setState({
            barcodeText:""
        },()=>{
            this.props.hidePopup();
        });
    }

    handleInputChange(e){
        this.setState({
            barcodeText:e.target.value
        });
        if(this.state.barcodeErrorText){
            this.setState({
                barcodeErrorText : ''
            })
        }
    }

    getBarcodeInput(){
        let {headerInfo} = this.props;
        let {taskList={}} = headerInfo;
        return (
            <div className={"recoveryBarcodeInputDom"}>
                <div className={"colfff font30 scanText"} style={{marginBottom:'0.5rem'}}>目标回收数量：<span className={"font40 colff775c"}>{taskList.targetNum || 0}</span> 已回收数量：<span className={"font40 colff775c"}>{taskList.recoverNum || 0}</span></div>
                <div className={"barcodeInputText font30"}>{this.state.barcodeErrorText}</div>
                <input value={this.state.barcodeText} autoFocus={true} className={"barcodeInput font30 col000"} type="text" onChange={this.handleInputChange.bind(this)}/>
                <br/>
                {/*<div className={"barcodeInputTip font30 colff775c"} onClick={()=>this.changeShowInput()}><span className={"colfff"}>or</span>条形码扫描</div>*/}
                <Button btnContainer={"barcodeInputBarcode font32 backff775c colfff"} key={"barcodeInputBarcode"} text={"确定"} option={this.submitBarcode}/>
                <div className={"colfff scanInfo font30"} style={{marginTop:'1.5rem'}}>
                    <span style={{marginRight:"0.1rem"}}> 货道信息：{taskList.position || ''} </span>
                    <span style={{marginRight:"0.1rem"}}> 货道编号：{taskList.positionNum || ''} </span>
                    <span> 货物条形码：{taskList.barcode || ''} </span>
                </div>
            </div>
        )
    }

    /**
     * 扫描错误商品（后台返回）
     */
    wrongQrcode(){
        //拿错货品
        let {showPopup,hidePopup} = this.props;
        let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 bordere5e5e5"} key={"recoveryContainerWrongQrcode"} style={{marginTop:'10%'}} text={"关闭"} option={this.hidePop}/>
        let popDom =
            <PopModel popupTitle={"遇到问题-货品不对"} classContainer={"recoveryPopInfo"}>
                <div className={"icon iconfont icon-wrong font150 colf00"} />
                <div className={"text font40 col000"}>
                    <p>您拿错货品了，请放回货架！</p>
                </div>
                <div className={"btn"}>
                    {btnDom}
                </div>
            </PopModel>
        showPopup({popupChild:popDom});
    }


    correctQrcode(){
        let {showPopup} = this.props;
        let popDom = this.getPopInfo();
        showPopup({popupChild:popDom});
    }


    /**
     * 条形码扫描完毕
     */
    makeSureScanOver(){
        //确认扫描完毕
        let {hidePopup} = this.props;
        hidePopup()
    }

    /**
     * 条形码提交失败，前台判断
     */
    failSubmit(){
        this.setState({
            barcodeText : ''
        },()=>{
            this.props.hidePopup()
        })
    }

    /**
     * 提交条形码
     */
    submitBarcode(){
        //提交条形码信息
        let barcodeText = this.state.barcodeText;
        let {showPopup,getBarCodeProductInfo,headerInfo} = this.props;
        let {taskList={}} = headerInfo;
        let barcodeList = taskList.barcode.split("|");
        if(barcodeText){
            barcodeText = barcodeText.trim();
            if(this.checkNumber(barcodeText)){
                this.setState({
                    barcodeErrorText : ''
                });
                if(taskList.barcode && barcodeList.indexOf(barcodeText) > -1){
                    this.correctQrcode()
                }else{
                    this.wrongQrcode()
                }
            }else{
                //提示条形码不正确
                this.setState({
                    barcodeErrorText : '条形码输入错误，请重新输入',
                    barcodeText : ''
                })
            }

        }else{
            //提示输入条形码
            this.setState({
                barcodeErrorText : '请输入条形码',
                barcodeText : ''
            })
        }

    }

    /**
     * 验证条形码结果是否为纯数字
     * @param str
     * @returns {boolean}
     */
    checkNumber(str){
        let reg = /^[0-9]*$/;
        return reg.test(str);
    }


    /**
     * 调用扫描条形码
     * @returns {*}
     */
    getScanDom(){
        let {headerInfo} = this.props;
        let {taskList={}} = headerInfo;
        return (
            <div className={"recoveryScanDom"}>
                <div className={"colfff font30 scanText"}>目标回收数量：<span className={"font40 colff775c"}>{taskList.targetNum || 0}</span> 已回收数量：<span className={"font40 colff775c"}>{taskList.recoverNum || 0}</span></div>
                <div className={"colff775c scanTips font30"} onClick={()=>this.changeShowInput()}><span className={"colfff font26"}>or</span> 手动输入条形码</div>
                <div className={"colfff scanInfo font30"}>
                    <span>货道信息：{taskList.position || ''}</span>
                    <span>货道编号：{taskList.positionNum || ''}</span>
                    <span>货物条形码：{taskList.barcode || ''}</span>
                </div>
            </div>
        )
    }

    /**
     * 条形码扫描和输入框切换
     */
    changeShowInput(){
        this.setState({
            showInput : !this.state.showInput,
            barcodeText :""
        })
    }

    render(){
        let props = this.props;
        let {headerInfo} = props;
        let {taskInfo={}} = headerInfo;
        return(
            <div className={"replenishScanPage"} style={{width:'100%',height:'100%',backgroundColor:'#000'}}>
                <Header
                    showHeader={CONFIG.headerStatus[2]}
                >
                    {this.getOtherHeader()}
                </Header>
                {
                    this.state.showInput ? this.getBarcodeInput() : this.getScanDom()
                }

            </div>
        )
    }
}