import React, { useEffect, useRef, useState } from 'react';
import { resizeObserver } from '@zenview/micro-utils';
import './index.less';

export default function TableLayout({ className = '', children, cutNum = 0, x = 1200 }) {
  const [height, setHeight] = useState(500);
  const domRef = useRef(null);
  useEffect(() => {
    const set = () => {
      const rect = domRef.current?.getBoundingClientRect();
      if (rect) {
        setHeight(rect.height - cutNum);
      }
    };
    set();
    const dom = domRef.current;
    resizeObserver.createResizeObserver(dom, set);
    return () => {
      resizeObserver.unResizeObserver(dom);
    };
  }, [cutNum]);
  return (
    <div ref={domRef} className={`table-layout ${className}`}>
      {React.cloneElement(children, { scroll: { x, y: height } })}
    </div>
  );
}
