import {
	inject,
	observer,
} from 'mobx-react'

import React, {
	Component
} from 'react';

import {
	WeaUpload,
	WeaFormItem
} from 'ecCom'

import {
	Radio,
	Button
} from 'antd'

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

import * as mobx from 'mobx'
const toJS = mobx.toJS;
const RadioGroup = Radio.Group;

@inject('hrmBirthdayRemindSet')
@observer
export default class PictureSet extends Component {
	constructor(props) {
		super(props);
		this.state = {
			list: [],
			upStatus: '',
			imgWidth: 120,
			imgHeight: 90,
			curIndex: '',
			isMouseEnter: false
		}
	}

	getPicture() {
		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@84veq5`}
                label={i18n.label.css()}
                labelCol={{span: 6}}
                wrapperCol={{span: 12}}
            >
                {this.getPics()}
            </WeaFormItem>
		)
	}

	uploadPicture() {
		const {
			list,
			upStatus
		} = this.state;

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ay3zka`}
                label={i18n.label.pictureSet()}
                labelCol={{span: 6}}
                wrapperCol={{span: 18}}
                style={{marginTop: 30}}
            >
            	<p>{i18n.label.adviceSize()}</p>
            	<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@bpgti1`}
            	    ref='upload'
			        uploadUrl='/api/doc/upload/uploadFile'
			        category='string'
          			limitType='jpg,gif,png'
          			showClearAll={false}
          			maxFilesNumber={10}
          			maxUploadSize={10}
          			datas={upStatus === 'uploaded'  ? list : []}
                    onChange={(id, l) => {this.setList(l); this.setImageIds(id)}}
                    onUploading={s => this.onUploading(s)}
      			/>
            </WeaFormItem>
		)
	}

	setList(list) {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			setUploadImages
		} = hrmBirthdayRemindSet

		this.setState({
			list: list
		});
		setUploadImages(list, 'entryRemind');
	}

	setImageIds(ids) {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			setUploadIds
		} = hrmBirthdayRemindSet;

		setUploadIds(ids, 'entryRemind');
	}

	onUploading(s) {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			partSave
		} = hrmBirthdayRemindSet;

		this.setState({
			upStatus: s
		});
		s == 'uploaded' && partSave('entryRemind')
	}

	getPics() {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			entryRemind,
			erTotalImages,
			setSelectedRadio,
		} = hrmBirthdayRemindSet, {
			imgList,
			selectedPicVal
		} = entryRemind, {
			defaultImg,
			imgs,
			index,
			selectedid,
			showname,
		} = imgList, {
			imgWidth,
			imgHeight,
			curIndex,
			isMouseEnter
		} = this.state;

		let images = [],
			radios = [];

		let filter;
		if (erTotalImages.length > 0) {
			filter = [erTotalImages[0]];
			erTotalImages.map(img => {
				if (filter.every(f => f.id != img.id)) filter.push(img)
			})
		} else {
			filter = [];
		}

		filter.map((img, index) => {
			images.push(
				<div style={{ width: imgWidth,
					          height:imgHeight,
					          float: 'left',
					          marginLeft: (index + 1) % 3 == 0 ? 0 : 40,
					          clear:(index + 1) % 3 == 0 ? 'both' : 'none',
					          marginTop:index > 1 ? 40 : 0,
					          position:'relative',
					          zIndex: 11}}
					onMouseEnter={()=>this.setState({curIndex: index,isMouseEnter: true})} 
					onMouseLeave={()=>this.setState({curIndex:'',isMouseEnter: false})} 
			    >
					<img 
					    src={ addContentPath('/weaver/weaver.file.FileDownload?fileid='+img.id) } 
					    style={{width:'100%',height:'100%'}} 
					/>
					{index == curIndex && isMouseEnter &&<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@quouri@${index}`} 
						shape="circle" 
						icon='minus' 
						style={{width: 18,height: 18,fontSize: 12,position:'absolute',left:110,top:-5,zIndex: 10}} 
						onClick={() => this.handleDelClick(index, img.id)}/>
					}
				</div>

			)

			const result = Math.floor((index + 1) / 3);

			radios.push(<Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@63k8am@${index}`} 
				            value={index+1} 
				            style={{width:imgWidth,paddingLeft:30,marginRight:0,marginLeft:(index+1)%3==0?0:40,top:(( result + 1)*imgHeight + result * (20 + 1*result) )}}
				        >
				            {img.name.split('.')[0].slice(0,8)+'...'}
				       </Radio>);
		})

		return (
			<div style={{position:'relative',width:480}}>
			    <div>
			        <div style={{width: imgWidth,height:imgHeight,float: 'left'}}>
			        	<img src={addContentPath(defaultImg)} style={{width:'100%',height:'100%'}}/>
			        </div>
                    {images}
			    </div>
			    <div style={{clear:'both',position:'absolute'}}>
			    	<RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@cn0r9y`} onChange={e => setSelectedRadio(e.target.value,'entryRemind')} value={selectedPicVal}>
			    	    <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@w3jztq`} value={0} style={{width:imgWidth,paddingLeft:30,marginRight:0,top:90}}>{showname}</Radio>
			    	    {radios}
			        </RadioGroup>
			    </div>
			</div>
		)
	}

	handleDelClick(index, id) {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			doDel
		} = hrmBirthdayRemindSet;

		doDel(id, index, 'entryRemind');
	}

	getPreView() {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			entryRemind,
			erTotalImages
		} = hrmBirthdayRemindSet, {
			imgList,
			selectedPicVal,
			birthGreeting,
			greetingColor,
			font,
			fontSize,
		} = entryRemind, {
			defaultImg,
		} = imgList;

		const greetings = birthGreeting.split('\n').filter(item => item);

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@vn7ga7`}
                label={i18n.label.preview()}
                labelCol={{span: 6}}
                wrapperCol={{span: 18}}
            >
			    <div style={{position: 'relative', width: 700, height: 330}}>
	                <img 
	                    src={addContentPath(selectedPicVal == 0 ? defaultImg : '/weaver/weaver.file.FileDownload?fileid=' + toJS(erTotalImages)[selectedPicVal - 1].id)} 
                        style={{width: '100%', height: '100%'}}
	                />
	                <div style={{position: 'absolute',top: '48%', marginTop:-(greetings.length * 42/2),width: '78%', marginLeft:'11%', textAlign: 'center',color: greetingColor,fontFamily:font, fontSize:parseInt(fontSize)}}>
	                	{greetings.map(str => {
	                		return <p>{str}</p>
	                	})}
	                </div>
	               
	            </div>
	        </WeaFormItem>
		)
	}


	render() {
		return (
			<div style={{marginTop: 10}}>
            	{this.getPicture()}
            	{this.uploadPicture()}
            	{this.getPreView()}
            </div>
		)
	}
}