import React, { useCallback } from 'react'
import { Dropdown, Menu, Icon, message } from 'antd';
import { useActions, useData } from '@ttk/app-loader'

export default React.memo(TTKHeader)
function TTKHeader(props) {
  // const commit = useCommit()
  const actions = useActions(props)
  // const userInfo = useData('')
  const logout = useCallback(async() => {
    actions.logoutAction()
  }, [])
  const coming = useCallback(async() => {
    message.info('功能正在完善中...')
  }, [])
  const userName = useData('app-root/loginInfo/userName')
  const menu = (
    <Menu onClick={logout}>
      <Menu.Item key="logout">退出登录</Menu.Item>
    </Menu>
  )
  return (
    <div className="app-portal-header">
      <div className="left-wrap">
        <img alt="logo" src={require("@/assets/img/logo_erp.png")} />
      </div>
      <div className="right-wrap">
        <div onClick={() => {coming()}} className="item">
          <Icon type="customer-service" />&nbsp;&nbsp;客服
        </div>
        <div onClick={() => {coming()}} className="item">
          <Icon type="notification" />&nbsp;&nbsp;消息
        </div>
        <div className="item user-info-dropdown">
          <Dropdown overlay={menu}>
            <span>
              <img alt={userName} src={require("@/assets/img/avatar.png")} />
              <span className="user-name">{userName}</span>
              <Icon type="down" />
            </span>
          </Dropdown>
        </div>
      </div>
    </div>
  )
}