import { Tree, BackTop } from 'antd';
import React, { useState, useEffect, useRef } from 'react';
import goUp from "@images/goUp.png";
function MenuTree(props) {
  useEffect(() => {
    //监听resize事件
    // setTableHt(window.innerHeight - 260);
    window.addEventListener('scroll', () => {
      console.log(document.documentElement.scrollTop);
    });
    //解绑事件
    // return function clear() {
    //     window.removeEventListener("resize");
    // }

  }, []);
  const { data, checkEv, checkeds } = props;
  const [hasScrolled, setHasScrolled] = useState(false);
  const box = useRef()
  //菜单选中事件
  function onCheck(checkedKeys, e) {
    checkEv(checkedKeys)
  }
  function handleScroll(e) {
    if (e.target.scrollTop > 500) {
      setHasScrolled(true)
    } else {
      setHasScrolled(false)
    }
  }
  function goTop() { 
    box.current.scrollTop = 0
  }
  function onSelect() { }
  const treeData = data ? data : null;
  const defaultCheckedKeys = checkeds && checkeds.softwareMenuIds ? checkeds.softwareMenuIds.slice() : []
  return (
    <div className='treeContent' >
      <p className='title'>组织结构</p>
      <div className='tree' onScrollCapture={handleScroll} ref={box}>
        <Tree
          checkable
          defaultCheckedKeys={defaultCheckedKeys}
          onCheck={onCheck}
          onSelect={onSelect}
          treeData={treeData}

        />
      </div>
      
      {
        hasScrolled ?
          <div className='goTop' onClick={goTop} >
            <img src={goUp} />
          </div>
          : null
      }

    </div>

  )
}

export default MenuTree;