import { VNode } from 'vue';
import { ElPagination } from 'element-ui/types/pagination';
import { cellCallbackParams, rowCallbackParams, SummaryMethodParams } from 'element-ui/types/table';
import { ElForm } from 'element-ui/types/form';
import { ElTable } from 'element-ui/types/table';
import { ElUploadInternalRawFile } from 'element-ui/types/upload';

import { AvueComponent, Obj, AvueComponentSize } from '../global';
import { DicProps } from '../variable';
import { CrudOption } from './option';
import { AvueCrudColumn } from './column';
import { AvueCrudHeaderSearch } from './refs/header-search';
import { AvueCrudTablePage } from './refs/table-page';
import { AvueCrudDialogColumn } from './refs/dialog-column';
import { AvueCrudDialogForm } from './refs/dialog-form';
import { AvueCrudDialogExcel } from './refs/dialog-excel';
import { AvueCrudDialogFilter } from './refs/dialog-filter';
import { DynamicFormColumnEventParams } from '../form/components/dynamic';
import { ValidateCallbackMsgInfo } from '../form/index';

/** 表单打开类型 */
export type AvueCrudFormMode = 'add' | 'edit' | 'view';

/** 权限类型 */
export type AvueCrudPermission =
  | 'addBtn'
  | 'addRowBtn'
  | 'excelBtn'
  | 'printBtn'
  | 'refreshBtn'
  | 'columnBtn'
  | 'filterBtn'
  | 'menu'
  | 'viewBtn'
  | 'editBtn'
  | 'saveBtn'
  | 'copyBtn'
  | 'delBtn'
  | 'selectClearBtn';

/** 表格Refs */
export interface AvueCrudRefs<T = Obj> {
  /**
   * 搜索组件
   * @description 包含了search、prop+'SearchLabel'、prop+'Search'、searchMenu插槽
   */
  headerSearch: AvueCrudHeaderSearch;
  /**
   * 顶部菜单组件
   * @description 包含了menuLeft和menuRight插槽
   */
  headerMenu: Vue;
  /**
   * 表格表单组件
   * @description 用于行编辑时表单校验
   */
  cellForm: ElForm;
  /**
   * 默认列组件
   * @description 表格的默认列(序号、折叠面板、选择框)，包含了expand插槽
   */
  columnDefault: Vue;
  /** 表格组件 */
  table: ElTable;
  /** 分页组件 */
  tablePage: AvueCrudTablePage;
  /** 内置弹窗组件 */
  dialogForm: AvueCrudDialogForm<T>;
  /** 列显隐组件 */
  dialogColumn: AvueCrudDialogColumn;
  /** 导出数据组件 */
  dialogExcel: AvueCrudDialogExcel;
  /** 过滤器组件 */
  dialogFilter: AvueCrudDialogFilter;
  // 添加索引签名，使得任意字符串键都能映射到Element或Vue实例
  [key: string]: Element | Vue | undefined;
}

/** 表格组件 */
export declare class AvueCrud<T = Obj, S = Partial<T>> extends AvueComponent {
  // ========== 属性 ==========
  /**
   * 打开前的回调，会暂停Dialog的打开
   * @param done 用于关闭Dialog
   * @param type 当前窗口的类型
   * @param form Dialog的表单数据
   */
  beforeOpen: (done: Function, type: string, form: T) => void;
  /**
   * 关闭前的回调，会暂停Dialog的关闭
   * @param done 用于关闭Dialog
   * @param type 当前窗口的类型
   * @param form Dialog的表单数据
   */
  beforeClose: (done: Function, type: string, form: T) => void;
  /** 表格数据 */
  data: T[];
  /** 默认配置 */
  config: Obj;
  /** 分页的变量(需要sync修饰符) */
  page: ElPagination;
  /** 搜索的变量(需要sync修饰符) */
  search: S;
  /** 组件配置属性 */
  option: CrudOption;
  /** 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 */
  rowClassName: string | ((param: rowCallbackParams) => string);
  /** 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 */
  rowStyle: Obj | ((param: rowCallbackParams) => Obj);
  /** 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 */
  cellClassName: string | ((param: cellCallbackParams) => string);
  /** 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 */
  cellStyle: Obj | ((param: cellCallbackParams) => Obj);
  /** 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 */
  headerRowClassName: string | ((param: rowCallbackParams) => string);
  /** 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 */
  headerRowStyle: Obj | ((param: rowCallbackParams) => Obj);
  /** 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 */
  headerCellClassName: string | ((param: cellCallbackParams) => string);
  /** 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 */
  headerCellStyle: Obj | ((param: cellCallbackParams) => Obj);
  /** 合并行或列的计算方法 */
  spanMethod: (param: rowCallbackParams) => { rowspan: number; colspan: number } | number[];
  /** 自定义的合计计算方法 */
  summaryMethod: (param: SummaryMethodParams) => any[];
  /** 表格等待框的控制 */
  tableLoading: boolean;
  /**
   * 文件上传前的回调,会暂停文件上传
   * @param file 上传的文件
   * @param done 用于继续文件上传
   * @param loading 用于中断操作
   */
  uploadBefore: (file: ElUploadInternalRawFile, done: Function, loading: Function) => void;
  // TODO upload-after/upload-delete/upload-preview/upload-error/upload-exceed
  // ========== 方法 ==========
  /** 初始化数据字典 */
  dicInit(type?: 'cascader'): void;
  /**
   * 移除弹窗表单项的校验结果。
   * @param {string | string[]} [props] 传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
   */
  clearValidate?: (props?: string | string[]) => void;
  /** 打开表单新增窗口 */
  rowAdd(): void;
  /** 表单保存调用 */
  rowSave(): void;
  /** 表单更新调用 */
  rowUpdate(): void;
  /**
   * 弹窗表单校验
   * @description 参数为一个回调函数。该回调函数会在校验结束后被调用，并传入三个参数：valid:是否校验成功、hide:取消表单禁用方法、msg:未通过校验的字段
   * @since 2.12.2
   */
  rowValidate(
      callback: (
        /** 校验是否成功 */
        valid: boolean,
        /** 取消表单禁用状态的方法 */
        hide: () => void,
        /** 未通过校验的字段提示信息 */
        msg?: ValidateCallbackMsgInfo
      ) => void
    ): void;
  /**
   * 关闭内置的表单弹窗
   * @since 2.5.1
   */
  closeDialog(): void;
  /**
   * 获取prop的ref对象
   * @param prop 表单项的 prop 属性
   */
  getPropRef<K extends keyof AvueCrudRefs<T>>(prop: K): AvueCrudRefs<T>[K];
  /**
   * 打开表单查看窗口
   * @param row 表单数据
   * @param index 表单所在行
   */
  rowView(row: T, index: number): void;
  /**
   * 打开表单编辑窗口
   * @param row 表单数据
   * @param index 表单所在行
   */
  rowEdit(row: T, index: number): void;
  /**
   * 删除表单
   * @param row 表单数据
   * @param index 表单所在行
   */
  rowDel(row: T, index: number): void;
  /**
   * 将行数据复制，并打开新增窗口
   * @param row 表单数据
   * @since 2.6.14
   */
  rowCopy(row: T): void;
  /** 新增行 */
  rowCellAdd(row?: Partial<T>): void;
  /**
   * 打开行编辑
   * @param row 表单数据
   * @param index 表单所在行
   */
  rowCell(row: T, index: number): void;
  /**
   * 取消行编辑
   * @param row 表单数据
   * @param index 表单所在行
   */
  rowCancel(row: T, index: number): void;
  /**
   * 删除行
   * @param row 表单数据
   * @param index 表单所在行
   */
  rowCellDelete(row: T, index: number): void;
  /**
   * 行内表单校验(整体)
   */
  validateCellForm(): Promise<{ valid: boolean, msg?: Record<string, {
    /** 错误提示 */
    message: string;
    /** 错误字段，规则list.行号.prop */
    field: string;
  }[]> }>;
  /**
   * 对指定行表单项进行校验
   * @param index 所在行
   */
  validateCellField(index: number): void;
  /**
   * 清除行编辑模式表单项校验结果
   * @since 2.10.24
   */
  clearCellFormValidate(): void;
  /** 打印表格 */
  rowPrint(): void;
  /** 导出表格 */
  rowExcel(): void;
  /** 清空表单数据 */
  resetForm(): void;
  /**
   * 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
   * @param {object} [row] 需要高亮的行
   */
  setCurrentRow(row?: T): void;
  /**
   * 用于多选表格，清空用户的选择
   * @deprecated 2.10.10
   */
  selectClear(): void;
  /**
   * 用于多选表格，清空用户的选择
   * @description 清空选择，并通过@selection-clear返回被清空的数据
   * @since 2.10.10
   */
  clearSelection(): void;
  /** 清空搜索栏目的值 */
  searchReset(): void;
  /**
   * 用于多选表格，切换选中状态。如果调用时不加参数，则会清空用户的选择。
   * @param rows 需要切换选中状态的行
   */
  toggleSelection(rows?: T[]): void;
  /** 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） */
  toggleRowSelection(row: T, select?: boolean): void;
  /** 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） */
  toggleRowExpansion(row: T, expanded?: boolean): void;
  /** 清空排序 */
  clearSort(): void;
  /** 动态计算表格高度 */
  getTableHeight(): void;
  /** 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 */
  doLayout(): void;
  /** 列初始化 */
  columnInit(): void;
  /** 刷新表格 */
  refreshTable(callback?: Function): void;
  /**
   * 根据主键ID查找数据
   * @description 此处的数据来源为crud组件中传入的data值，当ID为数据项中某个children中的值时，parent即为该数据项，parentList为该数据项的children，否则parent为undefined，parentList为传入的data
   * @since 2.9.4
   */
  findData: (id: string | number) =>
    | {
        /** 查找到的数据 */
        item: T;
        /** 数据的序号 */
        index: number;
        /** 上级数据列表 */
        parentList: T[];
        /** 上级数据 */
        parent?: T;
      }
    | {};
  /** 组件Refs */
  readonly $refs: AvueCrudRefs<T>;
}

/** 通用插槽 */
export interface CrudNormalScope<T = Obj> {
  /** 数据 */
  row: T;
  /** 数据所在行序号 */
  index: number;
  /** 列配置 */
  column: AvueCrudColumn<T>;
  /** 大小 */
  size: AvueComponentSize;
  /** 文字 */
  label: string;
}

/** 通用搜索插槽 */
export interface CrudSearchFormNormalScope<T = any, R = Obj> {
  /** 数据，与search相同 */
  row: R;
  /** 数据，与row相同 */
  search: R;
  /** 表单值 */
  value: T;
  /** 列配置 */
  column: AvueCrudColumn<R>;
  /** 大小 */
  size: AvueComponentSize;
  /** 是否禁用 */
  disabled: boolean;
  /** 数据字典 */
  dic?: Obj[];
}

/** 通用弹窗表单插槽 */
export interface CrudFormNormalScope<T = any> {
  /** 表单值 */
  value: T;
  /** 列配置 */
  column: AvueCrudColumn;
  /** 大小 */
  size: AvueComponentSize;
  /** 是否禁用 */
  disabled: boolean;
  /** 表单弹窗类型 */
  type: AvueCrudFormMode;
}

/** 通用行内弹窗表单插槽 */
export interface CrudCellFormNormalScope<T = any, D = Obj> extends CrudNormalScope<D> {
  /** 数据字典 */
  dic?: Obj[];
  /** 列配置 */
  tableData: {
    /** 行索引 */
    index: number;
    /** 行数据 */
    row: D;
    /** 显示值 */
    label: string;
    /** 列索引 */
    columnIndex: Record<string, AvueCrudColumn>;
    /** 数据字典 */
    dic?: Obj[];
    /** 根表单数据，明细组件时有值 */
    rootFormData?: DynamicFormColumnEventParams;
  };
  /** props配置 */
  props?: DicProps;
  /** 是否只读 */
  readonly?: boolean;
  /** 是否禁用 */
  disabled?: boolean;
  /** 是否显示清空按钮 */
  clearable: boolean;
}