import { BaseProps, OptionKeys, OptionProps } from '.'
import { Slot, VNode } from 'vue'

export interface TreeSelectProps extends BaseProps {
	/**
	 * 显示清除按钮
	 */
	allowClear?: boolean
	/**
	 * 下拉菜单的 className 属性
	 */
	dropdownClassName?: string
	/**
	 * 下拉菜单和选择器同宽。默认将设置 min-width，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动
	 */
	dropdownMatchSelectWidth?: boolean | number
	/**
	 * 下拉菜单的样式
	 */
	dropdownStyle?: object
	/**
	 * 自定义 options 中 label name children 的字段
	 */
	fieldNames?: OptionKeys
	/**
	 * 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值
	 */
	filterTreeNode?: boolean | ((inputValue: string, treeNode: object) => boolean)
	/**
	 * 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。
	 */
	getPopupContainer?: (triggerNode: VNode) => HTMLElement
	/**
	 * 是否把每个选项的 label 包装到 value 中，会把 value 类型从 string 变为 {value: string, label: VNode, halfChecked(treeCheckStrictly 时有效): string[] }的格式
	 */
	labelInValue?: boolean
	/**
	 * 设置弹窗滚动高度
	 */
	listHeight?: number
	/**
	 * 异步加载数据
	 */
	loadData?: (node: VNode) => void
	/**
	 * 	最多显示多少个 tag
	 */
	maxTagCount?: number
	/**
	 * 隐藏 tag 时显示的内容
	 */
	maxTagPlaceholder?: Slot | ((omittedValues: string) => void)
	/**
	 * 支持多选（当设置 treeCheckable 时自动变为 true）
	 */
	multiple?: boolean
	/**
	 * 当下拉列表为空时显示的内容当下拉列表为空时显示的内容
	 */
	notFoundContent?: Slot
	/**
	 * 搜索框默认文字
	 */
	searchPlaceholder?: string | Slot
	/**
	 * 搜索框的值，可以通过 search 事件获取用户输入
	 */
	searchValue?: string
	/**
	 * 定义选中项回填的方式。TreeSelect.SHOW_ALL: 显示所有选中节点(包括父节点). TreeSelect.SHOW_PARENT: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点.
	 */
	showCheckedStrategy?: 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD'
	/**
	 * 在下拉中显示搜索框(仅在单选模式下生效)
	 */
	showSearch?: boolean
	/**
	 * 选择框大小，可选 large small
	 */
	size?: 'large' | 'small' | 'default'
	/**
	 * 自定义的选择框后缀图标
	 */
	suffixIcon?: VNode | Slot
	/**
	 * 自定义 tag 内容，多选时生效
	 */
	tagRender?: Slot
	/**
	 * 自定义标题
	 */
	title?: Slot
	/**
	 * 显示 checkbox
	 */
	treeCheckable?: boolean
	/**
	 * checkable 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 labelInValue 强制为 true
	 */
	treeCheckStrictly?: boolean
	/**
	 * 使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:'1', label:"test1",...},...], pId 是父节点的 id)
	 */
	treeDataSimpleMode?: false | Array<{ id: string; pId: string; rootPId: null }>
	/**
	 * 默认展开所有树节点
	 */
	treeDefaultExpandAll?: boolean
	/**
	 * 默认展开的树节点
	 */
	treeDefaultExpandedKeys?: string[] | number[]

	/**
	 * 设置展开的树节点
	 * @param v
	 */
	treeExpandedKeys?: string[] | number[]
	/**
	 * 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式
	 */
	treeIcon?: boolean
	/**
	 * 是否展示线条样式，请参考 Tree - showLine
	 */
	treeLine?: boolean | object
	/**
	 * 输入项过滤对应的 treeNode 属性
	 */
	treeNodeFilterProp?: string
	/**
	 * 	作为显示的 prop 设置
	 */
	treeNodeLabelProp?: string
	/**
	 * 指定当前选中的条目
	 */
	value?: string | string[]
	/**
	 * 设置 false 时关闭虚拟滚动
	 */
	virtual?: boolean

	/**
	 * 	treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一）
	 */
	treeData?: Array<OptionProps> | Array<object>
	/**
	 * 额外需要返回的字段
	 */
	extraNames?: TreeSelectExtraProps
}

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

/**
 * 选择时额外的属性
 */
export interface TreeSelectCheckExtraProps {
	preValue?: Array<OptionProps> | Array<object>
	selected?: boolean
	allCheckedNodes?: Array<TreeSelectCheckedNode>
	triggerNode?: TreeSelectNode
}

export interface TreeSelectNode {
	props: OptionProps | object
}

export interface TreeSelectCheckedNode {
	children?: Array<TreeSelectNode> | Array<object>
	pos?: string
	node?: TreeSelectNode
}