import {
	observer
} from 'mobx-react';
import {
	WeaSelect,
	WeaLocaleProvider,
} from 'ecCom';
import Rule6th from './Rule6th.js';

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

const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Rules6th extends React.Component {
	render() {
		const {
			store,
			colNames,
			rules,
			type,
			selectedKey,
		} = this.props, {
			ruleOptions,
			handleRuleSelectChange,
			handle6thAddButtonClick,
			isDistributeModeDisabled
		} = store;

		return (
			<div>
				<div className='rule-select'>
					<span>{`${getLabel(126876,'规则设置')}: `}</span>
					<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@o2x077`} 
						options={ruleOptions}
						value={selectedKey}
						disabled={isDistributeModeDisabled}
						onChange={key=>handleRuleSelectChange(key,type)}
					/>
				</div>
				<p className='header'>
					{colNames.map(colName=>{
						return (
							<span style={{width:`${100/colNames.length}%`}}>
								<i className='icon-coms-Tile' />
								<span>{colName}</span>
							</span>
						)
					})}
				</p>
				<div className='rules'>
				{
					rules.map( (rule,index)=>{
						return (
							<Rule6th ecId={`${this && this.props && this.props.ecId || ''}_Rule6th@5fb1na@${index}`} rule={rule} index={index} store={store} type={type} rulesLength={rules.length}/>
						)
					})
				}
				</div>
				{
					!isDistributeModeDisabled && (
						<AddButton ecId={`${this && this.props && this.props.ecId || ''}_AddButton@uxx2pk`} label={getLabel('505555',"添加规则")} onClick={()=>handle6thAddButtonClick(type)}/>
					)
				}
			</div>
		);
	}
}