import React from 'react'
import { connect } from 'dva'
import { Collapse, 
    // Menu,
    Form, Checkbox, Select, Radio } from 'antd'
// const SubMenu = Menu.SubMenu;
// const MenuItemGroup = Menu.ItemGroup;

class BarStyle extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {
            layoutColumn: null,
            formatColumn: null,
            colorColumn: null,
        }
    }

    render() {
        const { chartDesigner, formItemLayout, dispatch } = this.props;
        // const { layoutColumn, formatColumn, colorColumn } = this.state;
        const { styleConfig } = chartDesigner;
        const { bar } = (styleConfig || {  });

        return (
            <Collapse defaultActiveKey={['chart', 'legend', 'color']}>
                <Collapse.Panel className='chart' header='图形' key='chart'>
                    <Form>
                        <Form.Item label='类型' {...formItemLayout}>
                            <Select defaultValue='default' onChange={(value) => {
                                const stack = value === 'stack';
                                dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, bar: { ...bar, stack }} });
                            }}>
                                <Select.Option value='default'>标准</Select.Option>
                                <Select.Option value='stack'>堆叠</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label='显示ToolTip' {...formItemLayout}>
                            <Checkbox onChange={(e) => {
                                const checked = e.target.checked;
                                dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, bar: { ...bar, visibleToolTip: checked }} });
                            }}/>
                        </Form.Item>
                        <Form.Item label='显示标签' {...formItemLayout}>
                            <div>
                                <Checkbox defaultChecked={false} onChange={(e) => {
                                    // const checked = e.target.checked;
                                    // dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, table: { ...table, bordered: checked }} });
                                }}/>
                                <Select onChange={null} >
                                    <Select.Option value='left'>内部</Select.Option>
                                    <Select.Option value='center'>外部</Select.Option>
                                </Select>
                            </div>
                        </Form.Item>
                    </Form>
                </Collapse.Panel>
                <Collapse.Panel header='图例' key='legend'>
                    <Form>
                        <Form.Item label='显示' {...formItemLayout}>
                            <Checkbox onChange={(e) => {
                                    // const checked = e.target.checked;
                                    // dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, table: { ...table, bordered: checked }} });
                                }}/>
                        </Form.Item>
                        <Form.Item label='位置' {...formItemLayout}>
                            <Select>
                                <Select.Option value='top'>顶部</Select.Option>
                                <Select.Option value='left'>左侧</Select.Option>
                                <Select.Option value='bottom'>右侧</Select.Option>
                                <Select.Option value='right'>底部</Select.Option>
                            </Select>
                        </Form.Item>
                    </Form>
                </Collapse.Panel>
                <Collapse.Panel header='颜色' key='color'>
                    <Form>
                        <Form.Item label='交替色' {...formItemLayout}>
                            <Radio.Group>
                                <Radio value={1}>行交替</Radio>
                                <Radio value={2}>列交替</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Form>
                </Collapse.Panel>
            </Collapse>
        )
    }
}

export default connect(({ present: { chartDesigner } }) => ({ chartDesigner }))(BarStyle);