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

export const SelectionCell = defineComponent({
    name: 'SelectionCell',
    functional: true,
    props: {
        inputHandler: {
            required: true,
        },
        disabled: {
            required: false,
            default: false,
        },
        isChecked: {
            required: true,
        },
        width: {
            required: true,
            type: Number,
        },
        left: {
            required: true,
            type: Number,
        },
        height: {
            required: true,
            type: Number,
        },
        render: {
            required: true,
        },
    },
    render(_h, { props }) {
        const { left, width, height, inputHandler, isChecked, disabled, render } = props;
        return (
            <div
                class={'order-cell-box'}
                style={fixStyle({
                    left,
                    width,
                    height,
                    'line-height': height,
                })}
            >
                {render({
                    value: isChecked,
                    disabled,
                    handler: {
                        input: inputHandler,
                    },
                })}
            </div>
        );
    },
});