import { AvueAlignment, AvueMenuType, AvueComponentSize, Obj } from '../global';
import { FormBaseOption, FormColumnOption } from '../form/option';
import { AvueCrudColumn } from './column';

/** 表格组件基础配置属性 */
export interface CrudBaseOption {
  // ======== 表格基础配置 ========
  /** 表格标题 */
  title: string;
  /** 表头标题所用的HTML标签, 默认: 'h2' */
  titleSize: string;
  /** 表头对齐方式, 默认: 'center' */
  headerAlign: AvueAlignment;
  /** 表格列齐方式, 默认: 'center' */
  align: AvueAlignment;
  /** 表格边框, 默认: false */
  border: boolean;
  /** 表格高度差（主要用于减去其他部分让表格高度自适应） */
  calcHeight?: number;
  /** 列显隐按钮, 默认: true */
  columnBtn: boolean;
  /** 列显隐按钮, 默认: 'el-icon-s-operation' */
  columnBtnIcon: string;
  /** 表格的排序字段 */
  defaultSort?: {
    /** 默认排序字段 */
    prop: string;
    /** 排序方式 */
    order: string;
  };
  /** 空数据时显示的文本内容，也可以通过slot="empty"设置, 默认: '暂无数据' */
  emptyText: string;
  /** 是列的宽度是否自撑开属性, 默认: true */
  fit: boolean;
  /** 表格高度 */
  height?: number | 'auto';
  /** 头部显隐, 默认: true */
  header: boolean;
  /** 是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数, 默认: false */
  index: boolean;
  /** 序号的标题, 默认: '#' */
  indexLabel: string;
  /** 序号的宽度, 默认: 50 */
  indexWidth: number;
  /** 序号的最小宽度 */
  indexMinWidth: number;
  /** 序号是否冻结, 默认: 'left' */
  indexFixed: boolean | AvueAlignment;
  /** 行数据的 Key的主键，用于其他相关操作, 默认: 'id' */
  rowKey: string;
  /** 设置 indeterminate 状态，只负责样式控制 如果选择一半，不会出现半选, 默认: false */
  indeterminate: boolean;
  /** 表格最大高度 */
  maxHeight?: number | string;
  /** 字段排序, 默认: 0 */
  order?: number;
  /** 是否显示表格的表头, 默认: true */
  showHeader: boolean;
  /** 控件大小 */
  size: AvueComponentSize;
  /** 是否显示表格的斑马条纹, 默认: false */
  stripe: boolean;
  // ======== 表格加载配置 ========
  /** 加载中文字 */
  loadingText?: string;
  /** 加载中图标 */
  loadingSpinner?: string;
  /** 加载中背景色 */
  loadingBackground?: string;
  // ======== 表格分页配置 ========
  /**
   * 是否显示分页, 默认: true
   * @since 2.8.11
   */
  page: boolean;
  /**
   * 只有一页时是否隐藏分页, 默认: false
   * @since 2.4.1
   */
  simplePage: boolean;
  // ======== 表格合计配置 ========
  /** 是否在表尾显示合计行, 默认: false */
  showSummary: boolean;
  /** 表格合计需要配置的字段 */
  sumColumnList: {
    /** prop属性值 */
    name: string;
    /**
     * 统计类型
     * @description count: label的值+数据总数; avg: 平均值 sum: 合计
     */
    type: 'count' | 'avg' | 'sum';
    /** 数据的小数位数, 默认: 2 */
    decimals?: number;
    /** 自定义前缀 */
    label?: string;
  }[];
  // ======== 表格行折叠配置 ========
  /** 是否展开折叠行, 默认: false */
  expand: boolean;
  /** 是否展开折叠行宽度, 默认: 60 */
  expandWidth: number;
  /** 是否展开折叠行冻结, 默认: 'left' */
  expandFixed: boolean | AvueAlignment;
  /** 是否默认展开所有行，"expand"为true的时候有效, 默认: false */
  defaultExpandAll: boolean;
  /** 可以通过该属性设置目前的展开行，需要设置 rowKey 属性才能使用，该属性为展开行的 keys 数组。 */
  expandRowKeys: any[];
  // ======== 表格树配置 ========
  /**
   * 是否为表格树，若无配置，判断数据项中是否包含children，若包含，则为true, 默认: false
   * @since 2.5.0
   */
  tree: boolean;
  /**
   * 是否开启懒加载，通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点, 默认: false
   * @since 2.3.0
   */
  lazy: boolean;
  /**
   * 行数据的 上级Key的主键，用于树其他相关操作, 默认: 'parentId'
   * @since 2.6.15
   */
  rowParentKey: string;
  // ======== 其他配置 ========
  /** 是否开启表格排序, 默认: false */
  sortable: boolean;
  /** 是否要高亮当前行, 默认: false */
  highlightCurrentRow: boolean;
}

/** 表格行勾选配置 */
export interface CurdSelectionOption<T = Obj> {
  /** 行可勾选, 默认: false */
  selection: boolean;
  /** 行可勾选的宽度, 默认: 50 */
  selectionWidth: number;
  /** 行可勾选是否冻结, 默认: 'left' */
  selectionFixed: boolean | AvueAlignment;
  /** 行可勾选是否显示tip信息, 默认: true */
  tip: boolean;
  /**
   * 仅对 selection为true 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
   * @param row 所在行数据
   * @param index 行号
   */
  selectable: (row: T, index: number) => boolean;
  /** 仅对 selection为true 的列有效，为 true 则会在数据更新之后保留之前选中的数据（需指定 rowKey）, 默认: true */
  reserveSelection: boolean;
  /** 清空选中按钮（当selection为true起作用）, 默认: true */
  selectClearBtn: boolean;
}

/** 表格组件菜单栏配置 */
export interface CurdMenuOption {
  /** 是否显示操作菜单栏, 默认: true */
  menu: boolean;
  /** 操作菜单栏的宽度, 默认: 220 */
  menuWidth: number;
  /** 手机端时操作菜单栏的宽度, 默认: 100 */
  menuXsWidth: number;
  /**
   * 菜单栏标题对齐方式, 默认: 'center'
   * @since 2.6.0
   */
  menuHeaderAlign: AvueAlignment;
  /** 菜单栏对齐方式, 默认: 'center' */
  menuAlign: AvueAlignment;
  /** 操作栏菜单按钮类型, 默认: 'text' */
  menuType: AvueMenuType;
  /** 菜单下拉按钮的文字，仅在menuType为'menu'时生效, 默认: '功能' */
  menuBtnTitle: string;
  /** 操作列的文字, 默认: '操作' */
  menuTitle: string;
  /** 操作列是否冻结, 默认: 'right' */
  menuFixed: boolean | 'left' | 'right';
  /**
   * 操作按钮排序，未列入的按钮会按默认顺序放在最后
   * @description
   * 默认排序：'viewBtn','editBtn','copyBtn','delBtn'
   * 行编辑模式默认排序：'editBtn','viewBtn','copyBtn','delBtn'
   * @since 2.10.10
   */
  menuBtnSort: ('viewBtn' | 'editBtn' | 'copyBtn' | 'delBtn')[];
}

/** 表格操作按钮及对应功能配置 */
export interface CrudActionOption {
  // ==== menuLeft ====
  /** 是否显示新增按钮, 默认: true */
  addBtn: boolean;
  /** 新增按钮, 默认: '新 增' */
  addBtnText: string;
  /** 自定义过滤按钮图标, 默认: 'el-icon-plus' */
  addBtnIcon: string;
  /** 新增窗口标题文案, 默认: '新 增' */
  addTitle: string;
  /**
   * 是否显示新增行按钮, 默认: false
   *
   * tip: 该按钮的功能为点击后在表格中新增一行
   * @since 2.6.9
   */
  addRowBtn: boolean;
  // ==== menuRight ====
  /** 是否显示保存按钮, 默认: true */
  saveBtn: boolean;
  /** 弹出框为新增时保存按钮标题, 默认: '新 增' */
  saveBtnText: string;
  /** 弹出框为新增时保存按钮图标, 默认: 'el-icon-circle-plus-outline' */
  saveBtnIcon: string;
  /** 是否显示日期组件按钮, 默认: false */
  dateBtn: boolean;
  /** 日期控件默认的值, 默认: false */
  dateDefault: boolean;
  /** 是否显示Excel打印按钮, 默认: false */
  excelBtn: boolean;
  /** Excel打印按钮文案, 默认: '导出' */
  excelBtnText: string;
  /** Excel打印按钮图标, 默认: 'el-icon-download' */
  excelBtnIcon: string;
  /** 是否显示自定义过滤按钮, 默认: false */
  filterBtn: boolean;
  /** 自定义过滤按钮图标, 默认: 'el-icon-tickets' */
  filterBtnIcon: string;
  /** 是否显示打印按钮, 默认: false */
  printBtn: boolean;
  /** 打印按钮文案, 默认: '打印' */
  printBtnText: string;
  /** 打印按钮图标, 默认: 'el-icon-printer' */
  printBtnIcon: string;
  /** 是否显示刷新按钮, 默认: true */
  refreshBtn: boolean;
  /** 自定义过滤按钮图标, 默认: 'el-icon-refresh' */
  refreshBtnIcon: string;
  /** 是否显示搜索显隐按钮, 默认: true */
  searchShowBtn: boolean;
  /** 搜索按钮图标, 默认: 'el-icon-search' */
  searchBtnIcon: string;
}

/** 表格行操作按钮及对应功能配置 */
export interface CrudRowActionOption {
  // ======== 表格弹窗操作 ========
  // ==== 复制新增功能 ====
  /** 是否显示复制新增按钮, 默认: false */
  copyBtn: boolean;
  /** 复制新增按钮文案, 默认: '复 制' */
  copyBtnText: string;
  /** 复制新增按钮图标, 默认: 'el-icon-document-add' */
  copyBtnIcon: string;
  // ==== 编辑功能 ====
  /** 是否显示行内编辑按钮, 默认: true */
  editBtn: boolean;
  /** 编辑按钮文案, 默认: '编辑' */
  editBtnText: string;
  /** 编辑按钮图标, 默认: 'el-icon-edit' */
  editBtnIcon: string;
  /** 编辑窗口标题文案, 默认: '编 辑' */
  editTitle: string;
  /** 是否显示更新按钮, 默认: true */
  updateBtn: boolean;
  /** 弹出框为编辑时保存按钮标题, 默认: '修 改' */
  updateBtnText: string;
  /** 弹出框为编辑时保存按钮图标, 默认: 'el-icon-circle-check' */
  updateBtnIcon: string;
  // ==== 查看功能 ====
  /** 是否显示查看按钮, 默认: false */
  viewBtn: boolean;
  /** 查看按钮文案, 默认: '查看' */
  viewBtnText: string;
  /** 查看按钮图标, 默认: 'el-icon-view' */
  viewBtnIcon: string;
  /** 查看窗口标题文案, 默认: '查 看' */
  viewTitle: string;
  // ==== 删除功能 ====
  /** 是否显示删除按钮, 默认: true */
  delBtn: boolean;
  /** 删除按钮文案, 默认: '删 除' */
  delBtnText: string;
  /** 删除按钮图标, 默认: 'el-icon-delete' */
  delBtnIcon: string;
  // ======== 表格行内操作 ========
  /** 表格单元格可编辑（当column中有搜索的属性中有cell为true的属性启用，只对type为select和input有作用), 默认: false */
  cellBtn: boolean;
  /** 是否显示行编辑取消按钮, 默认: true */
  cancelBtn: boolean;
  /** 编辑取消按钮文案, 默认: '取 消' */
  cancelBtnText: string;
  /** 删除按钮图标, 默认: 'el-icon-circle-close' */
  cancelBtnIcon: string;
}

/** 表格组件_弹窗组件配置 */
export interface CrudDialogOption<T = Obj> extends FormBaseOption, Omit<FormColumnOption<T>, 'column'> {
  // ======== 弹窗配置 ========
  /**
   * 是否显示全屏切换按钮, 默认: true
   * @since 2.11.29
   */
  dialogShowFullscreen?: boolean;
  /** 是否为全屏Dialog, 默认: false */
  dialogFullscreen: boolean;
  /** 是否可以通过按下ESC关闭Dialog, 默认: true */
  dialogEscape: boolean;
  /** 是否可以通过点击modal关闭Dialog, 默认: true */
  dialogClickModal: boolean;
  /** 是否显示关闭按钮, 默认: true */
  dialogCloseBtn: boolean;
  /** 是否需要遮罩层, 默认: true */
  dialogModal: boolean;
  /**
   * 弹出表单的弹窗具体顶部的距离, dialogType为'dialog'时默认: 'auto !important'，为'drawer'时默认: '0'
   * @description 在2.11.24版本中，dialogType为'dialog'时默认值进行了调整，之前的版本为element-ui的'15vh'。往后版本中如需生效，需要加上!important
   */
  dialogTop: string;
  /** 弹出表单的类型, 默认: dialog */
  dialogType: 'dialog' | 'drawer';
  /** 弹出表单的弹窗宽度, 默认: '60%' */
  dialogWidth: string;
  /**
   * 是否允许拖拽, 默认: true
   * @since 2.9.0
   */
  dialogDrag: boolean;
  /** 弹窗自定义样式 */
  dialogCustomClass: string;
  // ======== 弹窗表单配置 ========
  /**
   * 弹出表单按钮组的位置, 默认: 'right'
   * @deprecated 2.7.9
   */
  menuPosition: AvueAlignment;
  /**
   * 弹出表单按钮组的位置, 默认: 'right'
   * @since 2.7.9
   */
  dialogMenuPosition: AvueAlignment;
}

/** 表格组件_搜索组件配置 */
export interface CrudSearchOption {
  /** 首次加载是否显示搜索, 默认: true */
  searchShow: boolean;
  /** 回车提交表单, 默认: true */
  searchEnter: boolean;
  /** 是否展示半收缩按钮, 默认: undefined */
  searchIcon: boolean;
  /** 展示半收缩按钮的个数, 默认: 2 */
  searchIndex: number;
  /** 搜索项的长度, 默认: 6 */
  searchSpan: number;
  /** 搜索项之间的间距, 默认: 20 */
  searchGutter: number;
  /** 搜索项label的宽度, 默认: 80 */
  searchLabelWidth: number;
  /** 搜索项label的定位, 默认: 'right' */
  searchLabelPosition: AvueAlignment;
  /** 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，对cascader|tree类型组件生效, 默认: false */
  searchCheckStrictly: boolean;
  /** 搜索按钮的长度, 默认: 6 */
  searchMenuSpan: number;
  /**
   * 搜索按钮的位置, 默认: 'center'
   * @since 2.7.9
   */
  searchMenuPosition: AvueAlignment;
  /**
   * 组件尺寸
   * @since 2.7.9
   */
  searchSize: AvueComponentSize;
  /** 搜索按钮文案, 默认: '搜索' */
  searchBtnText: string;
  /** 搜索按钮图标, 默认: 'el-icon-search' */
  searchBtnIcon: string;
  /** 是否显示搜索按钮, 默认: true */
  searchBtn: boolean;
  /** 是否显示清空按钮, 默认: true */
  emptyBtn: boolean;
  /** 清空按钮文案, 默认: '清空' */
  emptyBtnText: string;
  /** 清空按钮图标, 默认: 'el-icon-delete' */
  emptyBtnIcon: string;
}

/** 表格组件配置属性 */
export type CrudOption<T = Obj> = Partial<CrudBaseOption> &
  Partial<CurdSelectionOption<T>> &
  Partial<CurdMenuOption> &
  Partial<CrudActionOption> &
  Partial<CrudRowActionOption> &
  Partial<CrudDialogOption> &
  Partial<CrudSearchOption> & {
    /** 表格列配置属性*/
    column?: AvueCrudColumn<T>[];
    /** 其他配置 */
    [x: string]: any;
  };