
<script>
import { prefix, prefixMixins, guid } from 'jdd-design/utils';
export default {
    name: `${prefix}-table-body`,
    mixins: [prefixMixins],
    props: [
        'bus',
        'fixed',
        'emptySlot',
        'columns',
        'dataList',
        'width',
        'height',
        'loading'
    ],
    data() {
        return {
            barSpace: 0,
            hoverIndex: -1
        };
    },
    methods: {
        handleScroll(evt) {
            if (!this.fixed) {
                let type = 'middle';
                if (evt.target.scrollLeft === 0) {
                    type = 'left';
                } else if (
                    Math.round(
                        evt.target.scrollLeft + evt.target.clientWidth
                    ) === evt.target.scrollWidth
                ) {
                    type = 'right';
                } else {
                    type = 'middle';
                }
                this.$emit('scroll', type);
                this.bus.trigger('scroll', {
                    left: evt.target.scrollLeft,
                    top: evt.target.scrollTop
                });
            }
        },
        setPostion(pos) {
            this.$refs.bodyContainer.scrollTop = pos.top;
        },
        setHover(sender, index) {
            this.hoverIndex = index;
            sender === null && this.bus.trigger('hover', this, index);
        }
    },
    render() {
        let empty = this.emptySlot ? this.emptySlot : '暂无数据';
        let defultNode = this.loading ? null : (
            <tr class={'empty'}>
                <td colspan={this.columns.length}>
                    <div class={`${prefix}-table__cell`}>{empty}</div>
                </td>
            </tr>
        );
        if (this.dataList.length) {
            defultNode = this.dataList.map((m, n) => {
                return (
                    <tr
                        valign={this.valign}
                        onMouseenter={() => {
                            this.setHover(null, n);
                        }}
                        onMouseleave={() => {
                            this.setHover(null, -1);
                        }}
                        class={{
                            'is-hover': n === this.hoverIndex
                        }}
                    >
                        {this.columns.map(n => {
                            return <td>{n.renderCell(m)}</td>;
                        })}
                    </tr>
                );
            });
        }
        let vnode = (
            <div
                ref="bodyContainer"
                class={`${prefix}-table__body__container`}
                onScroll={this.handleScroll}
                style={this.height ? { height: `${this.height}px` } : null}
            >
                <table
                    class={`${prefix}-table__body`}
                    cellspacing="0"
                    cellpadding="0"
                    border="0"
                    style={{ width: `${this.width}px` }}
                >
                    <colgroup>
                        {this.columns.map(m => {
                            if (m.columnWidth) {
                                return <col width={m.columnWidth} />;
                            }
                            return <col />;
                        })}
                    </colgroup>
                    <tbody class={`${prefix}-table__body`}>{defultNode}</tbody>
                </table>
            </div>
        );
        return vnode;
    },
    mounted() {
        this.$nextTick(() => {
            this.barSpaceWidth = this.$el.offsetWidth - this.$el.clientWidth;
            this.barSpaceHeihgt = this.$el.offsetHeight - this.$el.clientHeight;
            if (this.fixed) {
                if (this.fixed === 'right') {
                    this.$refs.bodyContainer.scrollLeft = this.width;
                }
                this.bus.on('scroll', this.setPostion);
            } else {
                this.bus.trigger('bar-space', {
                    width: this.barSpaceWidth,
                    height: this.barSpaceHeihgt
                });
            }
            this.bus.on('hover', this.setHover);
        });
    }
};
</script>
