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 RecoverySecondPage from '../../components/RecoveryComponent/RecoverySecondPage/RecoverySecondPage'
import RecoveryScanPage from '../../components/RecoveryComponent/RecoveryScanPage/RecoveryScanPage'
require('./index.css');

const recoveryPageIndex = {
    1 : "getFirstPage",
    2 : "getSecondPage",
    3 : "getScanPage"
}

export default class RecoveryContainer extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showPage : 1 //展示回收箱页面
        };
        this.getFirstPage = this.getFirstPage.bind(this); //展示第一页
        this.getSecondPage = this.getSecondPage.bind(this); //展示第二页
        this.getPage = this.getPage.bind(this); //获取要展示的页面
        this.handleFinishBoxRecovery = this.handleFinishBoxRecovery.bind(this); //完成回收箱商品回收
        this.setPage = this.setPage.bind(this); //完成回收箱商品回收
    }

    componentWillMount() {
        let props = this.props;
        console.log("props ",this.props);
        let {headerInfo = {}} = props;
        let {taskList = {}} = headerInfo;
        if(taskList && !taskList.whetherType){
            console.log("没有回收箱物品")
            //没有回收箱物品
            this.setState({
                showPage : 2
            })

        }
    }

    componentWillReceiveProps(nextProps){
        let {hidePopup,headerInfo} = nextProps;
        console.log("nextProps ",nextProps)
        console.log("props ",this.props)
        if(this.props.headerInfo && this.props.headerInfo.taskList && headerInfo && headerInfo.taskList){
            let oldTaskList = this.props.headerInfo.taskList;
            let taskList = headerInfo.taskList;
            if(taskList.skuId !== oldTaskList.skuId || (taskList.skuId === oldTaskList.skuId && taskList.recoverNum !== oldTaskList.recoverNum)){
                hidePopup();
                this.handleFinishBoxRecovery();
            }
        }

    }

    handleFinishBoxRecovery(){
        //完成回收箱物品回收
        let props = this.props;
        props.getTaskName()
        this.setState({
            showPage : 2
        })
    }

    getFirstPage(props){
        return (
            <RecovertyFirstPage handleFinishBoxRecovery={()=>this.handleFinishBoxRecovery()} {...props}/>
        )
    }
    getSecondPage(props){
        return (
            <RecoverySecondPage {...props} beginScan={this.setPage}/>
        )
    }

    getScanPage(props){
        return (
            <RecoveryScanPage {...props} goBack={this.setPage}/>
        )
    }

    setPage(page){
        this.setState({
            showPage : page
        })
    }

    getPage(type){
        return (props)=>this[recoveryPageIndex[type]](props)
    }

    render(){
        let props = this.props;
        let dom = this.getPage(this.state.showPage)(props);
        return(
            <div className={"recoveryContainer page"}>
                {
                    this.state.showPage === 3 ?
                        this.getScanPage(props) :
                        <div style={{width:'100%',height:'100%'}}>
                            {
                                props.headerInfo && props.headerInfo.storeInfo ?
                                    <Header headerInfo={props.headerInfo}/> : null
                            }

                            <LeftContainer leftInfo={props.headerInfo}/>
                            <RightContainer>
                                {dom}
                            </RightContainer>
                        </div>
                }
            </div>
        )
    }
}
