import { CreateElement, VNode } from 'vue';
import { RenderHeaderData, TableColumn } from 'element-ui/types/table-column';
import { PopoverPlacement } from 'element-ui/types/popover';
import { AvueAlignment, AvueComponentSize, Obj } from '../global';
import { FormColumnEventBaseParams, FormColumnEventParams, AvueFormBaseColumn, AvueFormColumn, FormColumnEvent } from '../form/column';
import { DynamicFormColumnChildren } from '../form/components/dynamic';

/** 表单事件通用参数 */
export interface CrudColumnEventBaseParams<T = Obj, U = Obj> extends Omit<FormColumnEventBaseParams<T, U>, 'column' | 'columnIndex'> {
  /** 所在行 */
  index: number;
  /** 列配置 */
  column: AvueCrudColumn<T>;
  /** 列配置索引 */
  columnIndex: Record<string, AvueCrudColumn<T>>;
}

/**
 * 表单项事件参数，适用于click|blur|focus
 */
export interface CrudColumnEventParams<T = Obj, U = Obj> extends CrudColumnEventBaseParams<T, U> {
  /** 鼠标点击事件$event */
  event: MouseEvent;
}

/** 表格项通用参数 */
export interface CrudBaseColumn<T = Obj> {
  /** 列类型, 默认: 'input' */
  type?: string;
  /** 对应列内容的字段名 */
  prop?: string;
  /** 显示的标题 */
  label: string;
  /** 自定义组件名 */
  component?: string;
  /**
   * 是否隐藏列, 默认: false
   * @default false
   */
  hide?: boolean;
  /**
   * 是否加入动态现隐列, 默认: true
   * @default true
   */
  showColumn?: boolean;
  /** 列位置排序 */
  index?: number;
  /** 子列配置或明细组件配置 */
  children?: AvueCrudColumn[] | DynamicFormColumnChildren;
  /** 列标题 Label 区域渲染使用的 Function */
  renderHeader?: (h: CreateElement, data: RenderHeaderData) => VNode | string;
  /**
   * 是否允许行内编辑, 默认: false
   * @default false
   */
  cell?: boolean;
  /**
   * 开启标题html转义, 默认: false
   * @default false
   * @since 2.11.9
   */
  headerHtml?: boolean;
  /**
   * 表格标题，配合html参数可返回html
   * @param column 列配置
   * @param index 行索引，固定值0
   * @since 2.11.9
   */
  headerFormatter?: (column: AvueCrudColumn, index: number) => string;
  /**
   * 开启html转义, 默认: false
   * @default false
   * @since 2.8.23
   */
  html?: boolean;
  /**
   * 内容格式化，配合html参数可返回html
   * @param row 行数据
   * @param value 当前行列对应项的值
   * @param res formatter前的解析结果
   * @param column 列配置
   * @since 2.6.16
   */
  formatter?: (row: T, value: any, res: any, column: AvueCrudColumn) => string;
  /**
   * 表格打开表单的时候是否重新拉取字典, 默认: false
   * @default false
   */
  dicFlag?: boolean;
  /**
   * 是否开启列自定义, 默认: false
   * @default false
   * @deprecated 2.8.0
   */
  slot?: boolean;
  /**
   * 是否开启表头自定义, 默认: false
   * @default false
   * @since 2.7.8
   * @deprecated 2.8.0
   */
  headerslot?: boolean;
  // ======== 排序相关 ========
  /** 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件, 默认: false */
  sortable?: boolean | 'custom';
  /** 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 */
  sortBy?: string | string[];
  /**
   * 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序
   * @description 数组中的元素需为以下三者之一：'ascending' 表示升序，'descending' 表示降序，null 表示还原为原始顺序
   */
  sortOrders?: ('ascending' | 'descending' | null)[];
}

/** 表格项样式配置 */
export interface CrudColumnStyleOption {
  /** 当内容过长被隐藏时显示tooltip, 默认: false */
  overHidden: boolean;
  /** 对应列的宽度 */
  width: string | number;
  /** 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 */
  minWidth: string | number;
  /** 表头对齐方式, 默认: 'center' */
  headerAlign: AvueAlignment;
  /** 表格列齐方式, 默认: 'center' */
  align: AvueAlignment;
  /** 列是否固定在左侧或者右侧，true 表示固定在左侧 */
  fixed: boolean | 'left' | 'right';
  /** 对应列是否可以通过拖动改变宽度（需要 option.border: true）, 默认: true */
  resizable: boolean;
}

/** 表格项通用搜索相关配置 */
export interface CrudColumnSearchOption<T = Obj> {
  /** 是否搜索项, 默认: false */
  search: boolean;
  /** 自定义搜索组件 */
  searchComponent: string;
  /**
   * 搜索项默认值
   * @since 2.8.21
   */
  searchValue: any;
  /**
   * 搜索项placeholder
   * @since 2.8.20
   */
  searchPlaceholder: string;
  /**
   * 搜索项弹窗编辑文字提示
   * @since 2.8.20
   */
  searchTip: string;
  /**
   * 搜索项搜索框辅助文字提示展示方向
   * @since 2.8.20
   */
  searchTipPlacement: PopoverPlacement;
  /** 搜索项的长度, 默认: 6 */
  searchSpan: number;
  /**
   * 组件尺寸
   * @since 2.6.0
   */
  searchSize: AvueComponentSize;
  /**
   * 搜索项排序
   * @since 2.8.20
   */
  searchOrder: number;
  /** 搜索项之间的间距, 默认: 20 */
  searchGutter: number;
  /**
   * 搜索项类型
   *
   * Tip: 若未填写该项，则搜索项的类型如下：
   *
   * 'radio', 'checkbox', 'switch' -> 'select'
   *
   * 'textarea' -> 'input'
   *
   * 时间类型的，如果searchRange为true，则为对应时间类型的范围搜索，否则为时间类型(本身有范围的，取消范围)
   *
   * 其余的，同type
   */
  searchType: string;
  /** 是否范围搜索, 默认: false */
  searchRange: boolean;
  /** 搜索项label, 默认: 同label */
  searchLabel: string;
  /** 搜索项label的宽度, 默认: 80 */
  searchLabelWidth: number;
  /** 搜索项label的定位, 默认: 'right' */
  searchLabelPosition: AvueAlignment;
  /**
   * 搜索框的清除按钮
   * @since 2.8.20
   */
  searchClearable: boolean;
  /**
   * 搜索表单是否多选（仅对支持multiple参数的组件生效）
   * @since 2.8.20
   */
  searchMultiple: boolean;
  /**
   * 多选时是否将选中值按文字的形式展示（仅对支持tag参数的组件生效）
   * @since 2.8.20
   */
  searchTags: boolean;
  /**
   * 搜索项校验规则
   * @since 2.8.21
   */
  searchRules: Obj[];
  /**
   * 搜索项是否单独成行, 默认: false
   * @since 2.85.22
   */
  searchRow: boolean;
  /**
   * 搜索项深结构数据绑定取值
   * @since 2.9.12
   */
  searchBind: string;
  /**
   * 搜索项深结构数据绑定取值(官方版avue持续使用，自用版本自2.9.12中删除该项，改为searchBind)
   * @since 2.9.3
   * @deprecated 2.9.12
   */
  searchBin: string;
  /**
   * 搜索项是否禁用, 默认: false
   * @since 2.9.3
   */
  searchDisabled: boolean;
  /**
   * 搜索项是否只读, 默认: false
   * @since 2.9.3
   */
  searchReadonly: boolean;
  /**
   * 是否可以输入搜索（仅对支持filterable参数的组件生效）
   * @since 2.8.20
   */
  searchFilterable: boolean;
  /**
   * 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
   * @param value 搜索值
   * @param row 搜索表单值
   * @param column el-table列配置
   */
  searchFilterMethod: (value: any, row: T, column: TableColumn) => boolean;
  /**
   * 字段控制器, 不使用箭头函数
   * @param value 表单项的值
   * @param form 表单值
   * @example https://avuejs.com/form/form-control.html
   */
  searchControl: (value: any, form: T) => Record<string, Partial<AvueFormColumn>>;
  /**
   * 表格搜索选项的自定义
   * @since 2.2.3
   * @deprecated 2.8.0
   */
  searchslot: boolean;
}

/** 表格项通用过滤相关配置 */
export interface CrudColumnFilterOption<T = Obj> {
  /**
   * 是否在动态搜索条件里面显示, 默认: true
   * @default true
   */
  filter: boolean;
  /** 是否开启过滤, 默认: false */
  filters: boolean;
  /** 数据过滤的选项是否多选, 默认: true */
  filterMultiple: boolean;
  /** 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 */
  filterMethod: (value: any, row: T, column: TableColumn) => boolean;
}

/** 表格项表单相关配置 */
export interface CrudFormColumnOption {
  /**
   * 表单是否为查看模式, 优先级高于addDetail/editDetail, 默认: false
   * @description 2.8.19-21 版本不支持该参数
   * @default false
   * @since 2.5.3
   */
  detail: boolean;
  /**
   * 表单新增时是否为查看模式, 默认: false
   * @description 2.8.19-21 版本不支持该参数
   * @default false
   * @since 2.5.3
   */
  addDetail: boolean;
  /**
   * 表单编辑时是否为查看模式, 默认: false
   * @description 2.8.19-21 版本不支持该参数
   * @default false
   * @since 2.5.3
   */
  editDetail: boolean;
  /**
   * 表单是否为禁用, 优先级高于addDisabled/editDisabled, 默认: false
   * @default false
   */
  disabled: boolean;
  /**
   * 表单新增时是否为禁用, 默认: false
   * @default false
   */
  addDisabled: boolean;
  /**
   * 表单编辑时是否为禁用, 默认: false
   * @default false
   */
  editDisabled: boolean;
  /**
   * 表单是否为可见, 优先级高于addDisplay/editDisplay/viewDisplay, 默认: false
   * @default false
   */
  display: boolean;
  /**
   * 表单新增时是否为可见, 默认: false
   * @default false
   */
  addDisplay: boolean;
  /**
   * 表单编辑时是否为可见, 默认: false
   * @default false
   */
  editDisplay: boolean;
  /**
   * 表单查看时是否为可见, 默认: false
   * @default false
   */
  viewDisplay: boolean;
  /**
   * 表单新增时排序
   * @description 需要注意的是，如果其他列配置了order，将会混合
   * @since 2.11.16
   */
  addOrder: number;
  /**
   * 表单编辑时排序
   * @description 需要注意的是，如果其他列配置了order，将会混合
   * @since 2.11.16
   */
  editOrder: number;
  /**
   * 表单查看时排序
   * @description 需要注意的是，如果其他列配置了order，将会混合
   * @since 2.11.16
   */
  viewOrder: number;
  /**
   * 表单项是否单独成行, 默认: false
   * @default false
   */
  row: boolean;
  /**
   * 是否可以清空选项, 默认: false
   * @default false
   */
  clearable: boolean;
}

/** 表单项通用事件 */
export interface CrudFormColumnEvent<T = Obj> {
  /**
   * 字段控制器, 不使用箭头函数
   * @param value 表单项的值
   * @param form 表单值
   * @since 2.11.3
   */
  control: (value: any, form: T, tableData: CrudColumnEventBaseParams<T> | FormColumnEventBaseParams<T>) => Record<string, Partial<AvueFormColumn>>;
  /**
   * 点击事件
   * @description 当且仅当列为行编辑模式时为CrudColumnEventParams<T>
   * @since 2.9.6
   */
  click: (params: CrudColumnEventParams<T> | FormColumnEventParams<T>) => void;
  /**
   * 值改变事件
   * @description 当且仅当列为行编辑模式时为CrudColumnEventParams<T>
   * @since 2.9.6
   */
  change: (params: CrudColumnEventBaseParams<T> | FormColumnEventBaseParams<T>) => void;
  /**
   * 聚焦事件
   * @description 当且仅当列为行编辑模式时为CrudColumnEventParams<T>
   * @since 2.9.6
   */
  focus: (params: CrudColumnEventParams<T> | FormColumnEventParams<T>) => void;
  /**
   * 失焦事件
   * @description 当且仅当列为行编辑模式时为CrudColumnEventParams<T>
   * @since 2.9.6
   */
  blur: (params: CrudColumnEventParams<T> | FormColumnEventParams<T>) => void;
  /**
   * 事件源码
   * @since 2.9.12(伪)
   */
  _event?: Record<string, string>;
  /**
   * 回车事件
   */
  enter: (params: FormColumnEventBaseParams<T>) => void;
  /** 事件 */
  event: Partial<Omit<CrudFormColumnEvent<T>, 'control' | 'event' | '_event'>>;
}

/** 表格项通用参数 */
export interface AvueCrudBaseColumn<T = Obj>
  extends CrudBaseColumn<T>,
    Partial<CrudColumnStyleOption>,
    Partial<CrudColumnSearchOption<T>>,
    Partial<CrudColumnFilterOption<T>>,
    Partial<CrudFormColumnOption>,
    Partial<CrudFormColumnEvent<T>> {}

/**
 * 表格项配置
 * TODO 表格项个性化配置待完成
 */
// export type AvueCrudColumn<T = Obj> = AvueCrudBaseColumn<T> &
//   Omit<AvueFormColumn<T>, keyof FormColumnEvent<T>> & {
//     /** 其他配置 */
//     [x: string]: any;
//   };
export type AvueCrudColumn<T = Obj> = AvueCrudBaseColumn<T> &
  Omit<AvueFormBaseColumn<T>, keyof FormColumnEvent<T>> & {
    /** 其他配置 */
    [x: string]: any;
  };