/*
 * @Author: cclu lkrnchocolateaaron@gmail.com
 * @Date: 2021-12-13 11:01:23
 * @LastEditors: cclu lkrnchocolateaaron@gmail.com
 * @LastEditTime: 2022-11-07 11:53:23
 * @FilePath: \cloud-platform\src\components\GlobalHeader\RightContent.tsx
 * @Description: 框架右上角功能按鈕
 */
import { Tag, Button } from 'antd';
import type { Settings as ProSettings } from '@ant-design/pro-layout';
import type { Dispatch, tabsRoute } from 'umi';
import React from 'react';
import type { ConnectProps } from 'umi';
import { connect,history } from 'umi';
import type { ConnectState } from '@/models/connect';
import Avatar from './AvatarDropdown';
import Notice from './NoticeIconView';
import styles from './index.less';
import session from "@/utils/session";

export type GlobalHeaderRightProps = {
  theme?: ProSettings['navTheme'] | 'realDark';
  tabsRoutes: tabsRoute[];
  dispatch: Dispatch;
} & Partial<ConnectProps> &
  Partial<ProSettings>;

const ENVTagColor = {
  dev: 'orange',
  test: 'green',
  pre: '#87d068',
};

const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
  const { theme, layout, tabsRoutes,dispatch} = props;
  let className = styles.right;

  if (theme === 'dark' && layout === 'top') {
    className = `${styles.right}  ${styles.dark}`;
  }

  return (
    <div className={className}>
      {/* <HeaderSearch
        className={`${styles.action} ${styles.search}`}
        placeholder="Site Search"
        defaultValue="umi ui"
        options={[
          { label: <a href="https://umijs.org/zh/guide/umi-ui.html">umi ui</a>, value: 'umi ui' },
          {
            label: <a href="next.ant.design">Ant Design</a>,
            value: 'Ant Design',
          },
          {
            label: <a href="https://protable.ant.design/">Pro Table</a>,
            value: 'Pro Table',
          },
          {
            label: <a href="https://prolayout.ant.design/">Pro Layout</a>,
            value: 'Pro Layout',
          },
        ]}
        onSearch={value => {
          //console.log('input', value);
        }}
      /> */}
      {/* <Tooltip title="注意事项">
        <a
          style={{
            color: 'inherit',
          }}
          target="_blank"
          href="https://pro.ant.design/docs/getting-started"
          rel="noopener noreferrer"
          className={styles.action}
        >
          <QuestionCircleOutlined />
        </a>
      </Tooltip> */}
      <Notice />
      <span style={{cursor:"pointer"}}><Button type='text' onClick={()=>{
        const nowLoactionPath = tabsRoutes[tabsRoutes.length-1]?.path||'/'
        history.push('/')
        dispatch({
          type: 'global/changeTabsRoutes',
          payload: { data: [...tabsRoutes.map(n => n.path)], action: 'remove' },
          callback:()=>{
            history.push(nowLoactionPath)

          }

        })

        const currentUser = sessionStorage.getItem('currentUser')
        sessionStorage.clear()
        localStorage.clear()
        session.set('currentUser',JSON.parse(currentUser))
      }}>刷新</Button></span>
      <Avatar />
      {REACT_APP_ENV && (
        <span>
          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
        </span>
      )}
      {/* <SelectLang className={styles.action} /> */}
    </div>
  );
};

export default connect(({ settings, global }: ConnectState) => ({
  theme: settings.navTheme,
  layout: settings.layout,
  tabsRoutes: global.tabsRoutes
}))(GlobalHeaderRight);
