//1. 删除图标的显隐控制

import { i18n } from "../../../../../public/i18n";
import {addContentPath} from '../../../../../util/index.js'

//2. 切换图片选中和未选中状态
export default class BgImg extends React.Component {
	constructor(props){
		super(props);

		this.state={
			isMouseOver: false
		};
	}

	handleMouseEvent = (e,bool) => {
		e.stopPropagation();
		this.setState({isMouseOver: bool});
	}

	render() {
		const {
			id,
			name,
			src,
			checked,
		} = this.props;

		let className="bg-img";
		if (checked) {
			className = `${className} selected`;
		}

		return (
			<span className="bg-img-outer" onMouseEnter={e => this.handleMouseEvent(e,true)} onMouseLeave={e => this.handleMouseEvent(e,false)}>
				<img 
					src={addContentPath(src)} 
					alt={name} 
					title={name}
					className={className}
					id={id}
				/>
				{
					( id != "0" && this.state.isMouseOver )&& (
						<span className="bg-img-clear" title={i18n.button.delete()}>
							<i className="icon-coms-Clear" id={id}/>
						</span>
					)
				}
			</span>
		);
	}
}