import React from 'react'
import Button from '../../../components/CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css')
class BreakageProductDetail extends React.Component{
    constructor(props){
         super(props);
    }

    render (){
        let {breakageProductInfo}=this.props;
        return (
            <div>
                {
                    Object.keys(breakageProductInfo).length>0?
                      <div className={'breakageContent'}>
                      <div className={'commonPage'}>
                        <div className={'pageTitle clo333 font40'} style={{marginBottom:'20px'}}>
                                <span>上报遗留货品信息</span>
                        </div>
                        <div className={'pagebox'}> 
                              <div className={'breakProduct'}>
                                 <div className={'breakProductInfo'}>
                                    <div className={'breakProductImg'}>
                                        <img src={breakageProductInfo.product.skuImage} alt=""/>
                                    </div>
                                    <div style={{marginTop:'30px',textAlign:'left',marginLeft:'10px'}}>
                                        <h2 className={'col333 font40'} style={{fontWeight:'800'}}>{breakageProductInfo.product.skuName}</h2>
                                        <p className={'col333 font28'} style={{marginTop:'20px'}}><span>条形码:</span>56546213456554</p>
                                    </div>
                                 </div>
                                 <div className={'breakProductStatus'}>
                                        <h4 className={'col333 font32'}>货品状态</h4>
                                        <p className={'col333 font28'}>
                                            <span className={'active'}>包装完整</span>
                                            <span>包装损坏</span>
                                        </p>
                                 </div>
                                 <div className={'ProductPosition'}>
                                        <h4 className={'col333 font32'}>请选择货品的位置:</h4>
                                        <ul className={'imgList'}>
                                            <li><img src={UTILPATH.localImg.defaultImg} alt=""/><span className={'font28 col333'}>上</span></li>
                                            <li className={'active'}><img src={UTILPATH.localImg.defaultImg} alt=""/><span className={'font28 col333'}>下</span></li>
                                            <li><img src={UTILPATH.localImg.defaultImg} alt=""/><span className={'font28 col333'}>左</span></li>
                                            <li><img src={UTILPATH.localImg.defaultImg} alt=""/><span className={'font28 col333'}>右</span></li>
                                        </ul>
                                 </div>
                              </div>
                              <div className={'breakProductPosition'}>
                                        <img src={UTILPATH.localImg.defaultImg} alt=""/>
                              </div>
                        </div>
                      </div> 
                      <Button btnContainer={'colfff font30 backff775c'} text={'提交'} style={{position:'absolute',bottom:'120px',left:'50%',transform:'translate(-50%)'}} option={this.changePageDefault.bind(this)} />
                </div>:null
                }
            </div>
        )
    }
    changePageDefault(){
        this.props.changePage(1)
    }
}
export default BreakageProductDetail