import React from 'react';
import {
	inject,
	observer,
} from 'mobx-react';
import {
	WeaFormItem,
	WeaLocaleProvider
} from 'ecCom';
import {addContentPath} from '../../util/index.js'
const getLabel = WeaLocaleProvider.getLabel;

@inject('hrmStaffCareReminder')
@observer
class Picture extends React.Component {
	constructor(props) {
		super(props);
	}

	handleRadioChange = (params) => {
		this.props.hrmStaffCareReminder.setSelectedId(params);
	}

	render() {
		const {
			hrmStaffCareReminder,
			wrapperStyle,
		} = this.props, {
			picture,
			setMouseEnterIndex,
			delImage,
		} = hrmStaffCareReminder, {
			imglist,
		} = picture;

		if (!imglist) return null

		const {
			defaultImg,
			imgs
		} = imglist;

		const {
			selectedid,
			mouseEnterIndex,
		} = picture;

		const pictureWrapperStyle = {
			display: 'inline-block',
			marginRight: 30,
			paddingBottom: 10,
			position: 'relative',
		}

		const pictureStyle = {
			width: 100,
			height: 100,
			borderRadius: 5
		};

		const radioStyle = {
			display: 'block',
			marginLeft: 45
		}

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4c62ie`}
	            label={getLabel(1014, '样式')}
	            labelCol={{span: 6}}
	            wrapperCol={{span: 18}}
	            style={wrapperStyle}
          	>
          		<div style={pictureWrapperStyle} title={getLabel('149',"默认")}>
          			<img 
          				src={addContentPath(defaultImg)} 
          				style={pictureStyle} 
          				alt={getLabel('149',"默认")}/>
          			<input 
          				type='radio' 
          				style={radioStyle} 
          				checked={selectedid === '0'} 
          				onChange={() => this.handleRadioChange({selectedid:'0',index:0})} />
          		</div>
          		{
          			imgs.map( (img,index) => {
						const {
							name,
							id
						} = img;

          				return (
          					<div 
          						style={pictureWrapperStyle} 
          						title={name}>
          						<div onMouseEnter={() => setMouseEnterIndex(index)} onMouseLeave ={() => setMouseEnterIndex('')}>
	          						<img 
	          							src={addContentPath(`/weaver/weaver.file.FileDownload?fileid=${id}`)} 
	          							style={pictureStyle} 
	          							alt={name}
	          							
	          						/>
	          						{(mouseEnterIndex === index) && <i 
	          							className='icon-coms-Clear' 
	          							style={{position: 'absolute',fontSize: 16,top: -8,right: -8,cursor:'pointer',zIndex: 100}}
	          							onClick={() => delImage(id)}/>
	          						}
          						</div>
          						<input 
          							type='radio' 
          							style={radioStyle}  
          							checked={selectedid === id} 
          							onChange={() => this.handleRadioChange({selectedid: id,index:index+1})}/>
          					</div>
          				)
          			})
          		}
          	</WeaFormItem>
		)
	}
}

export default Picture