import { ColumnType } from 'ant-design-vue/lib/table/interface'
import { ParamsItemType, QueryType } from '../../http/request-model'
import { OptionKeys } from '../form-item/props'
import { CSSProperties } from 'vue'

// export type TypeName = 'image' | 'time-range'
//
// export interface ColumnsImageType<RecordType> {
// 	url: (opt: { value: string; text: string; record: RecordType; index: number; renderIndex: number; column: ColumnType<RecordType> }) => string
// 	fallback: string
// 	width?: number
// }
//
// export interface RenderTimeSlot {
// 	// 开始显示时间（上半部分显示时间）
// 	startTime?: string
// 	// 开始显示时间颜色（上半部分显示时间颜色）
// 	startTimeColor?: string
// 	// 开始显示时间css样式（上半部分显示时间css样式）
// 	startTimeStyle?: string
// 	// 时间显示的格式
// 	startFormat?: string
// 	// 结束显示时间（下半部分显示时间）
// 	endTime?: string
// 	// 结束显示时间颜色（下半部分显示时间颜色）
// 	endTimeColor?: string
// 	// 结束显示时间css样式（下半部分显示时间css样式）
// 	endTimeStyle?: string
// 	// 时间显示的格式
// 	endFormat?: string
// }
//
// export interface BaseRender<Type extends TypeName, PropType> {
// 	name: Type
// 	option: PropType
// }

/**
 * 表格的列对象接口
 */
export interface ColumnsProps<T> extends ColumnType<T> {
	/**
	 * 是否隐藏
	 */
	hidden?: boolean
	/**
	 * 省略号行数
	 */
	ellipsisRow?: number
	/**
	 * 自定义渲染
	 */
	// render?: BaseRender<'image', ColumnsImageType<T>> | BaseRender<'time-range', RenderTimeSlot>
	/**
	 * 子级
	 */
	children?: Array<ColumnType<T>>
}

/**
 * 强类型的列对象
 */
export type StrongColumnsProps<T> = { dataIndex?: keyof T } & ColumnsProps<T>

/**
 * 表格的操作列对象接口
 */
export interface OperationProps<T> {
	/**
	 * 操作名称
	 */
	title: string
	/**
	 * 是否隐藏，默认不隐藏
	 */
	hidden?: boolean
	/**
	 * 是否危险按钮
	 */
	danger?: boolean
	/**
	 * 上方分隔线
	 */
	divider?: boolean
	/**
	 * 上方分隔线
	 */
	topDivider?: boolean
	/**
	 * 下方分隔线
	 */
	bottomDivider?: boolean
	/**
	 * 权限判断（以当前的路由信息进行判断）
	 */
	permission?: boolean | string
	/**
	 * 按钮样式
	 */
	style?: CSSProperties

	/**
	 * 渲染操作名称
	 * @param record
	 */
	titleRender?(record: T): string

	/**
	 * 数据验证判断是否显示该-操作按钮，如果为true显示
	 * @param record
	 */
	check?(record: T): boolean

	/**
	 * 点击后调用的方法
	 * @param record 当前行的记录
	 * @param el 当前行的元素
	 */
	action(record: T, el?: HTMLElement | null): void
}

/**
 * 批量操作的按钮组
 */
export interface BatchOperationProps<T> {
	/**
	 * 操作名称
	 */
	title: string

	/**
	 * 是否危险按钮
	 */
	danger?: boolean
	/**
	 * 权限判断（以当前的路由信息进行判断）
	 */
	permission?: boolean | string

	/**
	 * 渲染操作名称
	 * @param recordList
	 */
	titleRender?(recordList: T[]): string

	/**
	 * 数据验证判断是否显示该操作按钮，如果为true显示
	 * @param recordList
	 */
	check?(recordList: T[]): boolean

	/**
	 * 点击后调用的方法
	 * @param params 当前行的记录
	 */
	action(
		params: Required<{
			recordList: T[]
			keys: string[]
		}>
	): void
}

/**
 * 查询参数接口
 */
export interface SearchProps {
	// 主要类型
	type: 'text' | 'select' | 'date-picker' | 'date-time-picker' | 'time-picker' | 'sort' | 'number' | 'auto-complete'
	// label
	label?: string
	// 提交的字段名称
	field: string
	// 绑定的数据
	value: ParamsItemType
	// 占位大小
	span?: number
	// 是否隐藏
	hidden?: boolean
	// 占位提示信息
	placeholder?: string
	// 当类型为 select 的时候的选项数据
	options?: Array<SearchOptionProps> | Array<object> | DatePicker | TimePicker | DateTimePicker | NumberPicker
	/**
	 * 自定义 options 中 label name children 的字段
	 */
	fieldNames?: OptionKeys
	text?: string
	order?: string

	// 真实的提交字段名称
	beforeArrayGet?(value: string[]): QueryType

	changeMethod?(): void
}

/**
 * 查询条件接口
 */
export interface SearchOptionProps {
	key: string | number
	value: string | number | boolean
	text: string
}

/**
 * 日期选择框
 */
export interface DatePicker {
	// 是否是范围选择器
	range?: boolean
	// 展示的时间格式 HH:mm:ss
	format?: string
	// 设置选择器类型
	picker?: 'date' | 'week' | 'month' | 'quarter' | 'year'
	// 绑定值的格式，对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象
	valueFormat?: string
}

/**
 * 时间选择框
 */
export interface TimePicker {
	// 是否是范围选择器
	range?: boolean
	// 展示的时间格式 HH:mm:ss
	format?: string
	// 小时选项间隔
	hourStep?: number
	// 	分钟选项间隔
	minuteStep?: number
	// 	秒选项间隔
	secondStep?: number
	// 	面板是否显示“此刻”按钮
	showNow?: boolean
	// 绑定值的格式，对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象
	valueFormat?: string
}

/**
 * 日期时间选择框
 */
export interface DateTimePicker extends DatePicker, TimePicker {}

/**
 * 数字范围框
 */
export interface NumberPicker {
	// 是否是范围选择器
	range?: boolean
}

export interface SearchPropsState {
	// 是否需要显示关键字查询
	useKeywords?: boolean
	// 查询条件对象
	search?: SearchProps[]
}