import React from 'react'
import { connect } from 'dva'
import { Collapse, 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 },
            },
            backgroundColor: '#ffffff', // 背景
            markTextColor: '#eeeeee', // 标签文字
            colors: [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#91c7ae",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3"
            ], // 主题
        }
    }

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

        return <Form>
            <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 || 'vertical'}
                >
                    <Radio value='vertical'>垂直</Radio>
                    <Radio value='horizontal'>水平</Radio>
                </Radio.Group>
            </FormItem>
        </Form>
    }
}

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