import React from 'react'
import Echarts from 'echarts-for-react'
import { Table, Spin, Icon } from 'antd'
import RichTextEditor from './richTextEditor'
import { connect } from 'dva'
import resolveChartOption from '../chart/resolveChartOption'
import { hashcode } from '../../utils/baseUtils'

class ChartView extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {
            chartOption: {
                showLoading: true
            }, // 图表详细数据
        }
    }

    componentDidMount() {
        const { item, dispatch } = this.props;
        const { viewType } = item;
        if(viewType === 'chart') {
            dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: true });
        }
    }

    render() {
        const { item, tableBodyHeight, editMode, dispatch } = this.props;
        const { viewType, chartType, content, chartOption, fetching } = item;
        let children = <div className='chart-default mover'></div>;
        
        if(viewType === 'chart') { // 图表类型
            if(chartOption) {
                let newOption = resolveChartOption(chartOption, editMode, false);
                let type = ['bar', 'line', 'pie', 'scatter'].indexOf(chartType) !== -1 ? 'echarts' :
                    (['aggregateTable', 'dataView'].indexOf(chartType) !== -1 ? 'table' : 'default');
                if(type === 'echarts') {
                    children = <Echarts
                        key={hashcode(chartOption)}
                        option={newOption}
                        className='rc-echarts mover'
                        style={{height: '100%'}}
                    />
                }else if(type === 'table') {
                    const { columns, dataSource } = chartOption;
                    const tableRowHeight = 38;
                    children = <Table
                        key={hashcode({
                            columns,
                            dataSource,
                            tableBodyHeight
                        })}
                        className='dashboard-table'
                        size='small'
                        scroll={{
                            x: columns ? columns.length * 200 : 0,
                            y: tableBodyHeight,
                        }}
                        pagination={{ defaultPageSize: Math.floor(tableBodyHeight/tableRowHeight) || 10 }}
                        columns={columns ? columns.map(c => ({
                            ...c,
                            width: 200
                        })) : []}
                        dataSource={dataSource}
                    />
                }
            }
        }else if(viewType === 'richText') { // 富文本类型
            children = <RichTextEditor content={content} onContentChange={(content) => {
                dispatch({ type: 'dashboardDesigner/modifyItem', fields: { code: item.code, content } });
            }}/>
        }else {
            children = <div className='mover'>错误类型</div>
        }
    
        return (
            <div className='chartview-content' style={{ width: '100%', height: '100%' }}>
                { children }
                { fetching && <div style={{ display: fetching ? 'block' : 'none', position: 'absolute', height: '100%', width: '100%', zIndex: '4', background: 'rgba(51,51,51,.1)', top: 0, left: 0 }}>
                    <Spin style={{ display: 'inline-block', position: 'absolute', top: '50%', left: '50%', margin: '-10px' }} indicator={<Icon type="loading" style={{ fontSize: 24 }} spin />} />
                </div> }
            </div>
        );
    }
}

export default connect()(ChartView);