import { CreateElement, VNode } from 'vue'
import { MmUIComponent } from './component'

export interface columnRenderArgs {
  /** Data item of table */
  row: any

  /** Row index of this item */
  rowIndex: number

  /** Col index of this item */
  colIndex: number
}

export interface titleRender {
  (h: CreateElement): VNode
}

export interface column {
  /** Table header column merge, set to 0, not render */
  colSpan: number

  /** The key that corresponds to the column data in the data item */
  key: string

  /** Filter menu items for table headers */
  filters: any[]

  /** Whether the column is fixed */
  fixed: 'left' | 'right' | ''

  /** A rendering function that generates complex data */
  render(h: CreateElement, args: columnRenderArgs): VNode

  /** Sort function, local sort using a function (reference Array.sort) */
  sorter(prevRow: any, nextRow: any): boolean

  /** The column header displays the text and you can set the function to return a custom column header */
  title: string | titleRender

  /** The filtered run function */
  onFilter(filterValue: string, row: any): boolean
}

export interface rowSelection {
  /** Default property configuration of the row checkbox */
  getCheckboxProps(row: {[key: string]: any}): {
    disabled: boolean
    [key: string]: any
  }

  /** Customize the option configuration item, referring to the options parameter of the select component */
  selections: {[key: string]: any}[]

  /** A callback when the selection changes */
  onChange(selectedRows: { [key: string]: any }[]): void

  /** Custom callbacks when a selection changes */
  onSelectionChange(value: string): void
}

/** Table component */
export declare class MmTable extends MmUIComponent {
  /** Configuration description for table columns */
  columns: column[]

  /** The data array */
  dataSource: {
    [key: string]: any
  }[]

  /** Checked list */
  selectedRows: {
    [key: string]: any
  }[]

  /** Maximum table height */
  height: number

  /** Maximum table width */
  width: number

  /** Table size */
  size: string

  /** Select the configuration of the function, as shown in the table below */
  rowSelection: rowSelection

  /** Shows the outer border and column borders */
  bordered: boolean

  /** A calculation method for merging rows or columns  */
  spanMethod(row: any, column: column, rowIndex: number, columnIndex: number): number
}