import { ResponsiveColumn } from 'element-ui/types/col';
import { AvueAlignment, AvueComponentSize, Obj } from '../global';
import { DicHttpProps } from '../variable';
import { AvueFormColumn } from './column';

/** 表单组件基本配置属性 */
export interface FormBaseOption {
  /** 视图类型 */
  boxType: 'add' | 'edit' | 'view';
  /** 是否详情模式, 默认: false */
  detail: boolean;
  /**
   * 详情模式优先级, 默认: 'global'
   * @description 当detail同时存在全局配置和列配置时, global表示优先取全局detail, column表示优先取列detail
   * @since 2.11.12
   */
  detailPriority: 'global' | 'column';
  /** 是否禁用模式, 默认: false */
  disabled: boolean;
  /** 是否只读模式, 默认: false */
  readonly: boolean;
  /** 表单宽度 */
  formWidth: number | string;
  /** 是否在输入框中显示校验结果反馈图标, 默认: false */
  statusIcon: boolean;
  /** 是否卡片效果, 默认: false */
  card: boolean;
  /** 是否以行内形式展示校验信息, 默认: false */
  inlineMessage: boolean;
  /**
   * 重置时不清空的字段, 默认: []
   * @since 2.7.7
   */
  clearExclude: string[];
  /** 是否回车提交表单, 默认: false */
  enter: boolean;
  /** 项之间的间间距, 默认: 10 */
  gutter: number;
  /** 表单的label宽度, 默认: 80 */
  labelWidth: string | number;
  /** 表单的label位置, 默认: 'left' */
  labelPosition: 'left' | 'top' | 'right';
  /** 标题的后缀, 默认: ':' */
  labelSuffix: string;
  /** 表单全局控件的大小, 默认: 'medium' */
  size: AvueComponentSize;
  /** 是否以tab形式展示group, 默认: false */
  tabs: boolean;
  /** 栅列, 默认: 12 */
  span: number;
  /** 输入时是否触发表单的校验,仅对input类型表单项生效, 默认: false */
  validateEvent: boolean;
  /** 默认的接口请求配置 */
  propsHttp: DicHttpProps;
}

/** 表单组件菜单栏配置属性 */
export interface FormMenuOption {
  /** 是否显示按钮栏, 默认: true */
  menuBtn: boolean;
  /** 按钮栏的span, 可选值为1-24, 默认: 24 */
  menuSpan: number;
  /** 按钮的位置, 默认: 'center' */
  menuPosition: AvueAlignment;
  /** 是否显示提交按钮, 默认: true */
  submitBtn: boolean;
  /** 提交按钮的大小, 默认: 'medium' */
  submitSize: AvueComponentSize;
  /** 提交按钮的文字, 默认: '提交' */
  submitText: string;
  /**
   * 提交按钮图标 , 默认: 'el-icon-check'
   * @since v2.5.1
   */
  submitIcon: string;
  /** 是否显示清空按钮, 默认: true */
  emptyBtn?: boolean;
  /** 清空按钮的大小, 默认: 'medium' */
  emptySize: AvueAlignment;
  /** 清空按钮的文字, 默认: '清空' */
  emptyText: string;
  /** 清空按钮图标, 默认: 'el-icon-delete' */
  emptyIcon: string;
  /** 是否显示表单打印按钮, 默认: false */
  printBtn: boolean;
  /**
   * 是否显示模拟数据按钮, 默认: false
   * @description 需要导入额外的包（一定要放到index.html中的head标签里）
   * ```
   * <script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
   * ```
   */
  mockBtn: boolean;
}

/** 表单分组配置 */
export interface FormGroupOption<T = Obj> {
  /** 分组名称 */
  label: string;
  /** 分组名称宽度, 默认: 90 */
  labelWidth?: number;
  /** 分组字段 */
  prop?: string;
  /** 分组图标 */
  icon?: string;
  /** 是否分组折叠, 默认: true */
  arrow?: boolean;
  /** 分组默认叠起, 默认: false */
  collapse?: boolean;
  /**
   * ≥768px 响应式栅格数或者栅格属性对象, 默认: 12
   * @since 2.8.12
   */
  smSpan?: ResponsiveColumn;
  /**
   * <768px 响应式栅格数或者栅格属性对象, 默认: 24
   * @since 2.9.12
   */
  xsSpan?: ResponsiveColumn;
  /**
   * <768px 响应式栅格数或者栅格属性对象, 默认: 24
   * @since 2.8.12
   * @deprecated 2.9.12
   */
  xmSpan?: ResponsiveColumn;
  /**
   * 栅格左侧的间隔格数, 默认: 0
   * @since 2.8.12
   */
  offset?: number;
  /** 是否显示分组, 默认: true */
  display?: boolean;
  /** 分组下的字段配置 */
  column: AvueFormColumn<T>[];
}

/**
 * 表单项配置
 * @description 表单的渲染顺序从上到下为column -> group -> footer
 */
export interface FormColumnOption<T = Obj> {
  /** 分组配置 */
  group?: FormGroupOption<T>[];
  /** 字段配置 */
  column?: AvueFormColumn<T>[];
  /**
   * 底部字段配置
   * @description 该字段等同于在group最后push一个无label分组在tabs模式下效果更糟，因此内部改版中删除该字段
   * @since 2.9.9
   * @deprecated 2.9.12(改)
   */
  footer?: AvueFormColumn<T>[];
}

/** 表单全局事件 */
export interface FormEvents<T = Obj> {
  /**
   * 表单全局事件源码
   * @since 2.9.12(伪)
   */
  _events?: {
    /** 表单加载完成后执行事件字符串源码 */
    didMount?: string;
    /** 表单提交事件字符串源码 */
    submit?: string;
  };
  /**
   * 表单全局事件
   * @since 2.9.12(伪)
   */
  events?: {
    /** 表单加载完成后执行事件 */
    didMount?: () => void;
    /**
     * 表单提交事件
     * @param form 表单数据
     * @param hide 取消表单提交状态
     * @since 2.11.18
     */
    submit?: (form: T, hide: () => void) => void;
  };
}

/** 表单组件配置属性 */
export type FormOption<T = Obj> = Partial<FormBaseOption> & Partial<FormMenuOption> & FormColumnOption<T> & FormEvents<T> & Obj;