/**
 * 下拉列表
 */
import { BaseProps, OptionKeys, OptionProps } from '.'
import { CSSProperties, Slot, VNode } from 'vue'

export interface SelectProps extends BaseProps {
	/**
	 * 是否允许再次点击后清除
	 */
	allowClear?: boolean
	/**
	 * 是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效。
	 */
	autoClearSearchValue?: boolean
	/**
	 * 默认获取焦点
	 */
	autofocus?: boolean
	/**
	 * 是否有边框
	 */
	bordered?: boolean
	/**
	 * 是否默认高亮第一个选项。
	 */
	defaultActiveFirstOption?: boolean
	/**
	 * 下拉菜单的 className 属性
	 */
	dropdownClassName?: string
	/**
	 * 下拉菜单和选择器同宽。默认将设置 min-width，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动
	 */
	dropdownMatchSelectWidth?: boolean | number
	/**
	 * 自定义下拉框内容
	 * @param VNode
	 * @param props
	 */
	dropdownRender?: (menuNode: VNode, props: string) => VNode | Slot
	/**
	 * 下拉菜单的 style 属性
	 */
	dropdownStyle?: CSSProperties
	/**
	 * 	dropdown 菜单自定义样式
	 */
	dropdownMenuStyle?: CSSProperties
	/**
	 * 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。
	 */
	filterOption?: boolean | ((inputValue: string, option: OptionProps) => boolean)
	/**
	 * 默认高亮的选项
	 */
	firstActiveValue?: string | string[]
	/**
	 * 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 {key: string, label: vNodes} 的格式
	 */
	labelInValue?: boolean
	/**
	 * 最多显示多少个 tag
	 */
	maxTagCount?: number
	/**
	 * 隐藏 tag 时显示的内容
	 */
	maxTagPlaceholder?: Slot
	/**
	 * 最大显示的 tag 文本长度
	 */
	maxTagTextLength?: number
	/**
	 * 设置 Select 的模式为多选或标签
	 */
	mode?: 'multiple' | 'tags' | 'combobox'
	/**
	 * 当下拉列表为空时显示的内容
	 */
	notFoundContent?: string | Slot
	/**
	 * 搜索时过滤对应的 option 属性，不支持 children
	 */
	optionFilterProp?: string
	/**
	 * 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 value。
	 */
	optionLabelProp?: string
	/**
	 * 控制搜索文本
	 */
	searchValue?: string
	/**
	 * 使单选模式可搜索
	 */
	showSearch?: boolean
	/**
	 * 是否显示下拉小箭头
	 */
	showArrow?: boolean
	/**
	 * 选择框大小，可选 large small
	 */
	size?: 'default' | 'large' | 'small'
	/**
	 * 自定义的选择框后缀图标
	 */
	suffixIcon?: VNode | Slot
	/**
	 * 自定义的多选框清除图标
	 */
	removeIcon?: VNode | Slot
	/**
	 * 自定义的多选框清空图标
	 */
	clearIcon?: VNode | Slot
	/**
	 * 自定义当前选中的条目图标
	 */
	menuItemSelectedIcon?: VNode | Slot
	/**
	 * 在 tags 和 multiple 模式下自动分词的分隔符
	 */
	tokenSeparators?: string[]
	/**
	 * options 数据，如果设置则不需要手动构造 selectOption 节点
	 */
	options?: Array<OptionProps> | Array<object>
	/**
	 * 通过 option 插槽，自定义节点
	 */
	option?: (value: string, label: string, disabled: boolean, key: string, title: string) => VNode
	/**
	 * 自定义 options 中 label name children 的字段
	 */
	fieldNames?: OptionKeys
	/**
	 * 是否默认展开下拉菜单
	 */
	defaultOpen?: boolean
	/**
	 * 是否展开下拉菜单
	 */
	open?: boolean
	/**
	 * 额外需要返回的字段
	 */
	extraNames?: SelectExtraProps
}

export interface SelectExtraProps {
	// 拼接后的label
	label?: string
	// 拼接后的value
	value?: string
	// 所有选中的选项
	options?: string
}