import React, {Component} from 'react'
import {connect} from 'dva'
import $ from 'jquery';
import {albumSrc} from '@common/js/common.js'

class PicPreview extends Component {
    constructor(props) {
        super(props)
    }
    componentWillReceiveProps(nextProps){
        $(this.refs.preview).attr('src','');
        let self=this;
        let images=nextProps.imgarr;
        let {color,album,idx}=nextProps.position;
        if(images[idx]){
            let nexturl=`${albumSrc}/${nextProps.car}/${color}/${album}/${images[idx]}`;
            let $image=$(`<img src="${nexturl}"/>`);
            $image.bind('load',function(){
                $(self.refs.preview).attr('src',nexturl)
            })
        }
    }
    render() {
        return (
            <div className="leftPart">
                <div className="imgBox">
                    <div className="inner">
                        <img src="" ref="preview" alt=""/>
                    </div>
                </div>
                <div className="btnBox">
                    <div className="inner">
                        <div className="next" onClick={()=>{
                            this.props.dispatch({type:'carshow/gonext'})
                        }}>{""}</div>
                        <div className="prev" onClick={()=>{
                            this.props.dispatch({type:'carshow/goprev'})
                        }}>{""}</div>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect(
    ({carshow:{images,position,car}})=>{
        return{
            imgarr:(()=>{
                if(images[position.color]){
                    return images[position.color][position.album]
                }else{
                    return []
                }
            })(),
            position,
            car
        }
    }
)(PicPreview);