import React from 'react'
import { Checkbox, Row, Col } from 'antd'
import classNames from 'classnames'

import Styles from './styles.less';

const DataDict = [
    {
        label: '首页',
        value: 'index',
    },
    {
        label: '助力页',
        value: 'help',
    },
    {
        label: '活动规则页',
        value: 'rule',
    },
]

export default props => {
    const { value, onChange } = props;
    const vals = (value || '').split(',');
    const handleChange = e => {
        onChange(e.join(','));
    }

    return (
        <Checkbox.Group className={Styles.Checkboxs} onChange={handleChange} style={{ width: '100%' }} value={vals}>
            <Row>
                {
                    DataDict.map(item => {
                        const key = item.value;
                        return (
                            <Col span={6} key={key}>
                                <Checkbox className={classNames({ [Styles.CheckboxStytle]: vals.indexOf(item.value) > -1 })} value={item.value} >{item.label}</Checkbox>
                            </Col>
                        );
                    })
                }
            </Row>
        </Checkbox.Group>
    );

}
