import * as React from 'react';
import { Button, Menu, MenuItem } from '@mui/material';
import isEmpty from 'lodash/fp/isEmpty';
import { styled, alpha } from '@mui/material/styles';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
export default function CustomizedMenus(props) {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
    const handleClick = React.useCallback(event => {
        setAnchorEl(event.currentTarget);
    }, []);
    const handleClose = React.useCallback((hRef, fileName) => {
        if (!isEmpty(hRef) && !isEmpty(fileName) && fileName !== 'backdropClick') {
            const link = document.createElement('a');
            link.download = fileName;
            link.href = hRef;
            link.click();
        }
        setAnchorEl(null);
    }, []);
    return (
        <div>
            <Button
                id='customized-button'
                aria-controls={open ? 'customized-menu' : undefined}
                aria-haspopup='true'
                aria-expanded={open ? 'true' : undefined}
                variant='contained'
                disableElevation
                onClick={handleClick}
                endIcon={<KeyboardArrowDownIcon />}
            >
                下载模板文件头
            </Button>
            <Menu
                id='customized-menu'
                MenuListProps={{
                    'aria-labelledby': 'customized-button',
                }}
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
            >
                <MenuItem onClick={React.useCallback(() => handleClose('/data/User.xlsx', 'User'))} disableRipple>用户</MenuItem>
                <MenuItem onClick={React.useCallback(() => handleClose('/data/Employee.xlsx', '员工'))} disableRipple>员工</MenuItem>
            </Menu>
        </div>
    );
}

<MenuItem onClick={React.useCallback(() => handleClose('/data/User.xlsx', 'User'))} disableRipple>User</MenuItem>
<MenuItem onClick={React.useCallback(() => handleClose('/data/Employee.xlsx', 'Employee'))} disableRipple>Employee</MenuItem>

<MenuItem onClick={React.useCallback(() => handleClose('/data/User.xlsx', 'User.xlsx'))} disableRipple>User</MenuItem>
<MenuItem onClick={React.useCallback(() => handleClose('/data/Employee.xlsx', 'Employee.xlsx'))} disableRipple>Employee</MenuItem>