import { VNode, Component } from "vue";
import { ColumnProps } from "@/components/LjVxeTable/interface";
import type { aboutVxetableApiProps } from "@/components/LjVxeTable/interface";
import type { curLayoutTypeItem } from "@/components/LjFoldLayout/index.vue";
import { BreakPoint } from "@/components/Grid/interface";

export interface detailModelItemProp extends requestApiProps {
  /**
   * @argument string 模块id
   */
  id: string;
  /**
   * @argument string 模块类型
   */
  type?: "table" | "form" | "base";
  /**
   * @argument string 名称
   */
  label: string;
  /**
   * @argument 组件参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
   */
  props?: any;
  // /**
  //  * @argument string 模块数据
  //  */
  // value?: any;
  render?: (scope: any) => VNode | string; // 自定义内容渲染（tsx语法）
  /**
   * 是否隐藏标签页
   */
  isHidden?: boolean;
  /**
   * @augments boolean 是否限制显示
   */
  limited?: boolean | ((params?: any) => boolean);
}

/**
 * @description 按钮列表
 */
export type detailAction = {
  label?: string;
  /**
   * @argument 权限验证
   */
  power?: number | ((params?: any) => boolean);
  /**
   * @augments boolean ERP系统选项：是否限制显示
   */
  limited?: boolean | ((params?: any) => boolean);
  /**
   * @augments boolean ERP系统选项：是否限制显示
   */
  loading?: (params?: any) => boolean;
  /**
   * @argument 点击事件
   */
  clickFunc?: (params?: any) => void;
  slotName?: string;
  render?: (scope: any) => VNode | string; // 自定义内容渲染（tsx语法）
  /**
   * @argument 禁用按钮文字回调
   */
  disabledTextCallBack?: (data: any) => string;
  /**
   * @description el-button attr
   */
  type?: "primary" | "success" | "warning" | "danger" | "info" | "text";
  size?: "large" | "default" | "small";
  /**
   * @argument 图标，支持iconfont |el-icon | render
   */
  icon?: string | Component | ((params?: any) => VNode);
  /**
   * @description 按钮描述
   */
  dscrp?: string;
  /**
   * @description 分组名称
   */
  groupLabel?: string;
  /**
   * @description 分组 可额外多套一层detailAction[]，注意：detailAction[]不能与detailAction同一层
   */
  groupAction?: detailAction[];
  /**
   * @argument 其他属性
   */
  [key: string]: any;
};

/**
 * @description 头部，摘要
 */
export type detailBase = {
  // data: any;
  fieldNames?: FieldNamesProps; // enum 指定 label && value && children 的 key 值
  /**
   * @argument 图标，支持iconfont |el-icon | render
   */
  icon?: string | Component | ((params?: any) => VNode);
  /**
   * @argument 标签属性, 技术文档：vant van-tabs
   */
  tabsProp?: any;
  // /**
  //  * @argument 基础信息，信息卡模块
  //  */
  // baseCard?: BaseCardType;
  /**
   * @description LjFoldLayout布局方向：水平，垂直
   */
  direction?: "horizontal" | "vertical";
  /**
   * @description LjFoldLayout左插槽
   */
  foldleft?: curLayoutTypeItem | any;
  /**
   * @description LjFoldLayout右插槽
   */
  foldright?: curLayoutTypeItem | any;
  /**
   * @description 业务需要，未定义且需要保存的布局参数
   */
  mxprops?: any;
  /**
   * @description 悬浮按钮配置
   */
  floatbtn?: FloatBtnType[];
};

export type FieldNamesProps = {
  code: string;
  /**
   * @description 副标题标题文本
   */
  codeLabel?: string;
  name: string;
};

// export type BaseCardType = {
//   /**
//    * @description 组件类型
//    */
//   type?: "timeline" | string;
//   /**
//    * @description 数据模型
//    */
//   modes?: BaseCardModesType[];
//   /**
//    * @description 是否吟唱
//    * @default false
//    */
//   hidden?: boolean;
// };

// export type BaseCardModesType = {
//   /**
//    * @description 组件参数数据
//    */
//   props?: any;
//   field: string;
//   secondFeild: string;
// };

export type BasicGroupType = {
  /**
   * @description 分组名称
   */
  label: string;
  /**
   * @description 占用列数
   * @default number 一行
   */
  span?: number;
};

export type FloatBtnType = {
  /**
   * @description 按钮名称
   */
  id: string;
  /**
   * @description 初始位置[left, top]，百分数
   */
  originLeft?: number;
  originTop?: number;
};

export type BasicDefaultType = {
  /**
   * @argument string 表单域标签的位置
   */
  labelPosition?: "left" | "right" | "top";
  /**
   * @argument string 标签宽度
   */
  labelWidth?: string | number;
  /**
   * @description 属性分组设置
   */
  basicGroup?: BasicGroupType[];
};

/**
 * @description 数据请求接口
 */
export type requestApiProps = {
  /**
   * @argument any 初始化请求参数 ==> 非必传（默认为{}）
   */
  initParam?: any;
  /**
   * @argument string 详情页请求数据的api ==> 非必传
   */
  requestApi?: (params: any) => Promise<any>;
  /**
   * @argument boolean 是否自动执行请求 api ==> 非必传（默认为true）
   */
  requestAuto?: boolean;
  /**
   * @argument function 表格 api 请求错误监听 ==> 非必传
   */
  requestError?: (params: any) => void;
  /**
   * @argument function 返回数据的回调函数，可以对数据进行处理 ==> 非必传
   */
  dataCallback?: (data: any) => any;
};

/**
 * @name 详情页prop
 */
export interface DetailProp extends aboutVxetableApiProps {
  name?: string; // 详情页router的name, 组件名称
  // /**
  //  * @description 详情页布局名称，取值建议，主表布局名称，自动补充“__layout-detail”
  //  */
  // dwname: string;
  /**
   * @argument 模块列表
   */
  mould?: detailModelItemProp[];
  /**
   * @argument 业务动作列表
   * @example 支持二维数组嵌套，会以下拉菜单形式渲染，结构允许：[{},{},...] [[{},{},..], {}]
   */
  action?: detailAction[][] | detailAction[];
  /**
   * @argument 单据功能(右侧)
   * @example 支持二维数组嵌套，会以下拉菜单形式渲染，结构允许：[{},{},...] [[{},{},..], {}]
   */
  rightAction?: detailAction[][] | detailAction[];
  /**
   * @argument Array 单据固定功能(右侧)
   * @enum print,printMx
   */
  rightFixedAction?: string[];
  /**
   * @argument Array 单据固定功能(右侧)
   * @enum print,printMx
   * @attention 按钮权限，需要与按钮位置对应，若无/0，则默认显示
   */
  rightFixedActionPower?: number[];
  /**
   * @argument 标题
   */
  header: detailBase;
  /**
   * @description 基础信息模块，默认设置
   */
  basicDefault?: BasicDefaultType;
  // /**
  //  * @argument any 主表数据，与主表接口二选一必填 初始化请求参数 ==> 非必传
  //  */
  // mainData?: any;
  // /**
  //  * @argument 获取主表表格布局中，basicinfo属性集合
  //  */
  // columns?: ColumnProps[];
  // /**
  //  * @argument 主表布局名称
  //  */
  // mainDwname?: string;
  /**
   * @argument 订单新增权限值， 直接访问地址时，防止用户跨越权限操作; 订单状态判断：修改，true：可执行
   */
  addPower?: number | ((params: any) => boolean);
  /**
   * @argument 订单修改权限值， 直接访问地址时，防止用户跨越权限操作; 订单状态判断：修改，true：可执行
   */
  editPower?: number | ((params: any) => boolean);
  // /**
  //  * @argument any 主表接口 ==> 非必传
  //  */
  // mainApi?: requestApiProps;
  // /**
  //  * @argument any 详情数据，与详情接口二选一必填  初始化请求参数 ==> 非必传
  //  */
  // detailData?: any;
  // /**
  //  * @argument any 初始化请求参数 ==> 非必传
  //  */
  // detailApi?: requestApiProps;
  /**
   * @argument string[] 布局读取/保存时，赋值的属性
   */
  detailLayoutAttr?: string[];
  /**
   * @argument 订单状态：新建/修改/详情页
   */
  orderStatus?: string;
  // /**
  //  * @argument string[] 布局读取/保存时，赋值的属性 == 与表格LjVxeTable.laoyoutAttr一样
  //  */
  // layoutAttr?: string[];
  // /**
  //  * @argument Object 布局默认设置，保存时移除，的属性 == 与表格LjVxeTable.layoutAttrDefine一样
  //  */
  // layoutAttrDefine?: any;
  /**
   * @augments boolean 是否自动加载布局, 默认true；决定是否读取通用接口返回的布局（false读取）
   */
  autoLoadLayout?: boolean;
  /**
   * @description 是否fold布局
   */
  ifFoldLayout?: boolean;
  /**
   * @argument function
   * @description 布局加载后，执行函数
   */
  afterMound?: (data: any) => void;
  /**
   * @description 是否可编辑布局
   */
  ifLayoutEditable?: boolean;
  /**
   * @description 是否可编辑基础信息布局
   */
  ifBasicEditable?: boolean;
  /**
   * @description 属性gird响应占位
   */
  searchCol?: number | Record<BreakPoint, number> | any;
  /**
   * @description BaseForm, 分组gird响应占位
   */
  basicGroupCol?: number | Record<BreakPoint, number> | any;
  /**
   * @description 直接打开详情页时，传递枚举类型（字典）
   */
  enum?: Map<string, any>;
  /**
   * @description infoParams默认值
   */
  defaultColumnsValue?: any;
}

// /**
//  * @description 基础信息，信息卡模块
//  */
// export namespace BaceCard {
//   /**
//    * @description 信息卡：时间线
//    */
//   export interface BaseCardProps extends BaseCardType {
//     /**
//      * @description 数据
//      */
//     data: any;
//   }
// }