import React from 'react';
import { ResizableBox } from 'react-resizable';
import styles from '@/submodule/components/apolloTable/component/Table.less';

const DragResized = (props: any) => {
    const { style, columnName, onDragFixed, tableId, onResizeCb } = props;

    // 表格
    const container: any = document.querySelector(`#apolloTable_${tableId}`);
    // 分割线wrap
    const dividerWrap: any = document.querySelector('#dividerWrap');
    // 分割线
    const divider: any = document.querySelector('#divider');

    // 列伸缩开始
    const onResizeWidthStart = (e: any) => {
        const { x } = container.getBoundingClientRect();
        divider.style.left = `${e.x - x}px`;
        dividerWrap.style.display = 'block';
    };
    // 列伸缩回调
    const onResizeWidth = (e: any) => {
        const { x } = container.getBoundingClientRect();
        divider.style.left = `${e.x - x}px`;
    };

    // 列伸缩结束
    const onResizeWidthStop = (e: any, { size }: { size: { width: number } }) => {
        dividerWrap.style.display = 'none';
        if (typeof onDragFixed === 'function') {
            onDragFixed([{ columnName, width: size.width }]);
        }
        if (typeof onResizeCb === 'function') {
            onResizeCb(columnName, size.width);
        }
    };

    return (
        <ResizableBox
            style={style}
            width={style.width}
            height={style.height}
            handle={
                <span
                    className={styles.handleWidth}
                    onClick={(e) => {
                        e.stopPropagation();
                    }}
                />
            }
            minConstraints={[100, 100]}
            onResizeStart={onResizeWidthStart}
            onResize={onResizeWidth}
            onResizeStop={onResizeWidthStop}
            draggableOpts={{ enableUserSelectHack: false }}
        >
            {props.children}
        </ResizableBox>
    );
};
export default DragResized;