import { isFunction } from 'lodash';
import { computed, defineComponent, PropType } from '@vue/composition-api';
import { fixStyle, flexWidth } from '../../utils/dom';
import { IndexColumn } from '@/lib/types';
import { SCROLL_WIDTH } from '@/lib/constants/dom-fixed';
import './index.scss';
import { useStoreInject } from '@/lib/store';
import { BOTTOM_BLOCK } from '@/lib/constants/dom-class';

export const BottomBar = defineComponent({
    name: 'BottomBar',
    props: {
        rowHeight: {
            require: true,
            type: Number,
        },
        leftWidth: {
            require: true,
            type: Number,
        },
        rightWidth: {
            require: true,
            type: Number,
        },
        scrollWidth: {
            require: true,
            type: Number,
        },
        leftColumns: {
            require: true,
            type: Array as PropType<IndexColumn[]>,
        },
        rightColumns: {
            require: true,
            type: Array as PropType<IndexColumn[]>,
        },
        scrollColumns: {
            require: true,
            type: Array as PropType<IndexColumn[]>,
        },
        scrollLeft: {
            require: true,
            type: Number,
        },
        height: {
            require: true,
            type: Number,
        },
    },
    setup() {
        const { state } = useStoreInject();
        return {
            total: computed(() => {
                const totalCount = state.featureConfig.totalBar.totalCount;
                if (isFunction(totalCount)) {
                    return totalCount(state.view.rowIndex2Id.length);
                } else {
                    return state.view.rowIndex2Id.length;
                }
            }),
            columnTotal: computed(() => state.columnTotal),
        };
    },
    render() {
        const {
            height,
            scrollLeft,

            leftColumns,
            rightColumns,
            scrollColumns,

            leftWidth,
            rightWidth,
            scrollWidth,

            // 展示
            total,
            columnTotal,
        } = this;
        const getGroupStyle = (width: number) => fixStyle({ ...flexWidth(width), height });
        const renderColumnTotal = (columns) => (
            <div class={'bottom-block-group'}>
                {columns.map((column) => {
                    if (typeof column.totalRender === 'function') {
                        return (
                            <div
                                class={{
                                    [BOTTOM_BLOCK]: true,
                                    [`${BOTTOM_BLOCK}_${column.field}`]: true,
                                }}
                                style={fixStyle({ left: column.left, width: column.width })}
                            >
                                {column.totalRender(columnTotal[column.id])}
                            </div>
                        );
                    } else if (typeof column.totalFormatter === 'function') {
                        return (
                            <div
                                class={{
                                    [BOTTOM_BLOCK]: true,
                                    [`${BOTTOM_BLOCK}_${column.field}`]: true,
                                }}
                                style={fixStyle({ left: column.left, width: column.width })}
                            >
                                {column.totalFormatter(columnTotal[column.id])}
                            </div>
                        );
                    } else {
                        return (
                            <div
                                class={{
                                    [BOTTOM_BLOCK]: true,
                                    [`${BOTTOM_BLOCK}_${column.field}`]: true,
                                }}
                                style={fixStyle({ left: column.left, width: column.width })}
                            >
                                {columnTotal[column.id]}
                            </div>
                        );
                    }
                })}
            </div>
        );

        return (
            <div class={'grid-bottom-bar'}>
                <div class={'row-count'}>{total}</div>
                <div class={'group-item pin-left'} style={getGroupStyle(leftWidth)}>
                    {leftColumns.length > 0 ? renderColumnTotal(leftColumns) : null}
                </div>
                <div class={'group-item pin-scroll-view'}>
                    <div
                        class={'pin-scroll'}
                        style={{
                            ...getGroupStyle(scrollWidth),
                            transform: `translateX(${-scrollLeft}px)`,
                        }}
                    >
                        {scrollColumns.length > 0 ? renderColumnTotal(scrollColumns) : null}
                    </div>
                </div>

                <div
                    class={'group-item pin-right'}
                    style={getGroupStyle(rightWidth + SCROLL_WIDTH)}
                >
                    {rightColumns.length > 0 ? renderColumnTotal(rightColumns) : null}
                </div>
            </div>
        );
    },
});