'use client'
import SideNav from '@/app/ui/dashboard/sidenav';
import TreeTable from "@/app/ui/task/four/TreeTable";
import '@/app/ui/task/four/index.modules.css'
import {useContext, useEffect} from "react";
import LocalContext from "@/app/ui/LocalContent";

export default function Layout({children}: { children: React.ReactNode }) {
    // useEffect(() => {
    //     // @ts-ignore
    //     const divWidth = document.getElementById('myDiv').offsetWidth;
    //     // @ts-ignore
    //     document.getElementById('mySpan').style.fontSize = divWidth + 'px';
    // }, []); // 这里的空数组表示只在组件挂载时执行一次
    //
    // return (
    //     <>
    //         <div id="myDiv" style={{width: '200px'}}>
    //             Content
    //         </div>
    //         <span id="mySpan">Content</span>
    //     </>
    // )

    useEffect(() => {
        // @ts-ignore
        const divWidth = document.getElementById('tenUp').offsetWidth;
        // @ts-ignore
        document.getElementById('upUp').style.fontSize = divWidth + 'px';
        // @ts-ignore
        document.getElementById('upDown').style.fontSize = divWidth + 'px';
        // @ts-ignore
        const divHeight = document.getElementById('left').offsetHeight;
        // @ts-ignore
        document.getElementById('tenLeft').style.fontSize = divHeight/6*4 + 'px';
    }, []);
    const data = useContext(LocalContext);
    console.log('data-data.taskState',data.taskState,);
    const leftUp = [{name:"priority",value:"3",operateType:"="}];
    const rightUp =[{name:"priority",value:"2",operateType:"="}];
    const leftDown = [{name:"priority",value:"1",operateType:"="}];
    const rightDown = [{name:"priority",value:"0",operateType:"="}];
    if (data.taskState.length>0){
        leftUp.push({name:"state",value:data.taskState,operateType:"IN"});
        rightUp.push({name:"state",value:data.taskState,operateType:"IN"});
        leftDown.push({name:"state",value:data.taskState,operateType:"IN"});
        rightDown.push({name:"state",value:data.taskState,operateType:"IN"});
    }
    if (data.expectedStartTime.length>0){
        const parse = JSON.parse(data.expectedStartTime);
        leftUp.push(...parse);
        rightUp.push(...parse);
        leftDown.push(...parse);
        rightDown.push(...parse);
    }
    return (
        <div>
            <div className='firstRow' style={{display: 'flex'}}>
                <div className='leftUp'>
                    <TreeTable  search={leftUp} priority='3'/>
                </div>

                <div id='tenUp' className='up'>
                    <span id='upUp'>向上重要</span>
                </div>

                <div className='rightUp' >
                    <TreeTable  search={rightUp}  priority='2'/>
                </div>
            </div>
            <div id='left' className='left'>
                <span  id='tenLeft' style={{fontSize:'1vh'}}>←向左紧急←向左紧急←向左←向左紧急←向左紧急←向左紧急</span>
            </div>
            <div className='secondRow' style={{display: 'flex'}}>
                <div className='leftDown'>
                    <TreeTable  search={leftDown}  priority='1'/>
                </div>
                <div className='up'>
                    <span id='upDown'>向上重要</span>
                </div>
                {/*<div style={{float:'left',width:'48%',height: '48vh',background:"gray"}}>{children}</div>*/}
                <div className='rightDown'>
                    <TreeTable  search={rightDown}  priority='0'/>
                </div>
            </div>
        </div>
    );
}