import React from 'react';
import {
	observer,
	inject
} from 'mobx-react';
import {
	AlertPage,
	Loading,
} from '../../public/learn';

import Top from './Top';
import Dialog from './Dialog';
import {Dialog as DemoDialog} from '../../public/valhalla/components/index.js'
import {addContentPath} from '../../util/index.js'
import '../../style/overtimeRule.less'

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

	componentDidMount() {
		this.init()
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.props.hrmOvertimeRule.refreshPage();
		}
	}

	init = () => {
		['refreshPage', 'getPermissionInfo'].map(f => {
			this.props.hrmOvertimeRule[f]();
		});
	}

	render() {
		const {
			hrmOvertimeRule
		} = this.props, {
			pageAccessPermission,
			overtimeRuleFormStore:{dialogStore,demonstration}
		} = hrmOvertimeRule, {
			hasRight,
			loading
		} = pageAccessPermission;

		if (!hasRight) {
			return loading ? <Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@38jxlw`} size='lg'/> : <AlertPage ecId={`${this && this.props && this.props.ecId || ''}_AlertPage@12x3fc`} />
		} else {
			return (
				<div>
					<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@9oztsv`} />
					<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@0q9i8u`} />
					<DemoDialog ecId={`${this && this.props && this.props.ecId || ''}_DemoDialog@eebr2t`} store={dialogStore}>
						{demonstration.map(data => {
							const {title,desc} = data

							return (
								<div className='otrDemo'>
									<div className='otrDemo-title'>{title}</div>
									{ desc.map(d => {
										if (/\.jpg$/.test(d)) {
											return (
												<img src={addContentPath(d)} alt=""/>
											)
										}else{
											return <p>{d}</p>
										}
									}) }
								</div>
							)
						})}
					</DemoDialog>
				</div>

			)
		}
	}
}

export default OvertimeRule