import {
	observer
} from 'mobx-react';
import {
	WeaLocaleProvider,
} from 'ecCom';
import { Collapse } from 'antd';
import Rules6th from './Rules6th.js';

const { Panel } = Collapse;
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Rules6thPanel extends React.Component {
	render() {
		const {
			store
		} = this.props, {
			legalCols,
			welfareCols,
			legalRule,
			welfareRule,
			legalKey,
			welfareKey,
		} = store;

		return (
			<div className='compose-balance-payment'>
				 <Collapse ecId={`${this && this.props && this.props.ecId || ''}_Collapse@01qer1`}>
				 	<Panel ecId={`${this && this.props && this.props.ecId || ''}_Panel@gdrlxi`} header={getLabel('505556', "法定年假")} key="1">
				      <Rules6th ecId={`${this && this.props && this.props.ecId || ''}_Rules6th@85c4ft`} 
				      	colNames={legalCols}
				      	rules={legalRule}
				      	store={store}
				      	selectedKey={legalKey}
				      	type='legal'
				      />
				    </Panel>
				    <Panel ecId={`${this && this.props && this.props.ecId || ''}_Panel@989fop`} header={getLabel('505557', "福利年假")} key="2">
				      <Rules6th ecId={`${this && this.props && this.props.ecId || ''}_Rules6th@w5vrty`} 
				      	colNames={welfareCols}
				      	rules={welfareRule}
				      	store={store}
				      	selectedKey={welfareKey}
				      	type='welfare'
				      />
				    </Panel>
				 </Collapse>
			</div>
		);
	}
}