import { AllowedComponentProps, VNodeProps } from '../common'

declare interface TabItem {
    /** 标签名称 */
    title: string;
    /** 标签标识符 */
    id?: string | number;
    /** 是否禁用 */
    disabled?: boolean;
    /** 徽标数字 */
    badge?: number;
    /** 徽标文字 */
    badgeText?: string;
    /** 徽标类型 */
    badgeType?: 'dot' | 'number' | 'text';
    /** 自定义图标 */
    icon?: string;
    /** 选中时的图标 */
    activeIcon?: string;
    /** 是否显示红点 */
    showRedDot?: boolean;
    /** 自定义样式 */
    style?: Record<string, any>;
    /** 自定义类名 */
    class?: string;
    /** 自定义渲染函数 */
    renderTitle?: (tab: TabItem, isActive: boolean) => any;
}

declare interface TabsProps {
    /** 当前激活的标签索引 */
    modelValue?: number;
    /** 当前激活的标签标识符 */
    activeKey?: string | number;
    /** 标签列表 */
    items: TabItem[];
    /** 标签栏位置 */
    position?: 'top' | 'bottom' | 'left' | 'right';
    /** 标签栏样式 */
    type?: 'line' | 'card' | 'button' | 'segment';
    /** 是否可滑动切换 */
    swipeable?: boolean;
    /** 是否显示底部滑动条 */
    showSlider?: boolean;
    /** 滑动条宽度（单位px或%） */
    sliderWidth?: string | number;
    /** 滑动条高度（单位px） */
    sliderHeight?: number;
    /** 滑动条颜色 */
    sliderColor?: string;
    /** 是否显示底部边框 */
    border?: boolean;
    /** 标签栏背景色 */
    background?: string;
    /** 标签栏高度（单位px） */
    height?: number;
    /** 标签最小宽度（单位px） */
    minTabWidth?: number;
    /** 标签最大宽度（单位px） */
    maxTabWidth?: number;
    /** 是否开启粘性布局 */
    sticky?: boolean;
    /** 粘性布局吸顶距离（单位px） */
    stickyOffsetTop?: number;
    /** 是否开启滚动导航 */
    scrollable?: boolean;
    /** 标签栏是否居中 */
    centered?: boolean;
    /** 是否在切换标签时保留状态 */
    keepAlive?: boolean;
    /** 是否开启懒加载 */
    lazy?: boolean;
    /** 切换动画持续时间（毫秒） */
    duration?: number;
    /** 是否在初始化时滚动到激活标签 */
    scrollOnInit?: boolean;
    /** 点击标签前回调，返回 false 可阻止切换 */
    beforeChange?: (index: number, tab: TabItem) => boolean | Promise<boolean>;
    /** 自定义类名 */
    customClass?: string;
    /** 自定义标签栏类名 */
    navClass?: string;
    /** 自定义内容类名 */
    contentClass?: string;
    /** 标签间距（单位px） */
    gutter?: number;
    /** 是否显示标签图标 */
    showIcon?: boolean;
    /** 图标位置 */
    iconPosition?: 'left' | 'right' | 'top' | 'bottom';
    /** 动画类型 */
    animation?: 'slide' | 'fade' | 'none';
}

declare interface TabsEmits {
    (e: 'update:modelValue', index: number): void;
    (e: 'update:activeKey', id: string | number): void;
    (e: 'change', index: number, tab: TabItem): void;
    (e: 'click', index: number, tab: TabItem): void;
    (e: 'disabled', index: number, tab: TabItem): void;
    (e: 'scroll', event: any): void;
    (e: 'sticky', isSticky: boolean): void;
}

declare interface _Tabs {
    new(): {
        $props: AllowedComponentProps & VNodeProps & TabsProps
        $emit: TabsEmits
    }
}

export declare const Tabs: _Tabs

export default Tabs

export type {
    TabItem,
    TabsProps,
    TabsEmits
}