import { ElDialog } from 'element-ui/types/dialog';
import { FormOption } from '../form/option';
import { Obj } from '../global';

export declare class DialogForm<T = Obj> {
  /** 表单弹窗配置项 */
  private opt: DialogFormOption;
  /** 是否显示弹窗 */
  private visible: boolean;
  /** 弹窗配置 */
  private dialog: Partial<ElDialog>;
  /** 表单配置 */
  private option: FormOption;
  /** 表单值 */
  data: T;
  /** 表单提交事件 */
  submit: () => void;
  /**
   * 表单重置事件
   * @description 此处重置完后调用close关闭了弹窗
   */
  reset: () => void;
  /**
   * 显示弹窗
   */
  show: (option: DialogFormOption<T>) => void;
  /** 表单关闭事件 */
  close: () => void;
}

/** 表单弹窗 */
export declare class DialogFormPlugin<T = Obj> {
  /** 组件VM */
  $root: DialogForm<T>;
  /** 构建弹窗 */
  initMounted: () => void;
  /**
   * 显示弹窗
   */
  show: <T = Obj>(option: DialogFormOption<T>) => void;
}

/** 表单弹窗配置项 */
export interface DialogFormOption<T = Obj> {
  /** 弹窗类型 */
  type?: 'dialog' | 'drawer';
  /** 弹窗标题 */
  title?: string;
  /** 表单配置 */
  option: FormOption<T>;
  /** 表单值 */
  data: T;
  /**
   * 是否显示全屏切换按钮, 默认: true
   * @since 2.11.7
   */
  showFullscreen?: boolean;
  /**
   * 弹窗宽度, 当值为数值时，单位为%
   * @description 自2.11.7开始支持number类型
   */
  width?: number | string;
  /**
   * 是否全屏, 默认: false
   * @since 2.11.7
   */
  fullscreen?: boolean;
  /**
   * 弹窗距离顶部的距离, 默认: 15vh
   * @description 仅支持dialog弹窗
   */
  top?: string;
  /** 是否需要遮罩层, 默认: true */
  modal?: boolean;
  /** 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 弹窗 的父元素上。 默认: true */
  modalAppendToBody?: boolean;
  /** 弹窗 自身是否插入至 body 元素上。嵌套的 弹窗 必须指定该属性并赋值为 true。 默认: true */
  appendToBody?: boolean;
  /**
   * 弹窗打开的方向
   * @description 仅支持drawer弹窗
   */
  direction?: 'ltr' | 'rtl' | 'ttb' | 'btt';
  /** 控制是否显示 header 栏, 默认: true */
  withHeader?: boolean;
  /**
   * 能否拖拽, 默认: false
   * @since 2.11.8
   */
  drag?: boolean;
  /**
   * 是否在 Dialog 出现时将 body 滚动锁定, 默认: true
   * @description 仅支持dialog弹窗
   */
  lockScroll?: boolean;
  /** 弹窗的自定义类名 */
  customClass?: string;
  /** 点击遮罩层是否关闭弹窗, 默认: true */
  closeOnClickModal?: boolean;
  /** 是否可以通过按下 ESC 关闭弹窗, 默认: true */
  closeOnPressEscape?: boolean;
  /** 是否显示关闭按钮, 默认: true */
  showClose?: boolean;
  /**
   * 关闭前的回调，会暂停 弹窗 的关闭
   * @param done done 用于关闭弹窗
   */
  beforeClose?: (done: Function) => void;
  /**
   * 是否对头部和底部采用居中布局, 默认: false
   * @description 仅支持dialog弹窗
   */
  center?: boolean;
  /** 关闭时销毁 弹窗 中的元素, 默认: false */
  destroyOnClose?: boolean;
  /** 表单提交后的回调 */
  callback?: (params: {
    /** 表单值 */
    data: T;
    /** 关闭弹窗 */
    close: () => void;
    /** 将表单置于普通状态 */
    done: () => void;
  }) => void;
}