import React from 'react'
import { Collapse, Form, Select, Divider, Row, Col, Tooltip, Input, Checkbox } from 'antd'
import { connect } from 'dva'
import { deepAssign } from '../../../../utils/baseUtils'
import themes from './theme/index'

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={<Tooltip title='支持设置为数字或百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度'>圆心坐标</Tooltip>} {...formItemLayout}>
                <Row>
                    <Col span={11}>
                        <Input
                            defaultValue={pieStyle.pieCenter ? pieStyle.pieCenter[0] : null}
                            placeholder='40%'
                            onBlur={e => {
                                let value = e.target.value;
                                dispatch({ type: 'chartDesigner/setFields', fields: [
                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { pieCenter: { 0: value } } }) },
                                    { name: 'chartOption', value: deepAssign(chartOption, { series: [ { center: { 0: value || '40%' } }] }) },
                                ] });
                            }}
                        />
                    </Col>
                    <Col span={2}></Col>
                    <Col span={11}>
                        <Input
                            defaultValue={pieStyle.pieCenter ? pieStyle.pieCenter[1] : null}
                            placeholder='50%'
                            onBlur={e => {
                                let value = e.target.value;
                                dispatch({ type: 'chartDesigner/setFields', fields: [
                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { pieCenter: { 1: value } } }) },
                                    { name: 'chartOption', value: deepAssign(chartOption, { series: [ { center: { 1: value || '50%' } }] }) },
                                ] });
                            }}
                        />
                    </Col>
                </Row>
            </Form.Item>
            <Form.Item label={<Tooltip title='支持设置为数字或百分比，设置成百分比时其值相对于可视区尺寸大小（容器高宽度较小值）'>半径</Tooltip>} {...formItemLayout}>
                <Row>
                    <Col span={11}>
                        <Input
                            defaultValue={pieStyle.pieRadius ? pieStyle.pieRadius[0] : null}
                            placeholder={0}
                            onBlur={e => {
                                let value = e.target.value;
                                dispatch({ type: 'chartDesigner/setFields', fields: [
                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { pieRadius: { 0: value } } }) },
                                    { name: 'chartOption', value: deepAssign(chartOption, { series: [ { radius: { 0: value || 0 } }] }) },
                                ] });
                            }}
                        />
                    </Col>
                    <Col span={2}></Col>
                    <Col span={11}>
                        <Input
                            defaultValue={pieStyle.pieRadius ? pieStyle.pieRadius[1] : null}
                            placeholder='75%'
                            onBlur={e => {
                                let value = e.target.value;
                                if(value !== (!!pieStyle.pieRadius ? pieStyle.pieRadius : '')) {
                                    dispatch({ type: 'chartDesigner/setFields', fields: [
                                        { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { pieRadius: { 1: value} } }) },
                                        { name: 'chartOption', value: deepAssign(chartOption, { series: [ { radius: { 1: value || '75%'} }] }) },
                                    ] });
                                }
                            }}
                        />
                    </Col>
                </Row>
            </Form.Item>
            <Row>
                <Col span={!!pieStyle.legendHidden ? 24 : 12}>
                    <Form.Item label='隐藏图例' labelCol={{ span: !!pieStyle.legendHidden ? 8 : 16 }} wrapperCol={{ span: !!pieStyle.legendHidden ? 16 : 8 }}>
                        <Checkbox
                            checked={!!pieStyle.legendHidden}
                            onChange={e => {
                                let checked = e.target.checked;
                                dispatch({ type: 'chartDesigner/setFields', fields: [
                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendHidden: checked } }) },
                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { show: !checked } }) },
                                ] });
                            }}
                        />
                    </Form.Item>
                </Col>
                {!pieStyle.legendHidden && <Col span={12}>
                    <Form.Item label='图例分页' labelCol={{ span: 16 }} wrapperCol={{ span: 8 }}>
                        <Checkbox
                            checked={!!pieStyle.legendInPagination}
                            onChange={e => {
                                let checked = e.target.checked;
                                dispatch({ type: 'chartDesigner/setFields', fields: [
                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendInPagination: checked } }) },
                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { type: checked ? 'scroll' : 'plain' } }) },
                                ] });
                            }}
                        />
                    </Form.Item>
                </Col>}
            </Row>
            {!pieStyle.legendHidden && <Form.Item label='图例排布方向' {...formItemLayout}>
                <Select
                    defaultValue={pieStyle.legendOrient || 'vertical'}
                    placeholder='vertical'
                    onChange={(value, item) => {
                        dispatch({ type: 'chartDesigner/setFields', fields: [
                            { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendOrient: value } }) },
                            { name: 'chartOption', value: deepAssign(chartOption, { legend: { orient: value } }) },
                        ] });
                    }}
                >
                    <Select.Option value='vertical'>纵向排布</Select.Option>
                    <Select.Option value='horizontal'>横向排布</Select.Option>
                </Select>
            </Form.Item>}
            {!pieStyle.legendHidden && <Form.Item label='图例位置' {...formItemLayout}>
                <Row>
                    <Col span={8}>上边距：</Col>
                    <Col span={16}>
                        <Input
                            defaultValue={pieStyle.legendPosition ? pieStyle.legendPosition['top'] : null}
                            placeholder={50}
                            onBlur={e => {
                                let value = e.target.value;
                                dispatch({ type: 'chartDesigner/setFields', fields: [
                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendPosition: { top: value} } }) },
                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { top: value } }) },
                                ] });
                            }}
                        />
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>下边距：</Col>
                    <Col span={16}>
                        <Input
                            defaultValue={pieStyle.legendPosition ? pieStyle.legendPosition['bottom'] : null}
                            placeholder={50}
                            onBlur={e => {
                                let value = e.target.value;
                                dispatch({ type: 'chartDesigner/setFields', fields: [
                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendPosition: { bottom: value} } }) },
                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { bottom: value } }) },
                                ] });
                            }}
                        />
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>左边距：</Col>
                    <Col span={16}>
                        <Input
                            defaultValue={pieStyle.legendPosition ? pieStyle.legendPosition['left'] : null}
                            placeholder='auto'
                            onBlur={e => {
                                let value = e.target.value;
                                dispatch({ type: 'chartDesigner/setFields', fields: [
                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendPosition: { left: value} } }) },
                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { left: value } }) },
                                ] });
                            }}
                        />
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>右边距：</Col>
                    <Col span={16}>
                        <Input
                            defaultValue={pieStyle.legendPosition ? pieStyle.legendPosition['right'] : null}
                            placeholder='10%'
                            onBlur={e => {
                                let value = e.target.value;
                                dispatch({ type: 'chartDesigner/setFields', fields: [
                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendPosition: { right: value} } }) },
                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { right: value } }) },
                                ] });
                            }}
                        />
                    </Col>
                </Row>
            </Form.Item>}
            {/* <Form.Item label={<Tooltip title='用于格式化图例文本，原值为name'>图例格式化</Tooltip>} {...formItemLayout}>
                <Input
                    defaultValue={pieStyle.legendFormatter}
                    placeholder='{name}'
                    onBlur={e => {
                        let value = e.target.value;
                        dispatch({ type: 'chartDesigner/setFields', fields: [
                            { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendFormatter: value } }) },
                            { name: 'chartOption', value: deepAssign(chartOption, { legend: { formatter: value } }) }
                            // { name: 'chartOption', value: deepAssign(chartOption, { legend: { formatter: name => {
                            //     let result = name;
                            //     try {
                            //         let matchRes = value.match(new RegExp('/(?<=\{)[^}]*(?=\})/g'));
                            //         let matchStr = '$';
                            //         if(matchRes) {
                            //             for(let i = 0; i < matchRes.length; i++) {
                            //                 eval('str' + i + '=' + matchRes[0]);
                            //                 matchStr += (i + 1) + eval('str' + i) + '$';
                            //             }
                            //             matchStr = matchStr.substring(0, matchStr.length - 1);
                            //             result = value.replace(/([.]*){[^}{]*}([.]*)/g, matchStr);
                            //             console.log('formatter:' + result);
                            //         }
                            //     }catch(e) {
                            //         console.error(e.message);
                            //     }
                            //     return result;
                            // } } }) },
                        ] });
                    }}
                />
            </Form.Item> */}
            <Form.Item label='隐藏标注' {...formItemLayout}>
                <Checkbox
                    checked={!!pieStyle.labelHidden}
                    onChange={e => {
                        let checked = e.target.checked;
                        dispatch({ type: 'chartDesigner/setFields', fields: [
                            { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { labelHidden: checked } }) },
                            { name: 'chartOption', value: deepAssign(chartOption, { series: { 0: {
                                label: { normal: { show: !checked } },
                                labelLine: { normal: { show: !checked } },
                                avoidLabelOverlap: !checked,
                            } } }) },
                        ] });
                    }}
                />
            </Form.Item>
        </Form>
    }
}

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