import React from 'react';
import { ResizableBox } from 'react-resizable';
import styles from './DragFixed.less';

const DragFixed = (props: any) => {
    const { initLeft, initTop, onResizeStart, tableWidth, showColumns, columnWidth, columns, onResizeStop } = props;
    // 表格
    const container: any = document.querySelector('#tableContainer');
    // 滑块wrap
    const handleWrap: any = document.querySelector('#leftFixedHandleWrap');
    // 滑块
    const handle: any = document.querySelector('#leftFixedHandle');
    // 分割线wrap
    const dividerWrap: any = document.querySelector('#dividerWrap');
    // 分割线
    const divider: any = document.querySelector('#divider');
    const onMouseEnterWrap = (e: any) => {
        // 滑块wrap添加hovered样式
        handleWrap.classList.add(styles.hovered);
        // 滑块初始化位置，显示
        handle.style.top = `${e.clientY}px`;
        handle.style.opacity = 1;
    };

    const onMouseMoveWrap = (e: any) => {
        // 滑块位置跟随鼠标上下移动
        handle.style.top = `${e.clientY}px`;
    };

    const onMouseLeaveWrap = (e: any) => {
        const originLeft = container.getBoundingClientRect().x || 0;
        // 当前固定列宽度为分割线的left
        const handleWrapLeft: string = handleWrap.style.left;
        // 样式转数值
        const handleWrapLeftNum: string = handleWrapLeft.slice(0, -2);
        console.log('x',e.clientX - originLeft)
        console.log('left',handleWrapLeftNum)
        if (
            e.clientX - originLeft < Number(handleWrapLeftNum) - 10 ||
            e.clientX - originLeft > Number(handleWrapLeftNum) + 12
        ) {
            // 滑块wrap移除hovered样式
            handleWrap.classList.remove(styles.hovered);
            // 滑块隐藏
            handle.style.opacity = 0;
        }
    };

    const onResizeStartHandle = (e: any) => {
        if (typeof onResizeStart === 'function') {
            onResizeStart();
        }
        const originLeft = container.getBoundingClientRect().x || 0;
        handleWrap.style.top = 0;
        handleWrap.style.left = `${e.x - originLeft}px`;
    };

    const onResizeHandle = (e: any) => {
        const originLeft = container.getBoundingClientRect().x || 0;
        let inTableLeft = e.x - originLeft;
        // left不能超过表格一半宽度
        if (inTableLeft > tableWidth / 2) {
            inTableLeft = tableWidth / 2;
        }
        let fixedWidth = 0;
        let index = 0;
        // 计算固定列宽度及索引
        for (let i = 0; i < showColumns.length; i++) {
            fixedWidth += showColumns[i].width || columnWidth;
            if (fixedWidth > inTableLeft) {
                index = i;
                break;
            }
        }
        let leftHandleLeft = 0;
        if (inTableLeft > fixedWidth - (showColumns[index].width || columnWidth) / 2) {
            // left位于当前列中间偏右
            leftHandleLeft = fixedWidth;
        } else {
            // left位于当前列中间偏左
            leftHandleLeft = fixedWidth - (showColumns[index].width || columnWidth);
        }
        // 拖动时显示分割线
        dividerWrap.style.display = 'block';
        // 分割线取列的边侧位置
        divider.style.left = `${leftHandleLeft}px`;
        // 拖动线取鼠标位置
        handleWrap.style.left = `${inTableLeft}px`;
    };

    const onResizeStopHandle = () => {
        // 当前固定列宽度为分割线的left
        const fixedWidth: string = divider.style.left;
        // 样式转数值
        const fixedWidthNum: string = fixedWidth.slice(0, -2);
        // 分隔线wrap隐藏
        dividerWrap.style.display = 'none';
        // 滑块wrap移除hovered样式
        handleWrap.classList.remove(styles.hovered);
        handleWrap.style.left = fixedWidth;
        // 滑块隐藏
        handle.style.opacity = 0;

        let leftFixedWidth = 0;
        const fixedCol: any = {};
        // 计算获取固定列
        for (let i = 0; i < showColumns.length; i++) {
            leftFixedWidth += showColumns[i].width || columnWidth;
            if (leftFixedWidth <= Number(fixedWidthNum)) {
                fixedCol[showColumns[i].columnName] = 1;
            } else {
                break;
            }
        }
        const newColumns: any = [];
        // 为固定列增加fixed属性
        columns.map((item: any) => {
            if (fixedCol[item.columnName] === 1) {
                item.fixed = 'left';
            } else {
                if (item.fixed === 'left') {
                    item.fixed = '';
                }
            }
            newColumns.push(item);
        });
        if (typeof onResizeStop === 'function') {
            onResizeStop({ columns: newColumns });
        }
    };

    return (
        <div
            id="leftFixedHandleWrap"
            className={styles.leftFixedHandleWrap}
            style={{
                left: `${initLeft}px`,
                top: `${initTop}px`,
            }}
            onMouseEnter={onMouseEnterWrap}
            onMouseMove={onMouseMoveWrap}
            // onMouseLeave={onMouseLeaveWrap}
        >
            <ResizableBox
                handle={
                    <span
                        id="leftFixedHandle"
                        className={styles.leftFixedHandle}
                        onClick={(e) => {
                            e.stopPropagation();
                        }}
                    />
                }
                onResizeStart={onResizeStartHandle}
                onResize={onResizeHandle}
                onResizeStop={onResizeStopHandle}
                draggableOpts={{ enableUserSelectHack: false }}
            />
        </div>
    );
};
export default DragFixed;