import React from 'react'
import Button from '../../../components/CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css')
class BreakageProductDetail extends React.Component{
    constructor(props){
         super(props);
         this.state={
             packStatus:[
                 {
                    status:'包装完整',
                    code:1
                 },
                 {
                     status:'包装损坏',
                     code:2
                 }
             ],
             statusColor:-1,
             positionColor:-1
         }
    }

    render (){
        let {breakageProductInfo}=this.props;
        let {packStatus,statusColor,positionColor} =this.state;
        return (
            <div>
                {
                    Object.keys(breakageProductInfo).length>0?
                      <div className={'breakageContent'}>
                      <div className={'commonPage'}>
                        <div className={'pageTitle clo333 font40'} style={{marginBottom:UTILPATH.getRemByPx(20)}}>
                                <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:UTILPATH.getRemByPx(30),textAlign:'left',marginLeft:UTILPATH.getRemByPx(10)}}>
                                        <h2 className={'col333 font40'} style={{fontWeight:'800'}}>{breakageProductInfo.product.skuName}</h2>
                                        <p className={'col333 font28'} style={{marginTop:UTILPATH.getRemByPx(20)}}><span>条形码:</span>{breakageProductInfo.product.barcode}</p>
                                    </div>
                                 </div>
                                 <div className={'breakProductStatus'}>
                                        <h4 className={'col333 font32'}>货品状态</h4>
                                        <p className={'col333 font28'}>
                                            {
                                                packStatus.map((item,key)=>{
                                                   return <span key={key} className={statusColor===key?'active':''} onClick={this.changeProductStatus.bind(this,key)} >{item.status}</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> */}
                                            {
                                                breakageProductInfo.product.skuPositionList && breakageProductInfo.product.skuPositionList.map((item,key)=>{
                                                    return  <li 
                                                               key={key} 
                                                               className={positionColor===key?'active':''}
                                                               onClick={this.changePositionColor.bind(this,key)}
                                                               >
                                                               <img src={item.filePath} alt=""/>
                                                               <span className={'font28 col333'}>{item.name}</span>
                                                            </li>
                                                })
                                            }
                                        </ul>
                                 </div>
                              </div>
                              <div className={'breakProductPosition'}>
                                  { positionColor===-1?null:<img src={breakageProductInfo.product.skuPositionList[positionColor].filePath} alt=""/>}
                              </div>
                        </div>
                      </div> 
                      <Button btnContainer={'colfff font30 backff775c'} text={'提交'} style={{position:'absolute',bottom:UTILPATH.getRemByPx(120),left:'50%',transform:'translate(-50%)'}} option={this.changePageDefault.bind(this)} />
                </div>:null
                }
            </div>
        )
    }
    
    //改变显示的报损页面
    changePageDefault(){
        let {product}=this.props.breakageProductInfo;
        let {statusColor}=this.state;
        let productDetail={skuId:product.skuId,skuStatus:statusColor,skuPosition:0}
        this.props.submitBreakageProduct(productDetail);
        this.props.changePopShow(true)
    }

    //点击添加商品状态选中样式
    changeProductStatus(key){
        this.setState({statusColor:key})
    }

    //点击添加商品位置选中状态
    changePositionColor(key){
        this.setState({positionColor:key})
    }
}
export default BreakageProductDetail