import React from 'react'
import Echarts from 'echarts-for-react'
import resolveChartOption from '../chart/resolveChartOption'
/**
 * 此Thumbnail组件尝试同时封装dashboard和chart的thumbnail组件
 *
 * @param {*} { style, type, code, option }
 * @returns
 */
const Thumbnail = ({ style, type, code, option, mode, thumbnail }) => {
    if (mode === 'chart') {
        const newOption = resolveChartOption(option, true, true);
        const viewType = ['bar', 'line', 'pie', 'scatter'].indexOf(type) !== -1 ? 'echarts' :
            (['aggregateTable', 'dataView'].indexOf(type) !== -1 ? 'table' : 'default');

        return (
            <div style={{ ...style, width: '100%', height: '100%' }}>
                {viewType === 'echarts' ? <Echarts
                    key={code}
                    option={newOption}
                    className='rc-echarts'
                    style={{ height: '100%' }}
                /> : (viewType === 'table' ? <div className='table-default'></div> : <div className='chart-default'></div>)} 
            </div>
        );
    }

    if (mode === 'dashboard') {
        if (thumbnail === null) {
            return (
                <div style={{ width: '100%', height: '100%' }}>
                    <div className='dashboard-default'></div>
                </div>
            );
        }
        return (
            <div style={{ width: '100%', height: '100%' }}>
                <img src={thumbnail} alt={code} width='100%' height='100%'></img>
            </div>
        );
    }

    return;
    
}

export default Thumbnail;