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

@observer
export default class SearchGroup extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { store } = this.props;
        const { radioGroupConfig, onRadioGroupChange, showDailyRadioGroup,setDomRef } = store;
        const displayClassName = classnames({
            radioGroupShow: true,
            radioGroupHide: !showDailyRadioGroup
        })
        const iconClassName = classnames({
            'icon-coms-down-001': !showDailyRadioGroup,
            'icon-coms-up-001': showDailyRadioGroup
        })
        const label = showDailyRadioGroup ? getLabel('517204', '隐藏条件') : getLabel('19496', '显示条件');
        return (

            <div className='searchGroup' ref={dom =>setDomRef(dom, 'tab')}>
                <div  className={displayClassName} onClick={() => store.showDailyRadioGroup = !showDailyRadioGroup}>
                    <span>{label}</span>
                    <span> 
                        <i className={iconClassName} />
                    </span>
                </div>
                <div style={{  display: showDailyRadioGroup ? 'block' : 'none'}} >
                    <WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@vgfj7p`} config={radioGroupConfig} onChange={onRadioGroupChange} />
                </div>
            </div>

        )
    }
}