import React from 'react';
require('./index.css');
let addIconSrc = UTILPATH.localImg.plusIcon;
let refreshIconSrc = UTILPATH.localImg.refreshIcon;
let addIconDisabledSrc = UTILPATH.localImg.plusIcon_disabled;
let refreshIconDisabledSrc = UTILPATH.localImg.refresh_disabled;
/**
 * 组件说明 需要props type 与imgSrc
 * type == custom 为要显示的图片
 * type == add 为添加图片的icon 不需要传入imgSrc
 * type == refresh 为刷新的icon 不需要传入imgSrc
 * handleClikImgFunc 为点击当前图片的方法
 * noCloseBtn 为是否有删除按钮
 * handleClikCloseFunc 为点击删除按钮的方法
 */
export default class ImgToolComponent extends React.Component{
    constructor(props){
        super(props);
        this.handleImgClick = this.handleImgClick.bind(this)
    }

    handleImgClick(){
        let {disabled,handleClikImgFunc} = this.props;
        if(!disabled){
            handleClikImgFunc();
        }
    }

    render(){
        let props = this.props;
        let type = props.type;
        let disabled = props.disabled;
        let imgSrc = '';
        let noCloseBtn = props.noCloseBtn;
        let handleClikImgFunc = props.handleClikImgFunc;
        let handleClikCloseFunc = props.handleClikCloseFunc;

        switch(type){
            case "custom":
                imgSrc = props.imgSrc;
                break;
            case "add":
                imgSrc = addIconSrc;
                break;
            case "refresh":
                imgSrc = refreshIconSrc;
                break;

        }
       if(type === "add" && disabled){
            imgSrc = addIconDisabledSrc;
       }
        if(type === "refresh" && disabled){
            imgSrc = refreshIconDisabledSrc;
        }
        return(
            <div className={"ImgToolComponent"}>
                {
                    // props.showSrc ? <img src={imgSrc} data-src={imgSrc} className={"swiper-lazy"} alt="" onClick={()=>this.handleImgClick()}/> :
                    //     <img data-src={imgSrc} className={"swiper-lazy"} alt="" onClick={()=>this.handleImgClick()}/>
                }

                <img src={imgSrc} alt="" onClick={()=>this.handleImgClick()}/>

                {
                    noCloseBtn?"":(<span className={"closeBtn"} onClick={props.handleClikCloseFunc}>×</span>)
                }
            </div>
        )

    }
}