/**
 * Author: llw
 * Date: 2022.9.14
 * Description: [菜单层级树]
 */
import React from 'react';
import { connect } from 'umi';
import { Tree } from 'antd';

const { TreeNode } = Tree;

const MenuTree = props => {
  const { dispatch, dataSystemMenu, dataLevelMenu, dataExpandedKeys } = props;
  // TreeNode的DOM
  const renderTreeNode = data => {
    return data.map(item => {
      if (item.children && item.children.length) {
        return (
          <TreeNode title={item.title} key={item.resourceCode}>
            {renderTreeNode(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode title={item.title} key={item.resourceCode} />;
    });
  };
  return (
    <Tree
      showLine
      showIcon
      className="info-tree"
      expandedKeys={dataExpandedKeys}
      onSelect={([key], e) => {
        const meunInfo = dataLevelMenu.find(item => item.resourceCode === key);
        dispatch({
          type: 'SystemMenu/changeState',
          payload: {
            dataMenuInfo: !key || !meunInfo ? [] : [{ ...meunInfo, children: undefined }],
          },
        });
      }}
    >
      {renderTreeNode(dataSystemMenu)}
    </Tree>
  );
};
export default connect(({ SystemMenu }) => ({
  ...SystemMenu,
}))(MenuTree);