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"
            },
            btnClock : false
        }
    }

    componentWillReceiveProps(nextProps) {
        let nextHeaderInfo = nextProps.headerInfo;
        let headerInfo = this.props.headerInfo;
        if(
            nextHeaderInfo.taskList &&
            nextHeaderInfo.taskList.skuId &&
            headerInfo.taskList &&
            headerInfo.taskList.skuId &&
            headerInfo.taskList.skuId !== nextHeaderInfo.taskList.skuId
        ){
            this.setState({
                btnClock : false
            })
        }
    }



    wrongSku(){
        //货道商品不符
        let {showPopup,hidePopup} = this.props;
        let btnDom1 = <Button btnContainer={"recoveryPopInfoWrongSkuBtn1 font32 bordere5e5e5"} 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(){
        //货品不符上报
        if(!this.state.btnClock){
            this.setState({
                btnClock: true
            },()=>{
                this.props.uploadError(CONFIG.taskErrorType.WRONGSHELF);
            })

        }

    }


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



    render(){
        let props = this.props;
        let {headerInfo} = props;
        let {taskInfo={},taskList={}} = headerInfo;
        return(
            <div className={"recoverySecondPage commonPage"}>
                <div className={"title font40 col333 pageTitle"}>任务目标：请将该货道货品进行扫码回收</div>
                <div className={"box pagebox"}>
                    <SkuInfoComponent showPopup={props.showPopup} hidePopup={props.hidePopup} style={{'display':'flex'}} skuInfo={taskList} taskType={taskInfo.currentTaskType || ""}/>
                    <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>
        )
    }
}