import { RESPONSE_CODE } from '@/constants/enum';
import MessageListDrawer from '@/pages/Order/Order/components/MessageListDrawer';
import { postOrderErpMessageGetUnreadNum } from '@/services';
import { getUserInfo } from '@/utils';
import { BellOutlined, EllipsisOutlined } from '@ant-design/icons';
import { history } from '@umijs/max';
import { Avatar, Badge, Button, Dropdown, Space, Tag } from 'antd';
import { useEffect, useState } from 'react';

const userInfo = getUserInfo();

const GlobleHeader = () => {
  const [unreadMsgNum, setUnreadMsgNum] = useState(0);
  const [messageListDrawerVisible, setMessageListDrawerVisible] =
    useState<boolean>(false);
  /**
   * 打开消息弹窗
   */
  function openMessageDrawer() {
    setMessageListDrawerVisible(true);
  }

  /**
   * 获取当前用户未读消息条数
   */
  async function getUnreadMessageNum() {
    let res = await postOrderErpMessageGetUnreadNum();
    if (res && res.result === RESPONSE_CODE.SUCCESS) {
      setUnreadMsgNum(res.data);
    }
  }

  useEffect(() => {
    //未读消息条数
    getUnreadMessageNum();
  }, []);
  return (
    <>
      <Space className="flex flex-row items-center justify-between ml-4 mr-4">
        {/* left extra start */}
        <Space className="flex flex-row items-center">
          <Avatar
            size="large"
            src={<img src={require('@/assets/logo/logo.png')} alt="canrd" />}
          />
          <span className="text-lg font-semibold">订单管理系统</span>
        </Space>
        {/* left extra end */}

        {/* right extra start */}
        <Space>
          <Badge
            key="message"
            count={unreadMsgNum}
            className="hover:cursor-pointer top-1"
          >
            <BellOutlined
              style={{ fontSize: '24px' }}
              onClick={openMessageDrawer}
            />
          </Badge>
          <Avatar
            key="0"
            style={{ verticalAlign: 'middle', marginLeft: '10px' }}
            size="large"
          >
            {userInfo?.roleSmallVO?.name}
          </Avatar>
          <Tag key="nickName">{userInfo?.username}</Tag>
          <Dropdown
            key="dropdown"
            trigger={['click']}
            menu={{
              items: [
                {
                  label: '退出登录',
                  key: '1',
                  onClick: () => {
                    localStorage.removeItem('token');
                    history.push('/login');
                  },
                },
                // {
                //   label: '修改密码',
                //   key: '2',
                // },
              ],
            }}
          >
            <Button key="4" style={{ padding: '0 8px' }}>
              <EllipsisOutlined />
            </Button>
          </Dropdown>
        </Space>
        {/* right extra end */}
      </Space>

      {messageListDrawerVisible && (
        <MessageListDrawer
          setVisible={(val: any) => {
            setMessageListDrawerVisible(val);
            getUnreadMessageNum();
          }}
        />
      )}
    </>
  );
};

export default GlobleHeader;