import ModeSwitch from '@/components/ModeSwitch';
import { useLocation, useNavigate } from '@umijs/max';
import { Avatar, Space } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

/** @name Header */
export default function Header() {
  const navigate = useNavigate();
  const location = useLocation();
  const isOverviewMode = location.pathname === '/overview';

  const handleModeChange = (checked: boolean) => {
    // true 为统览模式, false 为专题模式
    navigate(checked ? '/overview' : '/home/urbanSituation');
  };

  const handleJump = () => {
    const url = 'https://10.1.174.34:13000';
    window.open(url, '_blank');
  };

  return (
    <div className={styles.container}>
      <img
        src={require('@/assets/images/common/title.png')}
        className={styles.title}
        alt=""
      />
      <Space size={30} className={classNames(styles.leftSpace, {
        [styles.overviewCard]: isOverviewMode
      })}>
        <div className={classNames(styles.leftCard, {
          [styles.overviewCard]: isOverviewMode
        })}>
          <div>指挥长</div>
          <div>//</div>
          <img src={require('@/assets/images/common/phone.png')} alt="" />
        </div>
        <div className={classNames(styles.leftCard, {
          [styles.overviewCard]: isOverviewMode
        })}>
          <div>值班长</div>
          <div>//</div>
          <img src={require('@/assets/images/common/phone.png')} alt="" />
        </div>
        <div className={classNames(styles.leftCard, {
          [styles.overviewCard]: isOverviewMode
        })}>
          <div>值班员</div>
          <div>//</div>
          <img src={require('@/assets/images/common/phone.png')} alt="" />
        </div>
      </Space>
      <Space size={20}>
        <ModeSwitch checked={isOverviewMode} onChange={handleModeChange} />
        <div className={classNames(styles.rightCard, {
          [styles.overviewCard]: isOverviewMode
        })} onClick={handleJump}>
          指挥调度
        </div>
        {/* <Avatar src={require('@/assets/images/common/avatar.png')} size={58} /> */}
      </Space>
    </div>
  );
}
