import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaEchart,
} from 'ecCom'
import {
	i18n
} from '../../public/i18n';

@inject('hrmLimitedAnalysis')
@observer
export default class Echarts extends React.Component {
	constructor(props) {
		super(props);
		this.lineChart = null;
		this.barChart = null;
		this.setLineChartRef = element => {
			this.lineChart = element;
		}
		this.setBarChartRef = element => {
			this.barChart = element;
		}
		const _this = this;
		window.onresize = function() {
			_this.lineChart && _this.lineChart.chart.resize();
			_this.barChart && _this.barChart.chart.resize();
		}
	}

	componentWillReceiveProps(nextProps) {
		let preChart = toJS(this.props.hrmLimitedAnalysis.echart),
			changedChart = toJS(nextProps.hrmLimitedAnalysis.echart),

			preLineOption = preChart.lineOption,
			changedLineOption = changedChart.lineOption,

			preBarOption = preChart.barOption,
			changedBarOption = changedChart.barOption;

		if (preLineOption !== changedLineOption) {
			this.lineChart && this.lineChart.paint();
		}
		if (preBarOption !== changedBarOption) {
			this.barChart && this.barChart.paint();
		}
	}

	render() {
		const {
			hrmLimitedAnalysis
		} = this.props, {
			key,
			echart,
			isEmptyObject
		} = hrmLimitedAnalysis, {
			lineOption,
			barOption,
		} = echart;

		return (
			<div>
				{!isEmptyObject(lineOption) &&  <div style={{margin: 20, paddingBottom: 10, height: 300,border: '1px solid #DDD',marginTop: 0}}>
						    					    <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@1fc2r7`} option={toJS(lineOption)} useDefault={false} ref={this.setLineChartRef}/>
											    </div>}
				{!isEmptyObject(barOption) &&   <div style={{margin: 20, paddingBottom: 10, height: 300,border: '1px solid #DDD',marginTop: 0}}>
													<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@oj7gar`} option={toJS(barOption)} useDefault={false} ref={this.setBarChartRef}/>
												</div>}
			</div>


		)
	}
}