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 GroupList extends Component{
    render(){
        const {store} = this.props;
        const {setDomRef,radioGroupConfig, showRadioGroup} = store;
        const displayClassName = classnames({
            radioGroupShow: true,
            radioGroupHide: !showRadioGroup
        })
        const iconClassName = classnames({
            'icon-coms-down-001': !showRadioGroup,
            'icon-coms-up-001': showRadioGroup
        })

        const label = showRadioGroup ? getLabel(547233,'隐藏条件') : getLabel(547232,'显示条件');

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