import {
	observer
} from 'mobx-react';
import {
	WeaLocaleProvider,
} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

import Section from './Section.js';
import Rule23th from './Rule23th.js';
import AddButton from '../../public/valhalla/components/AddButton.js';

@observer
export default class Rules23th extends React.Component {
	render() {
		const {
			store,
		} = this.props, {
			detailRule,
			isEnable,
			handle23thAddButtonClick,
			isDistributeModeDisabled,
		} = store;

		return (
			<div className='balance-payment'>
				<Section ecId={`${this && this.props && this.props.ecId || ''}_Section@u32n0v`} store={store} />
				{
					detailRule.map((rule,index) => {
						const {
							timePoint,
							amount
						} = rule;

						return (
							<Rule23th ecId={`${this && this.props && this.props.ecId || ''}_Rule23th@sum4g6@${index}`} 
								store={store}
								amount={amount}
								timePoint={timePoint}
								index={index}
							/>
						)
					})
				}
				{
					!isDistributeModeDisabled && (
						<AddButton ecId={`${this && this.props && this.props.ecId || ''}_AddButton@ozfugw`} label={getLabel('505555',"添加规则")} onClick={()=>handle23thAddButtonClick()}/>
					)
				}
			</div>
		);
	}
}