import React from 'react'
import { connect } from 'dva'
import { Divider, Form, Radio } from 'antd'
import './bar.less'

const FormItem = Form.Item;

class AggregateTable extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {
            formItemLayout: {
                labelCol: { span: 8 },
                wrapperCol: { span: 16 },
            },
        }
    }

    render() {
        const { chartDesigner, dispatch } = this.props;
        const { formItemLayout } = this.state;
        const { styleConfig, chartOption } = chartDesigner;
        const aggregateTableStyle = styleConfig.aggregateTable || {};

        return <Form>
            <Divider>布局</Divider>
            <FormItem label='排布方向' {...formItemLayout}>
                <Radio.Group onChange={e => {
                    let value = e.target.value;
                    dispatch({ type: 'chartDesigner/setFields', fields: [
                        { name: 'styleConfig', value: { ...styleConfig, aggregateTable: { ...aggregateTableStyle, direction: value } } },
                        { name: 'chartOption', value: { ...chartOption, direction: value } },
                    ] });
                }}
                    defaultValue={aggregateTableStyle.direction || 'horizontal'}
                >
                    <Radio value='vertical'>垂直</Radio>
                    <Radio value='horizontal'>水平</Radio>
                </Radio.Group>
            </FormItem>
        </Form>
    }
}

export default connect(({ chartDesigner }) => ({ chartDesigner }))(AggregateTable);