
import { Outlet, history, useLocation, useParams, useRoutes } from 'umi';
import styles from './index.less';
import { useEffect, useState } from 'react';
import { MenuType, tabsType } from '@/utils/menu';
import { ConfigProvider, Select, message } from 'antd';
import LeftMenuOne from '@/layouts/LeftMenuOne';
import LeftMenuTwo from '@/layouts/LeftMenuTwo';
import BottomConfigInfo from '@/layouts/BottomConfigInfo';

import zhCN from 'antd/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import theme from '@/styles/antd.theme';
dayjs.locale('zh-cn');

import moment from 'moment'
import {getMenuType, getTabKey } from '@/utils';
moment.locale('ZH-cn')


const options2 = [
  { value: 1, label: 'GLQ管理' },
  { value: 2, label: 'MY管理' },
  { value: 3, label: 'SB管理' },
  { value: 4, label: 'SF管理' },
  { value: 5, label: 'SBJK二维版', disabled: true },
  { value: 6, label: '设备注册' }
]

const leftMenuType: any = {
  // GLQ管理
  'GLQ远程维护': <LeftMenuOne key={1} data={MenuType['GLQ远程维护']} />,
  '网络MMJ管理': <LeftMenuTwo key={2} data={MenuType['网络MMJ管理']} />,
  '网络GLQ配置': <LeftMenuOne key={3} data={MenuType['网络GLQ配置']} />,
  // MY管理
  '密钥体管理': <LeftMenuOne key={4} data={MenuType['密钥体管理']} />,
  '密钥管理': <LeftMenuOne key={5} data={MenuType['密钥管理']} />,
  '邮箱管理': <LeftMenuOne key={6} data={MenuType['邮箱管理']} />,
  // SB管理
  '设备管理': <LeftMenuOne key={7} data={MenuType['设备管理']} />,
  '日志管理': <LeftMenuTwo key={8} data={MenuType['日志管理']} />,
  '审计管理': <LeftMenuTwo key={9} data={MenuType['审计管理']} />,
  '境外任务管理': <LeftMenuTwo key={10} data={MenuType['境外任务管理']} />,
  // SF管理
  '算法资源管理': <LeftMenuOne key={11} data={MenuType['算法资源管理']} />,
  '算法配置管理': <LeftMenuOne key={12} data={MenuType['算法配置管理']} />,
  '算法托收管理': <LeftMenuOne key={13} data={MenuType['算法托收管理']} />,
  '算法邮箱管理': <LeftMenuOne key={14} data={MenuType['算法邮箱管理']} />,
  // SBJK二维版
  '设备监控二维版': <div />,
  // 设备注册
  '注册管理': <LeftMenuOne key={15} data={MenuType['注册管理']} />,
  '位置管理': <LeftMenuOne key={16} data={MenuType['位置管理']} />
}

export default function Layout() {
  const urlParams = useParams();
  const location = useLocation();
  const [routeName, setRouteName] = useState<string>('');

  const [selectVal, setSelectVal] = useState<number>(6);
  const [tabList, setTabList] = useState<any>([]);
  const [active, setActive] = useState<number>(1);
  const [activeName, setActiveName] = useState<any>('注册管理');

  // 获取布局信息
  let sysData = localStorage.getItem(`${urlParams?.fileType}`);
  let info = sysData ? JSON.parse(sysData) : null;

  let urlStr = `${urlParams?.fileType}${location?.search}`;

  useEffect(() => {
    // 校验浏览器是否有储存的布局信息
    if (info?.layoutInfo) {
      setActive(info?.layoutInfo.active);
      setActiveName(info?.layoutInfo.activeName);
      setSelectVal(info?.layoutInfo.selectVal);
      setTabList([...tabsType[info?.layoutInfo.selectVal]]);
    } else {
      upDateLayout()
    }
  }, [])

  useEffect(() => {
    upDateLayout()
    setRouteName(getCurrentPageName(location.pathname))
  }, [location]);

  // 更新布局数据
  const upDateLayout = () => {
    const index = location.pathname.lastIndexOf('/');
    let pathname = location.pathname.substring(0, index);
    let menType, tabKey;

    if (!['/registerManage/deviceRegister', '/registerManage/unitLocation'].includes(pathname)) {
      menType = getMenuType(pathname);
      tabKey = getTabKey(menType);

      if(!menType ||  !tabKey) return

      if (
        info?.layoutInfo?.selectVal != tabKey ||
        info?.layoutInfo?.activeName != menType
      ) {
        setActiveName(menType);
        setSelectVal(Number(tabKey));
        setTabList([...tabsType[Number(tabKey)]]);
      }
    }else if (pathname == '/registerManage/unitLocation') {
      setActive(2)
      setActiveName('位置管理');
      setSelectVal(6);
      setTabList([...tabsType[6]]);
    }else if ('/registerManage/deviceRegister') {
      setActive(1)
      setActiveName('注册管理');
      setSelectVal(6);
      setTabList([...tabsType[6]]);
    }
  }


  // 页面销毁前记录下当前布局信息
  window.addEventListener('beforeunload', function (event) {
    let obj: any = {
      selectVal: selectVal,
      active: active,
      activeName: activeName,
    }
    localStorage.setItem(`${urlParams?.fileType}`, JSON.stringify({ ...info, layoutInfo: obj }))
  });

  useEffect(() => {
    // 条件判断： 当选择框的值发生改变时，在（tabList长度大于0 并且 没有发现记录布局的数据）时 ，默认进入第一个模块的页面
    if (tabList.length > 0 && !info?.layoutInfo) {
      setActiveName(tabList[0].name)
      let info = MenuType[tabList[0].name];

      if (isTreeType(info)) return

      if (info[0].data) {
        history.push(`${info[0].data[0].url}/${urlStr}`)
      } else {
        history.push(`${info[0].url}/${urlStr}`)
      }
    }
  }, [selectVal])

  // 校验是否是树结构列表
  const isTreeType = (info: any) => {
    let isReturn = false;
    if (info.length > 0) {
      if (info[0]?.name === '设备注册') {
        isReturn = true;
        history.push(`/registerManage/deviceRegister/${urlStr}`);
      }
      if (info[0]?.name === '单位位置管理') {
        isReturn = true;
        history.push(`/registerManage/unitLocation/${urlStr}`);
      }
    }
    return isReturn;
  };


  // 获取路由名称
  const getCurrentPageName = (pathname: string) => {
    const routes = require('../../config/routes/index').default;
    const currentRoute = routes.find((route: any) => route.path === pathname);
    return currentRoute?.name || '未知页面';
  };

  return (
    <ConfigProvider
      locale={zhCN}
      autoInsertSpaceInButton={false}
      componentSize="middle"
      theme={theme}
    >
      <div id={styles.layout_main}>
        {/* 顶部导航 */}
        <div className={styles.nav_warp}>
          <div className={styles.nav_warp_t}>

            <div className={styles.logo_warp}>
              <div className={styles.logo_icon}></div>
              <div className={styles.system_title}>XXXX管理系统</div>
            </div>

            <Select
              value={selectVal}
              style={{ width: 180 }}
              onChange={(e) => {
                // 改变下拉框数据时将布局信息清空
                localStorage.setItem(`${urlParams?.fileType}`, JSON.stringify({ ...info, layoutInfo: null }))
                setSelectVal(e)
                setTabList([...tabsType[e]])
                setActive(1)
              }}
              options={options2}
            />

            <div className={styles.menu_list}>
              <div title=''></div>
              <div title=''></div>
              <div title=''></div>
              <div title=''></div>
              <div title=''></div>
              <div title=''></div>
            </div>

            <div className={styles.times}>
              <div>XXXX：3023-00-00 15:00:00</div>
              <div>XXXX：3023-00-00 15:00:00</div>
            </div>
          </div>

          <div className={styles.nav_warp_b}>
            {
              tabList.map((item: any, index: number) => {
                return <div key={index} className={styles.tab_warp}>
                  <div className={`${styles.tab_con} ${(index + 1) == active ? styles.active_tab : ''}`}
                    onClick={() => {
                      let info = MenuType[item.name];

                      setActive(item.id)
                      setActiveName(item.name)

                      if (isTreeType(info)) return

                      if (info.length == 0 || info[0].data && info[0].data.length == 0) {
                        history.push(`/construction/${urlStr}`);
                        return
                      }

                      // 改变activeName时跳转菜单栏的第一个路由
                      if (info[0].data) {
                        history.push(`${info[0].data[0].url}/${urlStr}`)
                      } else {
                        history.push(`${info[0].url}/${urlStr}`)
                      }

                    }}>
                    {item.name}
                  </div>
                </div>
              })
            }
          </div>
        </div>

        {/* 主体内容 */}
        <div className={styles.main_warp}>
          {/* 右侧菜单栏 */}
          <div className={styles.left_menu}>
            {leftMenuType[activeName]}
          </div>

          {/* 左侧内容 */}
          <div className={styles.right_warp}>
            <div className={styles.right_route}
              style={{
                height: selectVal == 1 ?
                  'calc(100vh - 114px - 141px - 52px)' :
                  'calc(100vh - 114px - 52px)'
              }}
            >
              <Outlet></Outlet>
            </div>

            {/* GQL管理整个模块页面底部的配置信息 */}
            {selectVal == 1 && <BottomConfigInfo />}

            {/* 底部信息 */}
            <div className={styles.footer}>
              <div>软件当前版本：0.0.0</div>
              <div>当前用户：admin</div>
              <div style={{ minWidth: 180, textAlign: 'right' }}>当前操作：{routeName}</div>
            </div>
          </div>
        </div>
      </div>
    </ConfigProvider>
  );
}