import type { ExtractPropTypes, PropType } from 'vue';
import type { SubsectionListItem, SubsectionMode } from '../../types/global';

/**
 * SubsectionProps 分段器 props 类型定义
 * @description 分段器，支持按钮/分段模式、动画、颜色等
 */

export const SubsectionProps = {
    /** 自定义根节点样式 */
    customStyle: {
        type: [String, Object] as PropType<string | Record<string, any>>,
        default: () => ({})
    },
    /** 自定义根节点样式类 */
    customClass: {
        type: String as unknown as PropType<string>,
        default: ''
    },
    /** tab的数据 */
    list: { type: Array as PropType<Array<string | SubsectionListItem>>, default: () => [] },
    /** 当前活动的tab的index */
    current: { type: [Number, String] as PropType<number | string>, default: 0 },
    /** 激活的颜色 */
    activeColor: { type: String, default: 'var(--u-main-color)' },
    /** 未激活的颜色 */
    inactiveColor: { type: String, default: 'var(--u-content-color)' },
    /** 模式选择，mode=button为按钮形式，mode=subsection时为分段模式 */
    mode: { type: String as PropType<SubsectionMode>, default: 'button' },
    /** 字体大小，单位rpx */
    fontSize: { type: [Number, String] as PropType<number | string>, default: 28 },
    /** 是否开启动画效果 */
    animation: { type: Boolean, default: true },
    /** 组件的高度，单位rpx */
    height: { type: [Number, String] as PropType<number | string>, default: 70 },
    /** 激活tab的字体是否加粗 */
    bold: { type: Boolean, default: true },
    /** mode=button时，组件背景颜色 */
    bgColor: { type: String, default: 'var(--u-divider-color)' },
    /** mode = button时，滑块背景颜色 */
    buttonColor: { type: String, default: 'var(--u-bg-white)' },
    /** 在切换分段器的时候，是否让设备震一下 */
    vibrateShort: { type: Boolean, default: false }
};

export type SubsectionProps = ExtractPropTypes<typeof SubsectionProps>;