import type { RouteMeta, RouteLocationMatched } from 'vue-router';
import type { ElMenuProps, ElBreadcrumbProps } from '../ele-app/el';
import type { EleMenuItemProps } from '../ele-app/plus';
import type TabTitle from '../ele-tabs/components/tab-title';
export type MenuItemProps = EleMenuItemProps;

/**
 * 菜单元数据
 */
export interface MenuMeta extends RouteMeta {
  /** 菜单标题 */
  title?: string;
  /** 菜单图标 */
  icon?: EleMenuItemProps['icon'];
  /** 菜单是否隐藏 */
  hide?: boolean;
  /** 选中其它菜单 */
  active?: string;
  /** 是否隐藏页脚 */
  hideFooter?: boolean;
  /** 是否隐藏侧栏 */
  hideSidebar?: boolean;
  /** 是否隐藏双侧栏一级 */
  hideSidebox?: boolean;
  /** 页签是否可关闭 */
  closable?: boolean;
  /** 页签不同参数是否合并 */
  tabUnique?: boolean;
  /** 页签是否缓存 */
  keepAlive?: boolean;
  /** 是否在面包屑中显示 */
  breadcrumb?: boolean;
  /** 菜单组件其它属性 */
  props?: EleMenuItemProps;
  /** 是否需要外层布局 */
  layout?: boolean;
  /** 路由地址 */
  routePath?: string;
  /** 内链地址, 内部属性 */
  iframe?: string;
}

/**
 * 菜单数据
 */
export interface MenuItem {
  /** 路由名称 */
  name?: string;
  /** 菜单地址 */
  path: string;
  /** 路由组件 */
  component?: string;
  /** 路由重定向 */
  redirect?: string;
  /** 路由元数据 */
  meta?: MenuMeta;
  /** 子路由 */
  children?: Array<MenuItem>;
  /** 临时子路由数据, 内部属性 */
  tempChildren?: Array<MenuItem>;
}

/**
 * 页签数据
 */
export interface TabItem {
  /** 页签标题 */
  title?: string;
  /** 页签标识 */
  key?: string;
  /** 路由地址 */
  path?: string;
  /** 路由完整地址 */
  fullPath?: string;
  /** 是否可关闭 */
  closable?: boolean;
  /** 是否是主页 */
  home?: boolean;
  /** 组件名称 */
  components?: string[];
  /** 是否为刷新状态 */
  refresh?: boolean;
  /** 路由元数据 */
  meta?: MenuMeta;
}

/**
 * 面包屑导航数据
 */
export interface LevelItem {
  /** 标题 */
  title: string;
  /** 地址 */
  path: string;
}

/**
 * 布局类型
 */
export type Layout = 'side' | 'top' | 'mix';

/**
 * 侧栏布局类型
 */
export type SidebarLayout = 'default' | 'mix';

/**
 * 顶栏风格
 */
export type HeaderStyle = 'light' | 'dark' | 'primary';

/**
 * 侧栏风格
 */
export type SidebarStyle = 'light' | 'dark';

/**
 * 页签风格
 */
export type TabStyle = 'simple' | 'indicator' | 'button' | 'tag';

/**
 * 菜单标题国际化方法
 */
export type MenuI18n = (
  option: MenuI18nOption
) => string | undefined | null | void;

/**
 * 菜单标题国际化方法参数
 */
export interface MenuI18nOption {
  /** 菜单地址 */
  path: string;
  /** 菜单数据 */
  menu?: MenuItem;
  /** 当前语言 */
  locale?: string;
}

/**
 * 页签事件参数
 */
export interface TabItemEventOption {
  /** 页签标识 */
  key?: string;
  /** 页签数据 */
  item?: TabItem;
  /** 当前选中页签的标识 */
  active?: string;
  /** 事件标识 */
  command?: string;
}

/**
 * 获取路由对应菜单的结果
 */
export interface MatchedResult {
  /** 选中地址 */
  active: string;
  /** 菜单标题 */
  title?: string;
  /** 匹配的菜单数据 */
  matched?: MenuItem[];
  /** 是否选中非本身 */
  activeOther: boolean;
}

/**
 * 获取混合导航布局选中返回结果
 */
export interface MixActiveResult {
  /** 层级一选中 */
  active1?: string;
  /** 层级二选中 */
  active2?: string;
}

/**
 * 主体区尺寸改变事件参数
 */
export interface BodySizeChangeOption {
  /** 主体区宽度 */
  width?: number;
  /** 是否是移动设备 */
  mobile?: boolean;
}

/**
 * 窗口事件参数
 */
export interface WindowListenerOption {
  /** 返回键按下回调 */
  onEscKeydown: (e: KeyboardEvent) => void;
  /** 设备类型改变 */
  onMobileChange: (isMobile: boolean) => void;
  /** 主体区尺寸改变 */
  onBodySizeChange: () => void;
}

/**
 * 当前路由
 */
export interface CurrentRoute {
  /** 路由地址 */
  path: string;
  /** 路由完整地址 */
  fullPath: string;
  /** 路由元数据 */
  meta: MenuMeta;
  /** 路由匹配数据 */
  matched: RouteLocationMatched[];
}

/**
 * 菜单 tooltip 主题
 */
export type TooltipEffect = ElMenuProps['popperEffect'];

/**
 * 顶栏子菜单触发方式
 */
export type MenuTrigger = ElMenuProps['menuTrigger'];

/**
 * 面包屑导航分隔符
 */
export type BreadcrumbSeparator = ElBreadcrumbProps['separatorIcon'];

/**
 * 混合模式菜单切换模式
 */
export type MenuItemTrigger = 'route' | 'click' | 'hover';

/**
 * 子菜单项点击前钩子
 */
export type BeforeClick = (item: EleMenuItemProps, e: MouseEvent) => boolean;

/**
 * 内链数据
 */
export interface IframeItem {
  /** id */
  id: string;
  /** 地址 */
  src: string;
  /** 是否是刷新状态 */
  refresh?: boolean;
}

/**
 * 标签页标题组件实例
 */
export type TabTitleInstance = InstanceType<typeof TabTitle> | null;

/**
 * 顶栏状态数据
 */
export interface HeaderState {
  /** 是否是鼠标进入状态 */
  hover: boolean;
  /** 鼠标离开状态定时器 */
  timer?: number | null;
}

/**
 * 状态数据
 */
export interface LayoutState {
  headerActive?: string;
  sideboxActive?: string;
  sidebarActive?: string;
  headerData: MenuItem[];
  sideboxData: MenuItem[];
  sidebarData: MenuItem[];
  menuTimer?: number | null;
  isHover: boolean;
}