import '../style/resourceIndex.less';
import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop,
	WeaNewScroll
} from 'ecCom';
import {Row, Col} from 'antd';
import {
	i18n
} from '../public/i18n';

@inject('hrmResourceIndex')

@observer
export default class ResourceIndex extends Component {
	constructor(props) {
		super(props);
		this.state = {
			bgColor: [
				'#4CA0DC',
				'#67B3E2',
				'#88C6E4',
				'#AED8F0',
				'#D6EBF7'
			]
		}
	}

	componentDidMount() {
		this.init();
	}

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

	init = () => {
		const {
			hrmResourceIndex: store
		} = this.props;
		const {
			initData
		} = store;
		initData();
	}

	renderOrgAndAuthAnalysis = (rs) => {
		let children = [];
		rs.map((r, i) => {
			children.push(
				<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zax8as@${i}`} span={12} className={i == 0 ? 'org' : 'auth'}>
					<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@v535of@${i}`} className='title'>
						<div className='titleIcon'><span className={i == 0 ? 'icon-coms-hrm' : 'icon-coms-locking'}/></div>
						<div>{r.title}</div>
					</Row>
					<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@90wash@${i}`} className='list'>
						{
							r.items.map((item, i) => {
								return (
									<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3eids4@${i}`} span={8} className='item'>
										<div className='content'>
											<div>{item.name}</div>
											<div>{item.value}</div>
										</div>
									</Col>
								)
							})
						}
					</Row>
				</Col>
			)
		})
		return (
			<div className='analysis'>
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hrti9t`} gutter={48}>
					{children}
				</Row>
			</div>
		)
	}

	renderAdjustAnalysis = (rs) => {
		let children = [];
		rs.map((r, i) => {
			children.push(
				<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@n57h9x@${i}`} span={12} className={i == 0 ? 'orgAdjust' : 'authAdjust'}>
					<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ro1zsa@${i}`} className='title'>
						{r.title}
					</Row>
					<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@qkzu8n@${i}`} className='list'>
						<div className='line'/>
						{
							r.items.map((item, i) => {
								return (
									<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@80b3a1@${i}`} className='chart'>
										<div className={i == 0 ? 'chartBullets0' : 'chartBullets'}></div>
										<div className='opdate'>{item.opdate}</div>
										<div className='percent'>
											{
												item.value === 0 
												?
												<div>{i18n.message.recordNotFound()}</div>
												:
												<div className='progress' title={item.value} style={{width: item.progress != null ? `${item.progress}%` : '0%', backgroundColor: this.state.bgColor[i]}}>&nbsp;</div>
											}
										</div>
									</Row>
								)
							})
						}
					</Row>
				</Col>
			)
		})
		return (
			<div className='analysis'>
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@vhtsm9`} gutter={48}>
					{children}
				</Row>
			</div>
		)
	}

	render() {
		const {
			hrmResourceIndex: store
		} = this.props;
		const {
			result,
			i18nLoaded
		} = store;
		const topProps = {
			title: i18n.module.orgAndAuthCenter(),
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			showDropIcon: true,
			dropMenuDatas: []
		}
		return (
			<div className="hrm_module_container resourceIndex">
				<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ivguvg`} {...topProps}>
					{
						result.length > 0 
						&&
						<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@fgh4nn`} height={'100%'}>
							{
								result.map((rs, i) => {
									return i == 0 ? this.renderOrgAndAuthAnalysis(rs) : this.renderAdjustAnalysis(rs);
								})
							}
						</WeaNewScroll>
					}
				</WeaTop>
			</div>
		)
	}
}