import { Avatar, Dropdown, Menu, message } from 'antd';
import { DownOutlined, UserOutlined, UserSwitchOutlined, CarryOutOutlined, HomeOutlined,ImportOutlined } from '@ant-design/icons';
import React, { useEffect } from 'react';
import moment from 'moment'
import { connect, history } from 'umi';
import { ConnectState } from '@/models/connect';
import logo from '../../assets/logo.svg';
import './index.less';
import { getMenu, getLogout  } from './services'
import { getSessionUserData } from "@/utils/session";

const GlobalHeaderRight: React.FC<{}> = (props) => {
  // let className = styles.right;
  let data = getSessionUserData();
  const [dataMenu, setDataMenu] = React.useState<any>([]);
  const handelRole = (item: any)=> {
    sessionStorage.setItem('roleData', JSON.stringify(item));
    sessionStorage.setItem('roleAuthority', JSON.stringify([item.roleCode]));
    let params = {
      roleIdList:[item.roleId]
    }
    history.push('/Dashboard')
    window.location.reload()
    getMenu(params).then(res=>{
      if(res?.code == 1){
        setDataMenu(res?.data)
      }else {
        message.error("数据错误请联系管理员")
      }
    })
  }
  //专家角色退出登录
  const toLogin = () => {
    let date = {
      mall3_token: sessionStorage.getItem('Authorization')
    }
    getLogout({ ...date }).then((res) => {
      if (res.success) {
        window.location.href = "/userformal/login"
      }
    })
  }

  const droMenu = (
    <Menu style={{top:"17px"}}>
      {data?.authorityList != undefined ?
        data?.authorityList?.map((item: any,index:any) => (
          <Menu.Item key={index}>
            <a target="_blank" rel="noopener noreferrer" onClick={()=>handelRole(item)}>{item.roleName}</a>
          </Menu.Item> 
        )) : null}
        {data?.roleIds == "ebtp-expert" ? (
        <>
        <Menu.Divider />
        <Menu.Item key="exit">
          <a key="1" onClick={() => toLogin()}>退出登录</a>
        </Menu.Item>
        </>
        ) : null}
    </Menu>
  );

  return (
    <div className="top-menu">
      <div className="left-logo">
        <img src={logo} alt=""/>中国联通智慧供应链平台 ｜ 招标采购中心
      </div>
      <ul className="right-btns">
        {/* <li><ImportOutlined /><a onClick={()=>window.open(REACT_APP_MALL_V2_URL)}>交易平台2.0</a></li> */}
        <li><HomeOutlined /><a onClick={()=>history.push('/Dashboard')}>首页</a></li>
        <li><CarryOutOutlined />{moment().format("YYYY-MM-DD")}</li>
        {data?.organizationName == null ? null : (<li><UserSwitchOutlined />{data?.organizationName}</li>)}
        <li>
          <Avatar size="small" src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" style={{width: '30px'}}/>
          <Dropdown overlay={droMenu}>
            <a className="antd-dropdown-link" style={{color:"#fff"}}>
            {data?.fullName} <DownOutlined/>
            </a>
          </Dropdown>
        </li>
        
      </ul>
      
    </div>
  );
};
export default connect(({ settings }: ConnectState) => ({
  theme: settings.navTheme,
  layout: settings.layout,
}))(GlobalHeaderRight);