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@d9gvo5`}
                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@wnkeqp`}
                label={i18n.label.pictureSet()}
                labelCol={{span: 6}}
                wrapperCol={{span: 18}}
                style={{marginTop: 30}}
            >
            	<p>{i18n.label.maxSize()}</p>
            	<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@kry34h`}
            	    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);
	}

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

		setUploadIds(ids);
	}

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

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

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

		let images = [],
			radios = [];

		toJS(totalImages).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@i0x7jm@${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@sb3jte@${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@vzn7q3`} onChange={e => setSelectedRadio(e.target.value)} value={selectedPicVal}>
			    	    <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@xy7nba`} 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);
	}

	getPreView() {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			tabTwo,
			totalImages
		} = hrmBirthdayRemindSet, {
			imgList,
			selectedPicVal,
			birthGreeting,
			multipleColor,
			greetingColor,
		} = tabTwo, {
			defaultImg,
		} = imgList;

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@nhrhm9`}
                label={i18n.label.preview()}
                labelCol={{span: 6}}
                wrapperCol={{span: 18}}
            >
			    <div style={{position: 'relative', width: 506, height: 400}}>
	                <img 
	                    src={addContentPath(selectedPicVal == 0 ? defaultImg : '/weaver/weaver.file.FileDownload?fileid=' + toJS(totalImages)[selectedPicVal - 1].id)} 
                        style={{width: '100%', height: '100%'}}
	                />
	                <p style={{width: 192,position: 'absolute',top: 95,left: 30,color: greetingColor}}>{birthGreeting}</p>
	                <div style={{color: multipleColor}}>{this.getElements()}</div>
	            </div>
	        </WeaFormItem>
		)
	}

	getElements() {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			tabTwo,
		} = hrmBirthdayRemindSet, {
			multiple
		} = tabTwo;

		let arr = [];
		toJS(multiple).map(val => {
			switch (val) {
				case '1':
					arr.push(<div style={{position: 'absolute',bottom: 30,left: 30}}>{i18n.label.sysAdmin()}</div>);
					break;
				case '2':
					arr.push(<div style={{position: 'absolute',bottom: 30,left: 110}}>{i18n.label.department()}</div>);
					break;
				case '3':
					arr.push(<div style={{position: 'absolute',bottom: 30,left: 145}}>{i18n.label.subcompany()}</div>);
					break;
				case '4':
					arr.push(<div style={{position: 'absolute',bottom: 30,right: 30}}>{i18n.label.date()}</div>);
					break;
			}
		});
		toJS(multiple).includes('2') && toJS(multiple).includes('3') && arr.push(<div style={{position: 'absolute',top: 350,left: 137}}>-</div>);

		return arr;
	}

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