import { ResponsiveColumn } from 'element-ui/types/col';
import { PopoverPlacement } from 'element-ui/types/popover';
import { AvueComponentSize, Obj } from '../global';
import { DicProps as BaseDicProps, DicHttpProps } from '../variable';
import { DynamicFormColumn } from './components/dynamic';

/** 表单项字典Props配置 */
export interface DicProps extends BaseDicProps, DicHttpProps {}

/** 组件类型： 布局(layout) 基础(basic) 表单组件(form) */
export type ComponentType = 'layout' | 'basic' | 'form';

/**
 * 组件数据类型
 * @description 字符串(string) 数值(number) 数组(array) JSON字符串(json) 对象(object) 
 */
export type ComponentDataType = 'string' | 'number' | 'array' | 'json' | 'object';

/** 表单项数据模拟配置 */
export type ColumnMock =
  | ((form: Obj) => any)
  | {
      /** 随机生成一个常见的姓名。 */
      type: 'name';
      /** 是否英文名 */
      en?: boolean;
    }
  | {
      type: 'number';
      /** 整数部分的最小值。默认值为 -9007199254740992。 */
      min?: number;
      /** 整数部分的最大值。默认值为 9007199254740992。 */
      max?: number;
      /** 小数部分位数的最小值。默认值为 0。不传返回整数值 */
      precision?: number;
    }
  | {
      /** 随机生成日期时间。文档：```https://github.com/nuysoft/Mock/wiki/Date``` */
      type: 'datetime';
      /** 指示生成的日期字符串的格式。默认值为 yyyy-MM-dd。当now为true时，概念有所不同，具体查看文档
       */
      format?: string;
      /** 是否为当前时间 */
      now?: boolean;
    }
  | {
      /** 随机生成一段中文文本。 */
      type: 'word';
      /** 指示句子中单词的最小个数。默认值为 12。 */
      min?: number;
      /** 指示句子中单词的最大个数。默认值为 18。 */
      max?: number;
    }
  | {
      /** 随机生成网址 */
      type: 'url';
      /** 是否包含"http://"。默认值为 true */
      header?: boolean;
    }
  | {
      /** 随机生成一个（中国）县。返回省市区三级 */
      type: 'county';
    }
  | {
      /** 随机生成字典值 */
      type: 'dic';
    };

/** 表单事件通用参数 */
export interface FormColumnEventBaseParams<T = Obj, U = Obj> {
  /** 表单项值 */
  value: any;
  /** 表单项列配置 */
  column: AvueFormColumn<T>;
  /** 表单项列配置索引 */
  columnIndex: Record<string, AvueFormColumn<T>>;
  /** 表单值 */
  row: T;
  /** dic */
  dic: U[];
  /** 根据选中值返回对应的dic项, 对select/checkbox/radio/cascader/tree生效 */
  item?: U | U[];
  /** 同item，兼容配置 */
  selected?: U | U[];
  /** 表单项值的label，含dic时，为dic的label，否则为value的字符串格式 */
  label: string;
  /** 所在行索引，只在明细组件中生效 */
  index?: number;
}

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

/** 表单项校验规则 */
export interface ColumnRule {
  /** 值的类型 */
  type?: string;
  /** 是否必填 */
  required?: boolean;
  /** 错误文字说明 */
  message?: string;
  /** 正则校验规则 */
  pattern?: string | RegExp;
  /** 长度校验 */
  len?: number;
  /** 最小值 */
  min?: number;
  /** 最大值 */
  max?: number;
  /** 自定义校验 */
  validator?: (rule: ColumnRule, value: any, callback: (error?: unknown) => void, tableData: FormColumnEventBaseParams) => void;
  /**
   * 触发规则
   * @description blur: 失焦时触发，change: 值改变时触发
   */
  trigger?: 'blur' | 'change';
}

/** 表单项基本配置属性 */
export interface FormBaseColumn {
  /** 列类型, 默认: 'input' */
  type?: string;
  /**
   * 新增时列类型, 默认: 'input'
   * @since 2.11.3
   */
  addType?: string;
  /**
   * 编辑时列类型, 默认: 'input'
   * @since 2.11.3
   */
  editType?: string;
  /**
   * 详情时列类型, 默认: 'input'
   * @since 2.11.3
   */
  viewType?: string;
  /** 组件 */
  component?: string;
  /**
   * 新增时组件
   * @since 2.11.3
   */
  addComponent?: string;
  /**
   * 编辑时组件
   * @since 2.11.3
   */
  editComponent?: string;
  /**
   * 详情时组件
   * @since 2.11.3
   */
  viewComponent?: string;
  /**
   * 组件类型
   * @description 自定义属性
   * @since 2.9.12
   */
  componentType?: ComponentType;
  /** 列字段(唯一不重复) */
  prop?: string;
  /** 深结构数据绑定取值 */
  bind?: string;
  /** 标题名称 */
  label: string;
  /** 标题名称宽度, 默认: 110 */
  labelWidth?: number;
  /** 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 labelWidth, 默认: 'right' */
  labelPosition?: 'left' | 'right' | 'top';
  /** 弹窗编辑文字提示 */
  tip?: string;
  /**
   * 辅助文字提示展示方向
   * @since 2.8.2
   */
  tipPlacement?: PopoverPlacement;
  /** 标题文字提示 */
  labelTip?: string;
  /**
   * 标题文字提示展示方向
   * @since 2.8.2
   */
  labelTipPlacement?: PopoverPlacement;
  /** placeholder */
  placeholder?: string;
  /** 只读, 默认: false */
  readonly?: boolean;
  /** 是否可以清空选项, 默认: false */
  clearable?: boolean;
  /** 禁止编辑, 默认: false */
  disabled?: boolean;
  /** 是否详情模式, 默认: false */
  detail?: boolean;
  /** 是否以行内形式展示校验信息, 默认: false */
  inlineMessage?: boolean;
  /** 校验规则 */
  rules?: ColumnRule[];
  /** 控件大小 */
  size?: AvueComponentSize;
  /** 是否可见, 默认: true */
  display?: boolean;
  /** 默认值 */
  value?: any;
  /**
   * 字段位置排序
   * @description 不同版本中排序规则并不相同：`2.7.9 - 2.8.26`中，order值越小位置越靠前，其余版本值越大位置越靠前。自用版本自 `2.9.12` 改为值越小位置越靠前
   */
  order?: number;
  /** 数据类型转化时的分隔符，配合dataType使用, 默认: ', */
  separator?: string;
  /** 数据类型用于数组和字符串之间的转化 */
  dataType?: ComponentDataType;
  /**
   * 自定义样式
   * @since 2.7.1
   */
  className?: string;
  /**
   * 自定义属性
   * @description 用于设定自定义组件的prop属性值
   * @since 2.3.4
   */
  params?: {
    /** 当组件不存在时，若配置了该属性，则会将其渲染成html元素 */
    html?: string;
    /** 其他自定义属性 */
    [x: string]: any;
  };
  /**
   * 组件隐藏是否提交数据
   * @default default
   * @description 流程相关配置。说明：组件隐藏是否提交数据。注意：若流程配置为不显示，则无法获取到组件数据
   */
  dataSubmit?: 'default' | 'always';
  /** 级联的子节点prop */
  cascader?: string[];
  /** 级联的默认选项序号 */
  cascaderIndex?: number;
  /** 表单项数据模拟 */
  mock?: ColumnMock;
}

/** 表单项列宽配置 */
export interface FormColumnColOption {
  /** 栅列, 默认: 12 */
  span: number;
  /**
   * 新增时栅列, 默认: 同span
   * @since 2.11.3
   */
  addSpan?: number;
  /**
   * 编辑时栅列, 默认: 同span
   * @since 2.11.3
   */
  editSpan?: number;
  /**
   * 详情时栅列, 默认: 同span
   * @since 2.11.3
   */
  viewSpan?: number;
  /**
   * ≥768px 响应式栅格数或者栅格属性对象, 默认: 12
   * @since 2.8.12
   */
  smSpan: ResponsiveColumn;
  /**
   * 新增时响应式栅格数或者栅格属性对象, 默认: 同span
   * @since 2.11.3
   */
  addSmSpan?: ResponsiveColumn;
  /**
   * 编辑时响应式栅格数或者栅格属性对象, 默认: 同smSpan
   * @since 2.11.3
   */
  editSmSpan?: ResponsiveColumn;
  /**
   * 详情时响应式栅格数或者栅格属性对象, 默认: 同smSpan
   * @since 2.11.3
   */
  viewSmSpan?: ResponsiveColumn;
  /**
   * <768px 响应式栅格数或者栅格属性对象, 默认: 24
   * @since 2.8.12
   */
  xsSpan: ResponsiveColumn;
  /**
   * 新增时响应式栅格数或者栅格属性对象, 默认: 同xsSpan
   * @since 2.11.3
   */
  addXsSpan?: ResponsiveColumn;
  /**
   * 编辑时响应式栅格数或者栅格属性对象, 默认: 同xsSpan
   * @since 2.11.3
   */
  editXsSpan?: ResponsiveColumn;
  /**
   * 详情时响应式栅格数或者栅格属性对象, 默认: 同xsSpan
   * @since 2.11.3
   */
  viewXsSpan?: ResponsiveColumn;
  /**
   * 栅格左侧的间隔格数, 默认: 0
   * @since 2.8.12
   */
  offset: number;
  /**
   * 新增时栅格左侧的间隔格数, 默认: 同xsSpan
   * @since 2.11.3
   */
  addOffset?: number;
  /**
   * 编辑时栅格左侧的间隔格数, 默认: 同xsSpan
   * @since 2.11.3
   */
  editOffset?: number;
  /**
   * 详情时栅格左侧的间隔格数, 默认: 同xsSpan
   * @since 2.11.3
   */
  viewOffset?: number;
  /**
   * 栅格向右移动格数, 默认: 0
   * @since 2.8.12
   */
  push: number;
  /**
   * 新增时栅格向右移动格数, 默认: 同xsSpan
   * @since 2.11.3
   */
  addPush?: number;
  /**
   * 编辑时栅格向右移动格数, 默认: 同xsSpan
   * @since 2.11.3
   */
  editPush?: number;
  /**
   * 详情时栅格向右移动格数, 默认: 同xsSpan
   * @since 2.11.3
   */
  viewPush?: number;
  /**
   * 栅格向左移动格数, 默认: 0
   * @since 2.8.12
   */
  pull: number;
  /**
   * 新增时栅格向左移动格数, 默认: 同xsSpan
   * @since 2.11.3
   */
  addPull?: number;
  /**
   * 编辑时栅格向左移动格数, 默认: 同xsSpan
   * @since 2.11.3
   */
  editPull?: number;
  /**
   * 详情时栅格向左移动格数, 默认: 同xsSpan
   * @since 2.11.3
   */
  viewPull?: number;
  /**
   * 栅格后面的内容是否从新的一行开始展示, 默认: false
   * @since 
   */
  row?: boolean;
}

/** 表单项字典配置 */
export interface FormColumnDicOption {
  /**
   * 字典
   *
   * 默认为{label, value}，其中label为显示，value为取值。可通过props属性调整
   */
  dicData: Obj[];
  /** 远程字典地址 */
  dicUrl: string;
  /** 字典请求方式，配合dicUrl使用 */
  dicMethod: 'get' | 'GET' | 'post' | 'POST';
  /** 字典请求参数，配合dicUrl使用 */
  dicQuery: Obj;
  /** 远程字典其他配置 */
  dicOptions: Obj,
  /** 字典数据返回的执行函数，配合dicUrl使用 */
  dicFormatter: (value: any) => Obj[];
  /** 参数配置项 */
  props: Partial<DicProps>;
}

/** 表单项通用事件 */
export interface FormColumnEvent<T = Obj> {
  /**
   * 字段控制器, 不使用箭头函数
   * @param value 表单项的值
   * @param form 表单值
   * @example https://avuejs.com/form/form-control.html
   * @since 2.8.6
   */
  control: (value: any, form: T, tableData: FormColumnEventBaseParams<T>) => Record<string, Partial<AvueFormColumn<T>>>;
  /**
   * 点击事件
   * @since 2.9.6
   */
  click: (params: FormColumnEventParams<T>) => void;
  /**
   * 值改变事件
   * @since 2.9.6
   */
  change: (params: FormColumnEventBaseParams<T>) => void;
  /**
   * 聚焦事件
   * @since 2.9.6
   */
  focus: (params: FormColumnEventParams<T>) => void;
  /**
   * 失焦事件
   * @since 2.9.6
   */
  blur: (params: FormColumnEventParams<T>) => void;
  /**
   * 回车事件
   */
  enter: (params: FormColumnEventBaseParams<T>) => void;
  /**
   * 事件源码
   * @since 2.9.12(伪)
   */
  _event?: Record<string, string>;
  /** 事件 */
  event: Partial<Pick<FormColumnEvent<T>, 'click' | 'change' | 'focus' | 'blur' | 'enter'>>;
}

/** 表单项通用参数 */
export interface AvueFormBaseColumn<T>
  extends FormBaseColumn,
    Partial<FormColumnColOption>,
    Partial<FormColumnDicOption>,
    Partial<FormColumnEvent<T>> {
  /** 底部操作栏栅列, 默认: 12 */
  menuSpan?: number;
  /**
   * 表单自定义, 默认: false
   * @deprecated 2.8.0
   */
  formslot?: boolean;
  /**
   * 表单标题自定义, 默认: false
   * @deprecated 2.8.0
   */
  labelslot?: boolean;
  /**
   * 表单错误自定义, 默认: false
   * @deprecated 2.8.0
   */
  errorslot?: boolean;
  /**
   * 组件下拉自定义, 默认: false
   * @deprecated 2.8.0
   */
  typeslot?: boolean;
}

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