import React from 'react';
import { connect } from 'dva';
import ReactEchartsCore from 'echarts-for-react/lib/core';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/scatter';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/grid';
import resolveChartThumbnailOption from './resolveChartThumbnailOption';

class ThumbnailEcharts extends React.Component {
    componentDidMount() {
        const { dispatch, option } = this.props;
        let base64;
        if(!option || ((!option.series || option.series.length === 0 || !option.series[0].data || option.series[0].data.length === 0) && (!option.baseOption || !option.baseOption.series || option.baseOption.series.length === 0 || !option.baseOption.series[0].data || option.baseOption.series[0].data.length === 0))) {
            base64 = '';
        }else {
            base64 = this.echartsRef.getEchartsInstance().getDataURL({
                pixelRatio: 1,
            });
        }
        dispatch({ type: 'chartDesigner/silentSetField', name: 'thumbnail', value: base64 });
    }
    render() {
        const { style, option } = this.props;
        return <ReactEchartsCore
            ref={node => this.echartsRef = node}
            echarts={echarts}
            option={resolveChartThumbnailOption(option)}
            className='rc-echarts'
            style={{ ...style, width: '187px', height: '132px' }}
        />
    }
}

export default connect()(ThumbnailEcharts);