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 PreView extends React.Component {
	constructor(props) {
		super(props);
	}

	getShowFields = (showtitle2) => {
		const checkedIndexs = showtitle2.split(',').sort();

		const fields = [];

		const isPair = this.isPair(checkedIndexs);

		checkedIndexs.map(checkedIndex => {
			let label, style = {
				position: 'absolute'
			};
			if (checkedIndex === '3' && isPair) {
				fields.push(<span style={{position: 'absolute',left: '26%'}}>{`-`}</span>);
			}
			switch (checkedIndex) {
				case '1':
					label = getLabel(16139, '系统管理员');
					break;
				case '2':
					label = getLabel(126029, '部门');
					Object.assign(style, {
						left: '20%'
					});
					break;
				case '3':
					label = getLabel(33553, '分部');
					Object.assign(style, {
						left: '28.5%'
					});
					break;
				case '4':
					label = getLabel(22823, '日期');
					Object.assign(style, {
						left: '80%'
					});
					break;
			}
			fields.push(<span style={style}>{label}</span>)
		})
		return fields;
	}

	isPair = (checkedIndexs) => {
		return ['2', '3'].every(val => checkedIndexs.includes(val));
	}

	getFontFamliy = (index) => {
	    const isWindows = function() {
	        return /windows|win32/i.test(navigator.userAgent);
	    }();

	    const winFonts = ["inherit", "Microsoft Yahei", "SimSun", "NSimSun", "SimHei", "LiSu", "YouYuan", "KaiTi", "FangSong"],
	        osFonts = ["inherit", "Microsoft Yahei", "STSong", "Songti SC", "STHeiti", "STLiti", "YouYuan", "STKaiti", "STFangsong"]

	    return (isWindows ? winFonts : osFonts)[index]
	}

	render() {
		const {
			hrmStaffCareReminder,
			wrapperStyle
		} = this.props, {
			picture,
			formElements,
			tab,
		} = hrmStaffCareReminder, {
			selectedid,
			defaultImg = "/images_face/ecologyFace_1/BirthdayFace/1/BirthdayBg_3_wev8.jpg",
			index,
		} = picture, {
			form,
			fontFamilys,
		} = formElements, {
			selectedKey
		} = tab;

		const {
			greetings2,
			showtitle2,
			greColor,
			colColor,
			entryCongrats,
			entryCongratsColor,
			entryFont,
			entryFontSize,
		} = form.getFormParams();

		let greetings, greetingsStyle;

		if (selectedKey === '0') {
			greetings = greetings2;
			greetingsStyle = {
				position: 'absolute',
				top: 125,
				left: '5%',
				color: greColor
			};
		} else {
			greetings = entryCongrats;

			//祝词高度
			const ulheight = parseInt(entryFontSize) * 1.5 * greetings.split('\n').length;

			const top = (330 - ulheight) / 2;

			greetingsStyle = {
				position: 'absolute',
				top,
				width: '100%',
				padding: '0 5%',
				// textAlign: 'center',
				color: entryCongratsColor,
				fontSize: parseInt(entryFontSize),
			};
		}

		const width = (selectedKey === '0') ? 475 : 700;

		const height = (selectedKey === '0') ? 500 : 330;

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@vtls34`}
	            label={getLabel(221, '预览')}
	            labelCol={{span: 6}}
	            wrapperCol={{span: 18}}
	            style={wrapperStyle}
          	>
          		<div style={{width,height,position:'relative',overflow: 'hidden'}}>
          			<img src={addContentPath(index === 0 ? defaultImg : `/weaver/weaver.file.FileDownload?fileid=${selectedid}`)} style={{width: '100%',height: '100%',borderRadius: 5}} alt={getLabel(221, '预览')}/>
          			<div style={greetingsStyle}>
          				<pre style={{fontFamily:`${this.getFontFamliy(parseInt(entryFont))},Consolas,Menlo,Courier,monospace`}}>{greetings}</pre>
          			</div>
          			{showtitle2 && <p style={{position: 'absolute',width:'100%', bottom: 40,left: '5%',color: colColor}}>
          				{this.getShowFields(showtitle2)}
          			</p>}
          		</div>
          	</WeaFormItem>
		)
	}
}

export default PreView