import { useRef, useEffect } from 'react';
import { useModel } from 'umi';
import Header from "./components/Header";
import ToolBar from "./components/Toolbar";

export default function index() {
  const ref = useRef<HTMLDivElement>(null);
  const { init } = useModel('flowModel');

  useEffect(() => {
    if (!ref.current) return;
    init(ref.current);
  }, []);

  return (
    <div className='w-100vw h-100vh flex flex-col overflow-hidden'>
      <div className="w-full h-60px bg-#ffffff border-b border-#eaeaea border-b-solid box-shadow-sm">
        <Header />
      </div>
      <div className="flex-1 relative">
        <div className="w-full h-full" ref={ref}/>
        <ToolBar />
      </div>
    </div>
  )
}
