/**
 * 总体统计图
 */
import React from 'react'
import EmptyContent from '../../common/emptyContent/index'
import './aggregateTableView.less'

class AggregateTableView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    getTableHeader = () => {
        const { chartOption } = this.props;
        const { statistics, direction } = chartOption;
        return <thead>
            <tr>
                <th colSpan={direction === 'vertical' ? '2' : statistics.length + ''} style={{ textAlign: 'center' }}>{chartOption.targetColumn.label}</th>
            </tr>
        </thead>
    }
    getTableBody = () => {
        const { chartOption } = this.props;
        const { statistics, direction } = chartOption;
        if(direction === 'vertical') {
            return <tbody>
                {statistics.map((s, i) => (
                    <tr key={i}>
                        <td>{s.label}</td>
                        <td>{Number(Number(s.value).toFixed(4))}</td>
                    </tr>
                ))}
            </tbody>
        }else {
            return <tbody>
                <tr>
                    {statistics.map((s, i) => (
                        <td key={i}>{s.label}</td>
                    ))}
                </tr>
                <tr>
                    {statistics.map((s, i) => (
                        <td key={i}>{Number(Number(s.value).toFixed(4))}</td>
                    ))}
                </tr>
            </tbody>
        }
    }

    render() {
        const { chartOption } = this.props;
        if(!chartOption || !chartOption.targetColumn || !chartOption.statistics || chartOption.statistics.length === 0) {
            return <EmptyContent />
        }
        return <div ref={ node => this.formRef = node } className='aggregate-container'>
            <table className={`aggregate-table`} border='1'>
                { this.getTableHeader() }
                { this.getTableBody() }
            </table>
        </div>
    }
}

export default AggregateTableView