import React from "react"
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import LeftContainer from '../LeftContainer/LeftContainer'
import RightContainer from '../RightContainer/RightContainer'
import {headerStatus} from '../../config/showPage'
require('./index.css')
class TakeStokeContaniner extends React.Component {
    constructor(props){
         super(props);
         this.state={
             initNum:0
         }
    }


    render(){
       let {initNum}=this.state;
       let props = this.props;
       return (
                <div className={'TokeStokeContainer'}>
                        <HeaderComponent headerStatus={headerStatus[1]} headerInfo={props.headerInfo}/>
                         <LeftContainer />
                         <RightContainer>
                             <div className={"TokeStokeContent"}>
                                  <div className={"TokeStokeTop"}>
                                      <h1 className={"TokeStokeTitle font30"}>请输入以下货道中的货品数量</h1>  
                                       <div className={"TokeStokeCommodity"}>
                                          <h4>
                                              <p>所在区域: <span>A区</span></p>
                                              <p>货&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;柜: <span>1号柜</span></p>
                                              <p>货道位置: <span>第6行, 第三货道</span></p>
                                              <p>货道编号: <span>13-2-6-3</span></p>
                                          </h4>
                                          <div className={'numAdd'}>
                                              <p>数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量:</p>
                                              <p>
                                                  <span onClick={this.reduceNum.bind(this,'dis')}>-</span>
                                                  <span>{initNum}</span>
                                                  <span onClick={this.reduceNum.bind(this,'add')}>+</span>
                                              </p>
                                          </div>
                                       </div>
                                  </div>
                                  <div className={"TokeStokeBottom"}>
                                     <div className={"TokeStokeLeft"}>
                                            <p className={"font24 clo333"}>货道信息详情</p>
                                            <p>
                                                <span>所在区域: <span>A区</span></span>
                                                <span>货道位置: <span>A区柜门; 从上往下数第六行</span></span>
                                            </p>
                                            <p>
                                                <span>区域照片: <img src="" alt=""/></span>
                                                <span>货品名称: <span>雪碧250ml</span></span>
                                            </p>
                                     </div>
                                     <div className={"TokeStokeRight"}>
                                         <img src="" alt=""/>
                                     </div>
                                  </div> 
                                  <div className={"toknStokeSubmit"}><button onClick={this.submitNum}>提交</button></div>
                             </div>
                         </RightContainer>
                    </div>
            )
    }
    //控制货道内商品数量的加减
    reduceNum(str){
        let {initNum}=this.state;
        if(str==="add"){
           initNum++;
           this.setState({
               initNum
           })
        }else{
            if(initNum>0){
                initNum--;
            }
            this.setState({
                initNum
            }) 
        }
    }
    submitNum(){
        
    }
  
}
export default TakeStokeContaniner