import React, {Component, PropTypes} from 'react';
import ReactEcharts from 'echarts-for-react';
import 'echarts-liquidfill';

// 用于统计当日金额的组件
class LiquidBall extends Component {
    constructor(props) {
        super(props);
    }

    // 初次渲染后执行此方法
    componentDidMount() {
        setTimeout(() => {
            this.refs.liquidBall.getEchartsInstance().resize();
        }, 0);
    }

    render() {
        return (
            <ReactEcharts ref='liquidBall'
                          option={this.getOption()}
                          style={{height: '100%', width: '100%'}}/>
        );
    }

    getOption() {
        let {name, value, unit, borderColor, rippleColor = []} = this.props;

        var option = {
            series: [{
                type: 'liquidFill',
                name: name,
                radius: '90%',
                backgroundStyle: {
                    color: '#0e1e37'
                },
                data: [{
                    name: value + unit,
                    value: 0.8,
                    itemStyle: {
                        normal: {
                            color: rippleColor[0]
                        }
                    }
                }, {
                    // name: value + unit,
                    value: 0.7,
                    itemStyle: {
                        normal: {
                            color: rippleColor[1]
                        }
                    }
                }],
                itemStyle: {
                    normal: {
                        shadowBlur: 0
                    }
                },
                outline: {
                    borderDistance: 0,
                    itemStyle: {
                        borderWidth: 3,
                        borderColor: borderColor || '#6176a5',
                        shadowBlur: 2
                    }
                },
                label: {
                    normal: {
                        formatter: function (param) {
                            return param.seriesName + '\n' + '\n'
                                + param.name + '\n';

                            // let str =[
                            //     '<p>'+param.seriesName+'</p>',
                            //     '<p>'+param.name+'</span>',
                            // ];
                            //
                            // return str;
                        },
                        // color: 'red',
                        // insideColor: 'yellow',
                        textStyle: {
                            fontSize: 16,
                            align: 'center',
                            baseline: 'middle',
                            fontWeight: 300
                        },
                        position: ['50%', '65%']
                    }
                }
            }]
        };

        return option;
    }
}

export default LiquidBall;