/*
 * @Author: wei.li
 * @Date: 2023-04-18 15:44:40
 * @LastEditors: levi7754 levi7754@163.com
 * @LastEditTime: 2025-11-24 15:43:19
 * @Description: file content
 */
import { computed, type CSSProperties } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { cookies, useGlobal, storageLocal } from '@utogether/utils';
import { router, remainingPaths, resetRouter } from '../../router';
import { emitter } from '../../utils/mitt';
import { onBeforeLogout, onAfterLogout } from '../../utils/lifecycle';
import { getEnv } from '../../config';
import { kTOKEN, kLOGINER, kCKTOKEN, kSYSCONFIG } from '../../contant';
import { routerArrays } from '../types';
// import { transformI18n } from '@/plugins/i18n';
import { useAppStoreHook } from '../../store/modules/app';
import { usePermissionStoreHook } from '../../store/modules/permission';
import { useEpThemeStoreHook } from '../../store/modules/epTheme';
import { useSystemStoreHook } from '../../store/modules/system';
import { useMultiTagsStoreHook } from '../../store/modules/multiTags';

const errorInfo = '当前路由配置不正确，请检查配置';

export function useNav() {
  const appHook = useAppStoreHook();
  const routers = useRouter().options.routes;
  const { wholeMenus } = storeToRefs(usePermissionStoreHook());

  const getDivStyle = computed((): CSSProperties => {
    return {
      width: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      overflow: 'hidden'
    };
  });

  /** 设置国际化选中后的样式 */
  const getDropdownItemStyle = computed(() => {
    return (locale, t) => {
      return {
        background: locale === t ? useEpThemeStoreHook().epThemeColor : '',
        color: locale === t ? '#f4f4f5' : '#000'
      };
    };
  });

  const getDropdownItemClass = computed(() => {
    return (locale, t) => {
      return locale === t ? '' : 'dark:hover:text-primary!';
    };
  });

  /** 用户名 */
  const userInfo = computed<IRecord>(() => {
    return useSystemStoreHook().getUserInfo || {};
  });
  const avatarsStyle = computed(() => {
    return userInfo.value ? { marginRight: '10px' } : '';
  });

  const isCollapse = computed(() => {
    return !appHook.getSidebarStatus;
  });

  const device = computed(() => {
    return appHook.getDevice;
  });

  const { $storage } = useGlobal();
  const layout = computed(() => {
    return $storage?.layout?.layout;
  });

  const title = computed(() => {
    const sysConfig = storageLocal.getItem(kSYSCONFIG) || {};
    return sysConfig?.title || 'U-DP';
  });

  /** 动态title */
  function setDocumentTitle() {
    document.title = getEnv().MODE !== 'staging' ? title.value : `${title.value}•测试`;
  }

  /** 退出登录 */
  function logout() {
    onBeforeLogout();
    useMultiTagsStoreHook().handleTags('equal', [...routerArrays]);
    cookies.remove(kCKTOKEN);
    cookies.remove(kTOKEN);
    cookies.remove(kLOGINER);
    usePermissionStoreHook().setWholeMenus([]);
    // 关闭全部标签页, 防止缓存了tags，又用另一个账号登录
    useMultiTagsStoreHook().handleTags('splice', '', {
      startIndex: 1,
      length: useMultiTagsStoreHook()?.multiTags?.length
    });
    usePermissionStoreHook().clearAllCachePage();
    resetRouter();
    onAfterLogout();
    router.push('/login');
  }

  function backHome() {
    router.push('/welcome');
  }

  function onPanel() {
    emitter.emit('openPanel');
  }

  function toggleSideBar() {
    appHook.toggleSideBar();
  }

  function handleResize(menuRef) {
    menuRef?.handleResize();
  }

  function resolvePath(route) {
    if (!route.children) return console.error(errorInfo);
    const httpReg = /^http(s?):\/\//;
    const routeChildPath = route.children[0]?.path;
    if (httpReg.test(routeChildPath)) {
      return route.path + '/' + routeChildPath;
    } else {
      return routeChildPath;
    }
  }
  function menuSelect(indexPath: string) {
    if (wholeMenus.value.length === 0 || isRemaining(indexPath)) return;
    emitter.emit('changLayoutRoute', indexPath);
  }

  /** 判断路径是否参与菜单 */
  function isRemaining(path: string) {
    return remainingPaths.includes(path);
  }

  function passwordItems() {
    const itemRender = { name: '$input', props: { type: 'password' } };
    return [
      { field: 'oldUserPwd', title: 'message.udp.oldPwd', required: true, itemRender },
      { field: 'userPwd', title: 'message.udp.newPwd', required: true, itemRender },
      { field: 'confirmPwd', title: 'message.udp.confirmPwd', required: true, itemRender }
    ];
  }

  return {
    title,
    device,
    layout,
    logout,
    routers,
    $storage,
    backHome,
    onPanel,
    getDivStyle,
    setDocumentTitle,
    toggleSideBar,
    menuSelect,
    handleResize,
    resolvePath,
    isCollapse,
    appHook,
    userInfo,
    avatarsStyle,
    getDropdownItemStyle,
    getDropdownItemClass,
    passwordItems
  };
}