import React from 'react';
require('./index.css')
export default class SkuInfoComponent extends React.Component{
    constructor(props){
        super(props)
        this.state={
            style : {
                width:"100%",
                height : "auto"
            }
        }
    }

    handleErrorImg(ref){
        let nowRef = this.refs[ref];
        let newSrc = UTILPATH.handleImgError(nowRef);
        nowRef.src = newSrc;
    }

    handleLoadImg(ref){
        let nowRef = this.refs[ref];
        let style = UTILPATH.handleImgLoad(nowRef);
        this.setState({
            style:style
        })
    }

    render(){
        let props = this.props;
        let {classNames='',style={}} = props;
        return (
            <div className={"skuInfoComponent " + classNames} style={style}>
                <div className={"img"}>
                    <img style={this.state.style} ref={"secondPageImg"} onLoad={()=>this.handleLoadImg.bind(this)("secondPageImg")} onError={()=>this.handleErrorImg.bind(this)("secondPageImg")} src={UTILPATH.localImg.defaultImg} alt=""/>
                </div>
                <ul className={"shelfInfo font30 col333"}>
                    <li className={""}>
                        <span className={""}>货品名称：雪碧</span>
                        <span className={"totalNum "}>需回收数量：<span className={"font40 colff775c"}>5</span></span>
                    </li>
                    <li className={""}>
                        <span className={""}>所在区域：A区1号柜 <span className={"areaBtn colff775c"}>位置照片</span></span>
                        <span className={"currentNum"}>已回收数量：<span className={"font40 colff775c"}>5</span></span>
                    </li>
                    <li className={""}>货到信息：第6行 第3活到 13-6-6-6</li>
                </ul>
            </div>
        )
    }
}