
<script>
import { prefix, prefixMixins } from 'jdd-design/utils';
import Checkbox from '../checkbox';
export default {
    name: `${prefix}-table-header`,
    mixins: [prefixMixins],
    props: {
        columns: {
            type: Array,
            default: () => []
        },
        width: {
            type: Number,
            default: 0
        },
        bus: {
            type: Object,
            default: () => null
        },
        fixed: {
            type: [String, Boolean],
            default: false
        }
    },
    inject: {
        jddTable: {
            default: null
        }
    },
    data() {
        return {
            barSpace: 0
        };
    },
    mounted() {
        this.bus && this.bus.on('scroll', this.setPosition);

        this.bus && this.bus.on('bar-width', this.setSpace);

        this.$nextTick(() => {
            if (this.fixed === 'right') {
                this.$refs.headerContainer.scrollLeft = this.width;
            }
        });
    },
    methods: {
        setPosition(pos) {
            this.$refs.headerContainer.scrollLeft = pos.left;
        },
        setSpace(space) {
            this.barSpace = space;
        }
    },
    render() {
        let col = (
            <colgroup>
                {this.columns.map(m => {
                    if (m.columnWidth) {
                        return <col width={m.columnWidth} />;
                    }
                    return <col />;
                })}
            </colgroup>
        );
        let vnode = (
            <div
                ref="headerContainer"
                class={`${prefix}-table__header__container`}
                style={{ marginRight: `${this.barSpace}px` }}
            >
                <table
                    class={`${prefix}-table__header`}
                    cellspacing="0"
                    cellpadding="0"
                    border="0"
                    style={{ width: `${this.width}px` }}
                >
                    {col}
                    <thead>
                        <tr>
                            {this.columns.map(m => {
                                return <th>{m.renderHeader()}</th>;
                            })}
                        </tr>
                    </thead>
                </table>
            </div>
        );
        return vnode;
    }
};
</script>
