import {
	inject,
	observer
} from 'mobx-react';
import {
	toJS
} from 'mobx';
import {
	WeaRadioGroup
} from 'ecCom';
import jquery from 'jquery';
import { WeaLocaleProvider } from 'ecCom';
import classnames from 'classnames';
const getLabel = WeaLocaleProvider.getLabel;

@inject('hrmVacationBalanceReportCopy')
@observer
export default class RadioGroup extends React.Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		const {
			hrmVacationBalanceReportCopy: store
		} = this.props;

		const {
			getRadioGroupConfig,
			chainCall,
		} = store;

		getRadioGroupConfig(chainCall);

	}

	componentDidUpdate(prevProps, prevState) {
		const {
			hrmVacationBalanceReportCopy: store,

		} = this.props;
		const {
			setRgHeight
		} = store;

		setRgHeight(jquery('.wea-radio-group').height());
	}

	render() {
		const {
			radioGroup,
			setRef,
			exportActiveParams,
			showVacRadioGroup,
			setDomRef
		} = this.props.hrmVacationBalanceReportCopy, {
			config
		} = radioGroup;

		const displayClassName = classnames({
			radioGroupShow: true,
			radioGroupHide: !showVacRadioGroup
		})
		const iconClassName = classnames({
			'icon-coms-down-001': !showVacRadioGroup,
			'icon-coms-up-001': showVacRadioGroup
		})
		const label = showVacRadioGroup ? getLabel('517204', '隐藏条件') : getLabel('19496', '显示条件');



		return (
			<div className='searchGroup' ref={dom => setDomRef(dom, 'tab')}>
				<div className={displayClassName} onClick={() => this.props.hrmVacationBalanceReportCopy.showVacRadioGroup = !showVacRadioGroup}>
					<span>{label}</span>
					<span>
						<i className={iconClassName} />
					</span>
				</div>
				<div style={{ display: showVacRadioGroup ? 'block' : 'none' }}>
					{config.length > 0 && <WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@el0b21`} config={config} ref={ref => setRef(ref, 'rg')} onChange={params => exportActiveParams(params)} />}
				</div>
			</div>



		)
	}
}