import '../../style/matrixFieldSetting.less';
import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	Spin
} from 'antd';
import FieldItem from './FieldItem';
import {
	i18n
} from '../../public/i18n';
import * as mobx from 'mobx';
import {
	getColumIndex
} from '../../util/index';

@inject("hrmMatrixFieldSetting")
@observer
export default class MatrixFieldSetting extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		const {
			hrmMatrixFieldSetting: store,
			matrix,
			rootStore
		} = this.props;
		store.setRootStore(rootStore);
		rootStore.dialogParams.visible && store.initData(matrix);
	}

	componentWillReceiveProps(nextProps) {
		const {
			hrmMatrixFieldSetting: store,
			matrix,
			rootStore
		} = nextProps;
		store.setRootStore(rootStore);
		rootStore.dialogParams.visible && store.initData(matrix);
	}

	render() {
		const {
			hrmMatrixFieldSetting: store,
		} = this.props;
		const {
			refreshData,
			dataList,
			loading
		} = store;
		const {
			condition,
			val
		} = dataList;

		return (
			<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@2wjma8`} spinning={loading}>
				<div className='matrixFieldSetting'>
					{
						condition.map((record, index) => {
							return <FieldItem ecId={`${this && this.props && this.props.ecId || ''}_FieldItem@m5g42m@${index}`} store={store} record={{...record, colIndex: getColumIndex(index)}}/>
						})
					}
					{
						val.map((record, index) => {
							return <FieldItem ecId={`${this && this.props && this.props.ecId || ''}_FieldItem@w035it@${index}`} store={store}  record={{...record, colIndex: getColumIndex(condition.length + index)}}/>
						})
					}
				</div>
			</Spin>
		);
	}
}