import { Avatar, Dropdown, Menu, message, Modal } from 'antd';
import { DownOutlined, UserOutlined, UserSwitchOutlined, CarryOutOutlined, HomeOutlined, ImportOutlined } from '@ant-design/icons';
import React, { useEffect, useRef } 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";
import { getToSecondUrl } from '@/pages/LoadingPage/service';

const GlobalHeaderRight: React.FC<{}> = (props) => {
  // let className = styles.right;
  let data = getSessionUserData();
  const [dataMenu, setDataMenu] = React.useState<any>([]);
  const urlRef = useRef(null);
  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 toLogout = () => {
    // let _data = {
    //   mall3_token: sessionStorage.getItem('Authorization')
    // }
    Modal.info({
      title: '请确认是否退出？',
      content: false,
      onOk() {
        getLogout().then((res) => {
          if (res?.success) {
            if (data?.userType == "0") {//联通智慧门户
              window.close();
            } else if (data?.userType == "1") {//合作方
              window.close();
            } else if (data?.userType == "2") {//专家
              window.location.href = "/userformal/login"
            }
          }
        })
      },
      closable: true,
      centered: true,
      okText: "确认退出",
      className: "layout-modal-logout",
    });
  }

  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}
      <>
        <Menu.Divider />
        <Menu.Item key="exit">
          <a key="1" onClick={() => toLogout()}>退出登录</a>
        </Menu.Item>
      </>
    </Menu>
  );

  useEffect(() => {
    const getUrl = async () => {
      const response = await getToSecondUrl();
      if (response?.success) {
        urlRef.current = response?.data;
      }
    }
    getUrl();
  }, [])

  return (
    <div className="top-menu">
      <div className="left-logo">
        <img src={logo} alt="" />中国联通智慧供应链平台 ｜ 招标采购中心
      </div>
      <ul className="right-btns">
        <li><ImportOutlined /><a onClick={() => { urlRef.current && window.open(urlRef.current); }}>交易平台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);