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

@observer
export default class Info extends Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: true
        }
    }
    render () {
        const { store } = this.props;
        const { radioGroupConfig, onRadioGroupChange, onClickHandle, showhideFlag } = store;
        const displayClassName = classnames({
            radioGroupShow: true,
        })
        const icon = classnames({
            'icon-coms-down-001': !(showhideFlag),
            'icon-coms-up-001': showhideFlag
        })
        const label = showhideFlag ? getLabel(517204, '隐藏条件') : getLabel(19496, '显示条件')
        return (
            <div className='info'>
                <div className={displayClassName} onClick={onClickHandle} >
                    <span>{label}</span>
                    <span>
                        <i className={icon} />
                    </span>
                </div>
                <div style={{ display: showhideFlag ? 'block' : 'none' }}>
                    <WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@4tg9fz`} config={radioGroupConfig} onChange={onRadioGroupChange} />
                </div>
                <GroupEdit ecId={`${this && this.props && this.props.ecId || ''}_GroupEdit@ysvuge`} store={store} />
            </div>
        )
    }
}