import type { TableColumn, DatePicker } from 'element-ui'

export enum IEditType {
  INPUT = 'input',
  SELECT = 'select',
  DATE_ONLY = 'date'
}

export interface ISortOption {
  prop: string
  label: string
}

/** 筛选组件 - 输入框 */
export interface IFilterInput {
  type: 'input'
  prop: string,
  label?: string,
  validator?: (value: string) => boolean
  placeholder?: string
}

export interface IFilterSelectOptions {
  value: any;
  text: string;
  [key: string]: any;
}

/** 筛选组件 - 单选/多选 */
export interface IFilterSelect {
  type: 'radio' | 'checkbox'
  prop: string
  options: IFilterSelectOptions[]
  label?: string
  defaultValue?: any | any[]
}

/** 筛选组件 - 日期范围（拆分两个日期选择器） */
export interface IFilterDoubleDatePickerBase {
  type: 'doubleDatePicker',
  prop: [string, string],
  label?: string,
}

export interface IFilterDoubleDatePicker extends IFilterDoubleDatePickerBase {
  pickerOptions?: {
    start?: DatePicker['pickerOptions']
    end?: DatePicker['pickerOptions']
  }
}

export interface IFilterDoubleDatePickerLimit extends IFilterDoubleDatePickerBase {
  /** 限制天数范围 */
  limit?: number
}

/** 筛选组件 - 月日选择器 */
export interface IFilterMonthDayPicker {
  type: 'monthDayPicker',
  prop: [string, string],
  label?: string,
  /** 可选择的范围 */
  limit: number,
}

/** 筛选组件 - 颜色选择器 */
export interface IFilterColorRadio {
  type: 'colorRadio',
  prop: string,
  label?: string,
  options: Array<IFilterSelectOptions & { color: string }>
}

export interface IFilterSlot {
  type: 'slot',
  slotName: string,
  active: () => boolean
}

export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterDoubleDatePickerLimit | IFilterMonthDayPicker | IFilterColorRadio | IFilterSlot

/** 筛选组件类型 */
export type FilterListType = Array<FilterItem>

type _IColumnConfigRequired = {
  prop: string;
  label: string;
  editType?: IEditType; // 编辑格式
  editSlotName?: string; // 编辑时，自定义编辑组件的slotName
  sortable?: boolean | ISortOption[]; // 该列是否允许排序，ture则表头弹窗会显示升降序按钮
  _sortable?: _IColumnConfigRequired['sortable']; // 内部使用，el-table 的 sortable 不支持数组，用来同步 sortable
  /** 内部使用， */
  isColumnSortable?: boolean;
  slotName?: string; // 如果要自定义，传入 slotName
  hoverSlotName?: string; // 悬浮时，自定义悬浮组件的slotName
  isAlwaysShow?: boolean; // 不可隐藏，显示设置中，该列不允许隐藏
  /** 默认隐藏，显示设置中，该列默认隐藏 */
  defaultHide?: boolean;
  summary?: boolean; // 是否可以显示该列的统计
  summaryMethod?: (values: any[]) => string | number; // 这一列的统计方法，values为该列的所有值
  /** 格式化函数，用于自定义渲染 */
  formatter?: (row: any, column: IColumnConfig, value: any, index: number) => string | number;
  width?: number | string;
  minWidth?: number | string;
  /** 自定义颜色表头label */
  customColorLabel?: boolean;
  filters?: FilterListType;
  selectOptions?: any
}

export type IColumnConfigRequired = _IColumnConfigRequired & Partial<Omit<TableColumn, keyof _IColumnConfigRequired>>

type IInputColumn = IColumnConfigRequired & {
  inputType: string | number;
}

type ISelectColumn = IColumnConfigRequired & {
  options: { key: string; value: string | number;[key: string]: any }[];
}

type IDateOnlyColumn = IColumnConfigRequired
type IDateTimeColumn = IColumnConfigRequired

export type IColumnConfig = IInputColumn | ISelectColumn | IDateOnlyColumn | IDateTimeColumn

export type IColorList = {
  name: string; // 颜色名称
  textColor: string; // 颜色弹窗中文本颜色
  sampleColor: string; // 颜色弹窗中样例的颜色
  bgColor: string; // 选中颜色后，行背景色
  id: number; // 颜色id
  default?: boolean // 是否是默认色，默认色需要显示颜色图标
}[]

type IPointLoc = {
  x: number;
  y: number;
}
export type IDraggingData = {
  isDragging?: boolean
  startPosition?: IPointLoc
  draggingRow?: HTMLElement | HTMLElement[]
  draggingIndex?: number
  dropIndex?: number
  rowDoms?: Record<number, HTMLElement[]>
  rowHeight?: number
  rowsRange?: ([number, number] | undefined)[]
  hiddenTds?: HTMLElement[]
  fullScreenDiv?: HTMLElement
}

export type IDefaultOperationType = 'edit' | 'delete' | 'top'

export type ITableDataItem = {
  colorId?: number;
  isPinned?: boolean;
  // 固定背景色：如果行数据中有该值，行背景色将以该值为准，优先级大于colorId指定的背景色（颜色实例不受影响）
  __static_bg_color__?: string;
  [k: string]: any;
}

export type SettingStorgeConfig = {
  version: string,
  config: {
    fields: Record<string, { hidden: boolean, order: number }>,
    leftFixedColumnCount: number
  }
}

export type SettingStorgeMigrationConfigs = {
  schemaVersion?: number
  version: {
    form: string
    to: string
  }
  migration: (currentConfig: any, columns: IColumnConfig[]) => SettingStorgeConfig
}[]

export interface IProps {
  dataList: ITableDataItem[];
  columnConfig: IColumnConfig[];
  hasExpandRow?: boolean;
  hasIndexColumn?: boolean;
  hasSelectionColumn?: boolean;
  rowDragAble?: boolean;
  total: number;
  defaultOperations?: IDefaultOperationType[];
  colorList?: IColorList;
  colorFilterConfig?: IColumnConfig
  leftFixedCount?: number;
  dragSemiRange?: number;
  loading?: boolean;
  settingStorgeKey?: string
  settingStorgeMigrationConfigs?: SettingStorgeMigrationConfigs
  localSort?: boolean
  localFilter?: boolean
  currentPage: number
  pageSize?: number
  pageSizes?: number[]
}

export interface IEmits {
  (e: 'selection-change', selection: any): void
  (e: 'row-bg-change', param: { colorId: number; row: ITableDataItem; rowIndex: number }): void
  (e: 'row-drag-drop', param: { row: any; fromIndex: number; toIndex: number; page: number; size: number; }): void
  (e: 'row-delete', param: { row: any; index: number; page: number; size: number; }): void
  (e: 'row-edit', param: { row: any, index: number; page: number; size: number; }): void
  (e: 'row-pin-to-top', param: { row: any, rawIndex: number; page: number; size: number; }): void
  (e: 'row-edit-save', param: { page: number; size: number; row: any; changedData: Record<string, any>; }): void
  (e: 'row-edit-cancel', param: { row: any; page: number; size: number; }): void
  (e: 'page-change', param: { page: number, size: number }): void
  (e: 'search', param: Record<string, any>): void
  (e: 'sort-change', param: { order: 'descending' | 'ascending' | null, prop: string }): void
}