import React from 'react'
import { connect } from 'dva'
import { InputNumber, Form, Select, Checkbox, Tooltip, Divider } from 'antd'
import { deepAssign } from '../../../../utils/baseUtils'
import EChartsMedia from '../../../../models/EChartsMedia'
const FormItem = Form.Item

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

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

        return <Form>
            <Divider>标注</Divider>
            <Form.Item label='标注符号' {...formItemLayout}>
                <Select
                    defaultValue={scatterStyle.labelSymbol || 'circle'}
                    onChange={(value, item) => {
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { labelSymbol: value } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    symbol: value
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                >
                    <Select.Option value='circle'>圆</Select.Option>
                    <Select.Option value='emptyCircle'>空心圆</Select.Option>
                    <Select.Option value='rect'>方块</Select.Option>
                    <Select.Option value='roundRect'>圆角方块</Select.Option>
                    <Select.Option value='triangle'>三角形</Select.Option>
                    <Select.Option value='diamond'>菱形</Select.Option>
                    <Select.Option value='pin'>指针</Select.Option>
                    <Select.Option value='arrow'>箭头</Select.Option>
                    <Select.Option value='none'>无</Select.Option>
                </Select>
            </Form.Item>
            {scatterStyle.labelSymbol !== 'none' && <Form.Item label='标注符号大小' {...formItemLayout}>
                <InputNumber
                    defaultValue={scatterStyle.labelSymbolSize}
                    placeholder={10}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { labelSymbolSize: value } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    symbolSize: (value === '' || value === null || value === undefined) ? 10 : Number(value)
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                    onKeyDown={e => {
                        if(e.keyCode === 13) {
                            let value = e.target.value;
                            let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { labelSymbolSize: value } }) }];
                            if(!!chartOption.baseOption) {
                                let seriesArr = [];
                                for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                    seriesArr.push({
                                        symbolSize: (value === '' || value === null || value === undefined) ? 10 : Number(value)
                                    });
                                }
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </Form.Item>}
            <Divider>横轴名称</Divider>
            <FormItem label={<Tooltip title="名称相对横轴显示位置">位置</Tooltip>} {...formItemLayout}>
                <Select
                    defaultValue={scatterStyle.xNameLocation || 'end'}
                    onChange={(value, item) => {
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xNameLocation: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: { 
                                nameLocation: (value === '' || value === null || value === undefined) ? 'end' : value
                             }} } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                >
                    <Select.Option value='start'>头部</Select.Option>
                    <Select.Option value='center'>中间</Select.Option>
                    <Select.Option value='end'>尾部</Select.Option>
                </Select>
            </FormItem>
            <FormItem label={<Tooltip title="横轴名称与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(scatterStyle.xNameGap === '' || scatterStyle.xNameGap === null || scatterStyle.xNameGap === undefined) ? null : scatterStyle.xNameGap}
                    placeholder={15}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xNameGap: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
                            } } } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                    onKeyDown={e => {
                        if(e.keyCode === 13) {
                            let value = e.target.value;
                            let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xNameGap: value } }) }];
                            if(!!chartOption.baseOption) {
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                    nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
                                } } } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            <FormItem label={<Tooltip title="横轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(scatterStyle.xNameRotate === '' || scatterStyle.xNameRotate === null || scatterStyle.xNameRotate === undefined) ? null : scatterStyle.xNameRotate}
                    placeholder={0}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xNameRotate: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
                            } } } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                    onKeyDown={e => {
                        if(e.keyCode === 13) {
                            let value = e.target.value;
                            let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xNameRotate: value } }) }];
                            if(!!chartOption.baseOption) {
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                    nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
                                } } } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            <Divider>纵轴名称</Divider>
            <FormItem label={<Tooltip title="名称相对纵轴显示位置">位置</Tooltip>} {...formItemLayout}>
                <Select
                    defaultValue={scatterStyle.yNameLocation || 'end'}
                    onChange={(value, item) => {
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yNameLocation: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: { 
                                nameLocation: (value === '' || value === null || value === undefined) ? 'end' : value,
                             }} } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                >
                    <Select.Option value='start'>头部</Select.Option>
                    <Select.Option value='center'>中间</Select.Option>
                    <Select.Option value='end'>尾部</Select.Option>
                </Select>
            </FormItem>
            <FormItem label={<Tooltip title="纵轴名称与纵轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(scatterStyle.yNameGap === '' || scatterStyle.yNameGap === null || scatterStyle.yNameGap === undefined) ? null : scatterStyle.yNameGap}
                    placeholder={15}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yNameGap: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
                            } } } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                    onKeyDown={e => {
                        if(e.keyCode === 13) {
                            let value = e.target.value;
                            let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yNameGap: value } }) }];
                            if(!!chartOption.baseOption) {
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                    nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
                                } } } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            <FormItem label={<Tooltip title="纵轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(scatterStyle.yNameRotate === '' || scatterStyle.yNameRotate === null || scatterStyle.yNameRotate === undefined) ? null : scatterStyle.yNameRotate}
                    placeholder={0}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yNameRotate: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
                            } } } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                    onKeyDown={e => {
                        if(e.keyCode === 13) {
                            let value = e.target.value;
                            let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yNameRotate: value } }) }];
                            if(!!chartOption.baseOption) {
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                    nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
                                } } } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            <Divider>区域缩放</Divider>
            <FormItem label='启用' {...formItemLayout}>
                <Checkbox
                    checked={!!scatterStyle.dataZoomVisible}
                    onChange={e => {
                        let checked = e.target.checked;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { dataZoomVisible: checked } }) }];
                        if(!!chartOption.baseOption) {
                            let legendVisible = chartOption.baseOption.legend ? chartOption.baseOption.legend.show : false;
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, {
                                baseOption: { dataZoom: { show: checked } },
                                media: EChartsMedia('scatter', legendVisible, checked)
                            }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                />
            </FormItem>
        </Form>
    }
}

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