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

class LineStyle 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, lineConfig } = chartDesigner;
        const { groupBy } = lineConfig;
        const lineStyle = styleConfig.line || {};

        return <Form>
            <Divider>线条</Divider>
            <FormItem label='平滑线条' {...formItemLayout}>
                <Checkbox
                    checked={!!lineStyle.lineSmooth}
                    onChange={e => {
                        let checked = e.target.checked;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { lineSmooth: checked } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    smooth: checked
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                />
            </FormItem>
            <Divider>标注</Divider>
            {lineStyle.labelSymbol !== 'none' && <FormItem label='显示标注文本' {...formItemLayout}>
                <Checkbox
                    checked={!!lineStyle.labelVisible}
                    onChange={e => {
                        let checked = e.target.checked;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelVisible: checked } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    label: { normal: { show: checked } },
                                    labelLine: { normal: { show: checked } },
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                />
            </FormItem>}
            {!!lineStyle.labelVisible && <Form.Item label='位置' {...formItemLayout}>
                <Select
                    defaultValue={lineStyle.labelPosition || 'inside'}
                    onChange={(value, item) => {
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelPosition: value } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    label: { normal: { position: value } }
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                >
                    <Select.Option value='top'>外上</Select.Option>
                    <Select.Option value='left'>外左</Select.Option>
                    <Select.Option value='right'>外右</Select.Option>
                    <Select.Option value='bottom'>外下</Select.Option>
                    <Select.Option value='inside'>内中</Select.Option>
                    {/** 不知为何下面这些是反的 */}
                    <Select.Option value='insideRight'>内左</Select.Option>
                    <Select.Option value='insideLeft'>内右</Select.Option>
                    <Select.Option value='insideBottom'>内上</Select.Option>
                    <Select.Option value='insideTop'>内下</Select.Option>
                    <Select.Option value='insideBottomRight'>内上左</Select.Option>
                    <Select.Option value='insideTopRight'>内下左</Select.Option>
                    <Select.Option value='insideBottomLeft'>内上右</Select.Option>
                    <Select.Option value='insideTopLeft'>内下右</Select.Option>
                </Select>
            </Form.Item>}
            {!!lineStyle.labelVisible && <FormItem label={<Tooltip title="标注相对设置位置方向的距离">位置距离</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(lineStyle.labelDistance === '' || lineStyle.labelDistance === null || lineStyle.labelDistance === undefined) ? null : lineStyle.labelDistance}
                    placeholder={5}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelDistance: value } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    label: {
                                        normal: { distance: (value === '' || value === null || value === undefined) ? 5 : 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, { line: { labelDistance: value } }) }];
                            if(!!chartOption.baseOption) {
                                let seriesArr = [];
                                for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                    seriesArr.push({
                                        label: {
                                            normal: { distance: (value === '' || value === null || value === undefined) ? 5 : Number(value) }
                                        }
                                    });
                                }
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>}
            {!!lineStyle.labelVisible && <FormItem label={<Tooltip title="标注旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(lineStyle.labelRotate === '' || lineStyle.labelRotate === null || lineStyle.labelRotate === undefined) ? null : lineStyle.labelRotate}
                    placeholder={0}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelRotate: value } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    label: {
                                        normal: { rotate: (value === '' || value === null || value === undefined) ? 0 : 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, { line: { labelRotate: value } }) }];
                            if(!!chartOption.baseOption) {
                                let seriesArr = [];
                                for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                    seriesArr.push({
                                        label: {
                                            normal: { rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value) }
                                        }
                                    });
                                }
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>}
            <Form.Item label='标注符号' {...formItemLayout}>
                <Select
                    defaultValue={lineStyle.labelSymbol || 'emptyCircle'}
                    onChange={(value, item) => {
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { 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>
            {lineStyle.labelSymbol !== 'none' && <Form.Item label='标注符号大小' {...formItemLayout}>
                <InputNumber
                    defaultValue={lineStyle.labelSymbolSize}
                    placeholder={4}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { 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) ? 4 : 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, { line: { 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) ? 4 : 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={lineStyle.xNameLocation || 'end'}
                    onChange={(value, item) => {
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { 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={(lineStyle.xNameGap === '' || lineStyle.xNameGap === null || lineStyle.xNameGap === undefined) ? null : lineStyle.xNameGap}
                    placeholder={15}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { 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, { line: { 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={(lineStyle.xNameRotate === '' || lineStyle.xNameRotate === null || lineStyle.xNameRotate === undefined) ? null : lineStyle.xNameRotate}
                    placeholder={0}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { 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, { line: { 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}>
                <Checkbox
                    checked={lineStyle.xLabelHiddenCover === undefined ? true : lineStyle.xLabelHiddenCover}
                    onChange={e => {
                        let checked = e.target.checked;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { xLabelHiddenCover: checked } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                axisLabel: {
                                    interval: checked ? 'auto' : 0
                                }
                            } } } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                />
            </FormItem>
            <FormItem label={<Tooltip title="横轴标签与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(lineStyle.xLabelMargin === '' || lineStyle.xLabelMargin === null || lineStyle.xLabelMargin === undefined) ? null : lineStyle.xLabelMargin}
                    placeholder={8}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { xLabelMargin: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                axisLabel: {
                                    margin: (value === '' || value === null || value === undefined) ? 8 : 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, { line: { xLabelMargin: value } }) }];
                            if(!!chartOption.baseOption) {
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                    axisLabel: {
                                        margin: (value === '' || value === null || value === undefined) ? 8 : Number(value)
                                    }
                                } } } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            <FormItem label={<Tooltip title="横轴标签旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(lineStyle.xLabelRotate === '' || lineStyle.xLabelRotate === null || lineStyle.xLabelRotate === undefined) ? null : lineStyle.xLabelRotate}
                    placeholder={0}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { xLabelRotate: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                axisLabel: {
                                    rotate: (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, { line: { xLabelRotate: value } }) }];
                            if(!!chartOption.baseOption) {
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                    axisLabel: {
                                        rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
                                    }
                                } } } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            <Divider>纵轴名称</Divider>
            <FormItem label={<Tooltip title="名称相对纵轴显示位置">位置</Tooltip>} {...formItemLayout}>
                <Select
                    defaultValue={lineStyle.yNameLocation || 'end'}
                    onChange={(value, item) => {
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { 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={(lineStyle.yNameGap === '' || lineStyle.yNameGap === null || lineStyle.yNameGap === undefined) ? null : lineStyle.yNameGap}
                    placeholder={15}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { 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, { line: { 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={(lineStyle.yNameRotate === '' || lineStyle.yNameRotate === null || lineStyle.yNameRotate === undefined) ? null : lineStyle.yNameRotate}
                    placeholder={0}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { 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, { line: { 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>
            {!!groupBy && !!groupBy.key && <Divider>数据堆叠</Divider>}
            {!!groupBy && !!groupBy.key && <FormItem label='数据堆叠' {...formItemLayout}>
                <Checkbox
                    checked={!!lineStyle.stack}
                    onChange={e => {
                        let checked = e.target.checked;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { stack: checked } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    stack: checked
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                />
            </FormItem>}
            <Divider>区域缩放</Divider>
            <FormItem label='启用' {...formItemLayout}>
                <Checkbox
                    checked={!!lineStyle.dataZoomVisible}
                    onChange={e => {
                        let checked = e.target.checked;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { 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('line', legendVisible, checked)
                            }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                />
            </FormItem>
        </Form>
    }
}

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