import React from 'react'
import { Form, Divider, Checkbox } from 'antd'
import { connect } from 'dva'
import { deepAssign } from '../../../../utils/baseUtils'

class PieStyleConfig 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 pieStyle = styleConfig.pie || {};

        return <Form>
            <Divider>标注</Divider>
            <Form.Item label='隐藏' {...formItemLayout}>
                <Checkbox
                    checked={!!pieStyle.labelHidden}
                    onChange={e => {
                        let checked = e.target.checked;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { pie: { labelHidden: checked } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: { 0: {
                                label: { normal: { show: !checked } },
                                labelLine: { normal: { show: !checked } },
                                avoidLabelOverlap: !checked,
                            } } } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                />
            </Form.Item>
        </Form>
    }
}

export default connect(({ chartDesigner }) => ({ chartDesigner }))(PieStyleConfig)