/**
 * 总体统计图
 */
import React from 'react'
import { message } from 'antd'
import EmptyContent from '../../common/emptyContent/index'
import './aggregateTableView.less'
class AggregateTableView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    getTableBody = () => {
        const { chartOption } = this.props;
        const { group1Name, group2Name } = chartOption;
        const { themeConfig } = chartOption;

        try{
            if(!!group1Name) {
                if(!!group2Name) {
                    return this.createTableBodyInTwoGroups(chartOption, themeConfig);
                }else {
                    return this.createTableBodyInOneGroups(chartOption, themeConfig);
                }
            }else {
                return this.createTableBodyInNoGroups(chartOption, themeConfig);
            }
        }catch(e) {
            console.error(e.message);
            message.error('总体统计图渲染错误');
            return null;
        }
    }

    // 无分组
    createTableBodyInNoGroups = (chartOption) => {
        const { targetColumn, direction, statistics, data } = chartOption;
        if(direction === 'vertical') {
            return <tbody>
                <tr className='row-target'>
                    <th className='cell-target' rowSpan={`${statistics.length + 1}`}>{targetColumn.label}</th>
                </tr>
                {
                    statistics.map((s, i) => <tr className='row-statistics' key={i}>
                        <td className='cell-statistics-key'>{s.label}</td>
                        <td className='cell-statistics-value'>{data[s.name]}</td>
                    </tr>)
                }
            </tbody>
        }
        return <tbody>
            <tr className='row-target'>
                <th className='cell-target' colSpan={`${statistics.length}`}>{targetColumn.label}</th>
            </tr>
            <tr>
                { statistics.map((s, i) => <td className='cell-statistics-key' key={i}>{s.label}</td>) }
            </tr>
            <tr className='row-statistics'>
                { statistics.map((s, i) => <td className='cell-statistics-value' key={i}>{data[s.name]}</td>) }
            </tr>
        </tbody>;
    }

    // 有一个分组
    createTableBodyInOneGroups = (chartOption) => {
        const { targetColumn, direction, group1s, statistics, data } = chartOption;
        if(direction === 'vertical') {
            return <tbody>
                <tr className='row-group'>
                    <td className='cell-empty' colSpan="2"></td>
                    { group1s.map((g, i) => <td className='cell-group' key={i}>{g}</td>) }
                </tr>
                <tr className='row-target'>
                    <th className='cell-target' rowSpan={`${statistics.length + 1}`}>{targetColumn.label}</th>
                </tr>
                {
                    statistics.map((s, si) => <tr className='row-statistics' key={si}>
                        <td className='cell-statistics-key'>{s.label}</td>
                        { group1s.map((g1, gi) => <td className='cell-statistics-value' key={gi}>{data[gi][s.name]}</td>) }
                    </tr>)
                }
            </tbody>
        }
        return <tbody>
            <tr className='row-target'>
                <th className='cell-target' colSpan={`${statistics.length + 1}`}>{targetColumn.label}</th>
            </tr>
            <tr className='row-statistics'>
                <td className='cell-empty'></td>
                {
                    statistics.map((s, i) => <td className='cell-statistics-key' key={i}>{s.label}</td>)
                }
            </tr>
            {
                group1s.map((g, gi) => <tr className='row-statistics' key={gi}>
                    <td className='cell-group'>{g}</td>
                    {
                        statistics.map((s, si) => <td className='cell-statistics-value' key={si}>{data[gi][s.name]}</td>)
                    }
                </tr>)
            }
        </tbody>
    }

    // 有两个分组
    createTableBodyInTwoGroups = (chartOption) => {
        const { targetColumn, direction, group1Name, group1s, group2s, statistics, data } = chartOption;
        if(direction === 'vertical') {
            return <tbody>
                <tr className='row-group'>
                    <td className='cell-empty' colSpan="3"></td>
                    {group1s.map((g, i) => <td className='cell-group' key={i}>{g}</td>)}
                </tr>
                <tr className='row-target'>
                    <th className='cell-target' rowSpan={`${group2s.length * statistics.length + 1}`}>{targetColumn.label}</th>
                </tr>
                {
                    group2s.map((g2, idx2) => {
                        return statistics.map((s, si) => <tr className='row-statistics' key={si}>
                            { si === 0 && <td className='cell-group' rowSpan={`${statistics.length}`}>{g2}</td>}
                            <td className='cell-statistics-key'>{s.label}</td>
                            {group1s.map((g1, idx1) => {
                                let values = data[idx1].data[idx2];
                                return <td className='cell-statistics-value' key={idx1}>{values[s.name]}</td>
                            })}
                        </tr>)
                    })
                }
            </tbody>
        }
        return <tbody>
            <tr className='row-target'>
                <th className='cell-target' colSpan={direction === 'vertical' ? group1s.length + 3 : statistics.length * group2s.length + 1}>{targetColumn.label}</th>
            </tr>
            <tr className='row-group'>
                <td className='cell-empty' rowSpan={2}></td>
                { group2s.map((g, i) => <td className='cell-group' colSpan={statistics.length} key={i}>{g}</td>) }
            </tr>
            <tr className='row-statistics'>
                { group2s.map((g, gi) => statistics.map((s, si) => <td className='cell-statistics-key' key={`${gi}-${si}`}>{s.label}</td>)) }
            </tr>
            {
                data.map((d1, d1i) => {
                    let data2 = d1.data;
                    return <tr className='row-statistics' key={d1i}>
                        <td className='cell-group'>{ d1[group1Name] }</td>
                        { data2.map(d2 => {
                                return statistics.map((s, si) => {
                                    return <td className='cell-statistics-value' key={si}>{d2[s.name]}</td>
                                })
                        }) }
                    </tr>
                })
            }
        </tbody>
    }

    render() {
        const { chartOption } = this.props;
        const { direction, themeConfig } = chartOption;
        const { name: themeName } = themeConfig || {};
        if(!chartOption || !chartOption.targetColumn || !chartOption.statistics || chartOption.statistics.length === 0) {
            return <EmptyContent />
        }
        let body = this.getTableBody();
        if(!body) {
            return <EmptyContent />
        }
        return <div ref={ node => this.formRef = node } className={`aggregate-container ${themeName}`}>
            <table className={`aggregate-table ${direction}`} border='1'>
                { body }
            </table>
        </div>
    }
}

export default AggregateTableView