import React from 'react';
import Header from '../../components/CommonComponent/HeaderComponent/HeaderComponent';
import LeftContainer from '../LeftContainer/LeftContainer';
import RightContainer from '../RightContainer/RightContainer';
import RecovertyFirstPage from '../../components/RecoveryComponent/RecoveryFirstPage/RecoveryFirstPage'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css')
export default class RecoveryContainer extends React.Component{
    constructor(props){
        super(props);
        this.getFirstPage = this.getFirstPage.bind(this);
        this.wrongQrcode = this.wrongQrcode.bind(this); //扫描错误商品
        this.correctQrcode = this.correctQrcode.bind(this); //扫描正确商品
        this.putSkuToBox = this.putSkuToBox.bind(this); //将商品放入回收箱

    }

    componentWillMount(){
        this.correctQrcode()
    }

    getPopInfo(){
        let btnWidth = "410px";
        let btnDom = <Button key={"recoveryContainerCorrectQrcode"} style={{'width':btnWidth,'display':'inline-block'}} text={"我已放入回收箱"} option={this.putSkuToBox}/>
        return (
            <div className={"recoveryPopInfo"}>
                <div className={"icon iconfont icon-tick font90"} />
                <div className={"text font30 col000"}>
                    <p>货品信息匹配正确！</p>
                    <p>请将货品放入回收箱</p>
                </div>
                {btnDom}
            </div>
        )
    }

    wrongQrcode(){
        //拿错货品
        let {showPopup,hidePopup} = this.props;
        let btnWidth = "260px";
        let btnDom = <Button key={"recoveryContainerWrongQrcode"} style={{'width':btnWidth}} text={"关闭"} option={hidePopup}/>
        showPopup({
            popupText : '您拿错货品，请放回货架',
            popupButtons:[btnDom]
        });
    }

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

    putSkuToBox(){
        //调取接口，将商品放入回收箱
    }

    getFirstPage(){
        return (
            <RecovertyFirstPage />
        )
    }

    render(){
        let dom = this.getFirstPage();
        let props = this.props;
        return(
            <div className={"recoveryContainer page"}>
                {
                    props.headerInfo && props.headerInfo.storeInfo ?
                        <Header headerInfo={props.headerInfo}/> : null
                }

                <LeftContainer />
                <RightContainer>
                    {
                        dom
                    }
                </RightContainer>
            </div>
        )
    }
}