import React from 'react'
import { connect } from 'dva'
import { Collapse, Form, Checkbox, Select, Radio } from 'antd'
import ColorPicker from '../../../common/colorPicker/index'
import './bar.less'

class BarStyle 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 { formItemLayout, backgroundColor, colors } = this.state;
        const { chartDesigner, dispatch } = this.props;
        const { styleConfig } = chartDesigner;
        const bar = styleConfig.bar || {};

        return (
            <Collapse className='collapse-bar-style' defaultActiveKey={['chart', 'legend', 'color']}>
                <Collapse.Panel className='chart' header='基本配置' key='chart'>
                    <Form>
                        <Form.Item label='背景' {...formItemLayout}>
                            <ColorPicker placeholder={'#ffffff'} value={backgroundColor} onChange={v => {
                                this.setState({
                                    backgroundColor: v
                                }, () => {
                                    window.clearTimeout(this.backgroundColorKey);
                                    this.backgroundColorKey = window.setTimeout(() => {
                                        dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: {
                                            ...styleConfig,
                                            bar: { ...bar, backgroundColor: v }
                                        } });
                                    }, 200);
                                });
                            }}/>
                        </Form.Item>
                        <Form.Item label='主题' {...formItemLayout}>
                            { colors.map((c, i) => <ColorPicker key={i} value={colors[i]} onChange={v => {
                                colors[i] = v
                                this.setState({
                                    colors,
                                }, () => {
                                    window.clearTimeout(this['colors-' + i + '-key']);
                                    this['colors-' + i + '-key'] = window.setTimeout(() => {
                                        dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: {
                                            ...styleConfig,
                                            bar: { ...bar, colors: colors }
                                        } });
                                    }, 200);
                                });
                            }}/>) }
                            <div class="colors-control"><a onClick={() => {
                                
                            }}>增加</a><a>减少</a></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);