import React from 'react';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
import SkuInfoComponent from '../../CommonComponent/SkuInfoComponent/SkuInfoComponent'
import PopModel from '../../CommonComponent/PopupComponent/PopupChildComponent'
require('./index.css')
export default class RecoverySecondPage extends React.Component{
    constructor(props){
        super(props);
        this.scanQrcode = this.scanQrcode.bind(this); //扫码回收
        this.wrongSku = this.wrongSku.bind(this); //完成回收箱商品回收
        this.uploadWrongSku = this.uploadWrongSku.bind(this); //货品不符上报
        this.state={
            style : {
                width:"100%",
                height : "auto"
            }
        }
    }

    wrongSku(){
        //货道商品不符
        let {showPopup,hidePopup} = this.props;
        let btnDom1 = <Button btnContainer={"recoveryPopInfoWrongSkuBtn1 font32"} key={"recoveryContainerShelfWrong1"} text={"货品不符"} option={this.uploadWrongSku}/>
        let btnDom2 = <Button btnContainer={"recoveryPopInfoWrongSkuBtn2 backff775c colfff font32"} key={"recoveryContainerShelfWrong2"} text={"关闭窗口"} option={hidePopup}/>
        let popDom =
            <PopModel popupTitle={"遇到问题-货品不符"} classContainer={"recoveryPopInfo"}>
                <div className={"icon iconfont icon-exclamation font150 colf5a623"} />
                <div className={"text font40 col000"}>
                    <p>请确认货道信息，不要数错货道哦</p>
                </div>
                <div className={"btn"}>
                    {btnDom1}
                    {btnDom2}
                </div>
            </PopModel>;
        showPopup({popupChild:popDom});
    }


    uploadWrongSku(){
        //货品不符上报
        this.props.uploadError(CONFIG.taskErrorType.WRONG_SKU);
    }


    scanQrcode(){
        //扫码回收
        this.props.beginScan(3)
    }



    render(){
        let props = this.props;
        let {headerInfo} = props;
        return(
            <div className={"RecoverySecondPage commonPage"}>
                <div className={"title font40 col333 pageTitle"}>任务目标：请将该货道货品进行扫码回收</div>
                <div className={"box pagebox"}>
                    <SkuInfoComponent style={{'display':'flex'}} skuInfo={headerInfo.taskList || {}}/>
                    <div className={"btn"}>
                        <Button btnContainer={"recoverySecondPageBtn font32 colfff"} key={"RecoverySecondPageBtn"} text={'扫码回收'} option={this.scanQrcode}/>
                        <div className={"text colff775c font28"} onClick={()=>this.wrongSku()}>货品不符？</div>
                    </div>
                </div>
            </div>
        )
    }
}
