import React from 'react';
import styles from './index.css';
import EditTpl from "../edit/index";
import Title from "../Title/index.jsx";
import "echarts";
import ReactEcharts from 'echarts-for-react';
import TableList from '../TableList/index.jsx';

//对对象进行深度合并
const assign = (v = {}, n = {}) => {
    let K = v;
    for (let key in n) {
        if(n.hasOwnProperty(key)){
            const type = Object
            .prototype
            .toString
            .call(K[key]);
            if (K[key] && type === "[object Object]" || type === "[object Array]") {
                K[key] = assign(v[key], n[key]);
            }else {
                K[key] = n[key]
            }
        }
    }
    return K;
}
class TitleEcharts extends React.Component {
    state = {
        config: {
            data: {
                title: "",
                config: {},
                option: {}
            }
        },
        option: {
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [
                {
                    type: 'bar',
                    data: []
                }
            ]
        },
        tableData: {
            title: [
                "名称", "数据"
            ],
            list: [
                {
                    name: "",
                    value: ''
                }
            ]
        }
    }
    componentWillReceiveProps(props) {
        const {data} = props, {config} = this.state;
        config != data && this.upData(data);
    }
    upData = data => {
        const et = ["line", "bar", "pie", "scatter", 'radar','pictorialBar'];
        const lengType = ["line", "bar", "scatter", 'radar','pictorialBar'];
        const {
            data: {
                config = {}
            },
            option = {}
        } = data;
        if (option) {
            let _option = assign(option, config);
            if (JSON.stringify(_option) == "{}") return "";
            _option.series = _option.series.map((x, i) => {
                return {
                    ...x,
                    type: et.includes(x.type)
                        ? x.type
                        : 'bar'
                };
            });
            //处理图例
            ((_option.legend || {}).data || []).map((x,i)=>{
                let obj = _option.series[i] || {};
                lengType.includes(obj.type) && (obj.name = x.name);
            });
            this.setState({config: data, option:_option,tableData:{
                ...(this.state.tableData),
                list:(_option.series[_option.series.length-1].data || []).map(x=>{
                    return x;
                })
            }});
        }
    }
    render() {
        const {
            config,
            config: {
                data: {
                    title = ""
                }
            },
            option,
            tableData
        } = this.state,{hideTitle} = this.props;
        return (
            <div style={this.props.style} className={styles.box}>
                <EditTpl style={{top:"30%",bottom:"30%"}} data={config} upData={config => this.upData(config)}></EditTpl>
                <div className={styles.boxSpace}>
                    {hideTitle?'':<Title>{title}</Title>}
                    <div className={styles.Box2}>
                        <ReactEcharts
                            style={{
                            flex: 1,
                            height: "100%"
                        }}
                            option={option}
                            onEvents={{
                            rendered: (e, p) => {}
                        }}></ReactEcharts>
                        {
                            !!this.props.showTable && <TableList
                                data={tableData}
                                style={{
                                position: "absolute",
                                right: 0
                            }}></TableList>
                        }
                    </div>
                </div>
            </div>
        )
    }
}
export {TitleEcharts}
export default TitleEcharts;