import { ElPagination } from 'element-ui/types/pagination';
// 引入定义
import { ElForm } from 'element-ui/types/form';
import { AvueComponent, Obj, AvueComponentSize } from '../global';
import { DicHttpProps } from '../variable';
import { FormOption } from './option';
import { AvueFormColumn, DicProps } from './column';

/** 表单Refs */
export interface AvueFormRefs {
  /** 表单组件 */
  form: ElForm;
  // 添加索引签名，使得任意字符串键都能映射到Element或Vue实例
  [key: string]: Element | Vue | undefined;
}

export interface ValidateCallbackMsgInfo {
  [field: string]: {
    /** 字段名(prop) */
    field: string;
    /** 错误内容 */
    message: string;
  }[] | ValidateCallbackMsgInfo;
}

/** 表单组件 */
export declare class AvueForm<T = Obj> extends AvueComponent {
  // ========== 属性 ==========
  /** 表单配置 */
  readonly option: FormOption<T>;
  /** 表单值 */
  readonly value: Obj;
  /** 表单dic数据 */
  DIC: Record<string, Obj[]>;
  /**
   * 当前表单状态
   * @description 仅支持sync方式，用于告知外部当前状态
   */
  status: boolean;
  /**
   * 将表单的列索引暴露到外部，外部可通过该方式直接调整表单项配置，仅覆盖配置
   */
  defaults: Record<string, AvueFormColumn<T>>;
  /** 搜索变量(需要sync修饰符) */
  search: Obj;
  /** 分页变量(需要sync修饰符) */
  page: Partial<ElPagination>;
  // ========== 内置变量 ==========
  /** 表单是否提交状态 */
  readonly allDisabled: boolean;
  /** 表单是否创建完成 */
  readonly formCreate: boolean;
  /** 选项值的缓存 */
  readonly cachedSelected: Record<string, Obj | undefined>;
  /** 表单配置 */
  readonly parentOption: FormOption<T>;
  /** column配置列表 */
  readonly columnList: AvueFormColumn<T>[];
  /** 表单项配置列表 */
  readonly formColumnList: AvueFormColumn<T>[];
  // ========== 方法 ==========
  /** 重新初始化（多数用于服务端加载或者更新网络字典） */
  init(): void;
  /** 初始化表单 */
  dataFormat(): void;
  /** 更新DIC */
  updateDic<D = Obj>(prop: string, list: D[]): void;
  /**
   * 获取prop的ref对象
   * @param prop 表单项的 prop 属性
   */
  getPropRef<K extends keyof AvueFormRefs>(prop: K): AvueFormRefs[K];
  /**
   * 移除表单项的校验结果。
   * @param {string | string[]} [props] 传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
   */
  clearValidate(props?: string | string[]): void;
  /** 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入三个参数：valid:是否校验成功、hide:取消表单禁用方法、msg:未通过校验的字段。 */
  validate(
    callback: (
      /** 校验是否成功 */
      valid: boolean,
      /** 取消表单禁用状态的方法 */
      hide: () => void,
      /** 未通过校验的字段提示信息 */
      msg?: ValidateCallbackMsgInfo
    ) => void
  ): void;
  /** 部门表单字段校验 */
  validateField(fields: string[], callback: (valid: boolean, errList: {
    valid: false;
    /** 失败提示 */
    errMsg: string;
    /** 失败字段 */
    field: string;
  }[]) => void): void;
  /** 清空表单数据 */
  resetForm(): void;
  /** 提交表单数据 */
  submit(): void;
  /** 将表单置于提交状态 */
  show(): void;
  /** 将表单置于普通状态 */
  hide(): void;
  /** 组件Refs */
  readonly $refs: AvueFormRefs;
}

/** 通用表单插槽 */
export interface FormNormalScope<T = any, D = Obj, U = Obj, R = Obj> {
  /** 表单值 */
  value: T;
  /** 选中值，仅适用于涉及字典的组件 */
  label?: string;
  /** 列配置 */
  column: AvueFormColumn<D>;
  /** 大小 */
  size: AvueComponentSize;
  /** 是否只读 */
  readonly?: boolean;
  /** 是否禁用 */
  disabled: boolean;
  /** 字典 */
  dic?: U[];
  /** 输入时是否触发表单的校验, 仅针对input类型 */
  validateEvent: boolean;
  /** 参数配置项 */
  props?: Partial<DicProps>;
  /** 默认的接口请求配置 */
  propsHttp?: DicHttpProps;
  /** 外部传入的数据 */
  tableData: {
    /** 表单数据 */
    row: D;
    /** 列配置索引 */
    columnIndex: Record<string, AvueFormColumn<D>>;
    /** 行索引, dynamic组件下子组件生效 */
    index?: number;
    /** 上级组件相关数据, dynamic组件下子组件生效 */
    rootFormData?: {
      /** 列配置索引 */
      columnIndex: Record<string, AvueFormColumn>;
      /** 表单配置 */
      formOption: FormOption;
      /** 表单数据 */
      data: R;
    };
  };
}

/** 基础类组件插槽 */
export interface FormBasicScope<D = Obj> {
  /** 列配置 */
  column: AvueFormColumn<D>;
  /** 大小 */
  size: AvueComponentSize;
}