import { defineComponent } from '@vue/composition-api';
import './index.scss';
import { fixStyle } from '@/lib/utils/dom';

export const OrderCell = defineComponent({
    name: 'OrderCell',
    functional: true,
    props: {
        index: {
            required: true,
            type: Number,
        },
        width: {
            required: true,
            type: Number,
        },
        left: {
            required: true,
            type: Number,
        },
        height: {
            required: true,
            type: Number,
        },
    },
    render(_h, { props }) {
        const { index, left, width, height } = props;
        return (
            <div
                class={'order-cell-box'}
                style={fixStyle({
                    left,
                    width,
                    height,
                    'line-height': height,
                })}
            >
                <span class={'order-cell-content'}>{index + 1}</span>
            </div>
        );
    },
});