import React, { useEffect } from 'react';
import { NavBar } from 'antd-mobile';
import './index.less';
import { useNavigate } from 'react-router-dom';

interface NavBarProps {
  rightInfo?: any;
  showBack?: any;
  title?: string;
  isWhite?: any; // 是否是白色返回箭头
  style?: any;
  backContent?: any;
  hiddenHead?: boolean;
  customBack?: {
    icon?: any;
    onClick?: () => void;
  };
}

const NavBarSec: React.FC<NavBarProps> = (props) => {
  const navigate = useNavigate();
  // @ts-ignore
  const title = props?.title || '';
  const backContent = props?.backContent || '';
  const right = props?.rightInfo;
  const showBack = props?.showBack;

  const style = props?.style;

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [])

  const back = () => {
    navigate(-1); // 回退到上一个页面
  };

  useEffect(() => {
    //放入回调函数中请自行取掉setTimeout
    setTimeout(function () {
      // 兼容微信浏览器更新title
      //利用iframe的onload事件刷新页面
      document.title = title;
      const iframe = document.createElement('iframe');
      iframe.style.visibility = 'hidden';
      iframe.style.width = '1px';
      iframe.style.height = '1px';
      iframe.onload = function () {
        setTimeout(function () {
          document.body.removeChild(iframe);
        }, 0);
      };
      document.body.appendChild(iframe);
    }, 0);

  }, [title]);

  // @ts-ignore
  return <div className={'nav-bar-box'}>
    <NavBar
        backArrow={
          props.customBack?.icon ? (
              <i className={'custom-icon'}>{props.customBack?.icon}</i>
          ) : showBack ? (
              <i className={`back-icon ${props?.isWhite ? 'white' : ''}`} />
          ) : ''
        }
        onBack={props.customBack?.onClick || back}
        right={right}
        style={style}
        back={backContent}
    >
      {title}
    </NavBar>
  </div>;
};

export default NavBarSec;