export interface Config {
  /** 模块的名称 */
  moduleName: string;
  /** 所属页面，用于在有多个可配置首页时划分归类 */
  pageType: string;
  /** 设备类型，在模块设置了 header 后作为取数据依赖的 prop */
  deviceType: string;
  /** 模块配置，核心之一 */
  moduleData: ModuleData;
  /** 模块样式，核心之一 */
  showStyle: ShowStyle;
  /** 模块描述，可用于存储其他信息，目前用于原始预设信息存储 */
  desc?: string;
}

/**
 * 模块的配置
 *
 * 该配置将描述本模块的基础样式，应该展示哪些内容，应该如何排布主要元素
 * 配置带有基本的说明，但有几项常用的配置，以下是特别说明：
 *
 * 假设一个首页的 api 返回的数据为：`{ fanmain: { f1Val: 2555, f2Val: 0, run: 1, history: [] } }`，以下示例基于此数据；
 *
 * formatter 格式是什么?
 *
 * 配置中有许多 value、lable 都是遵循 formatter 格式的，formatter 格式可以用于自定义展示文本。
 * 使用示例：在基准数据为上述 api 数据时，formatter 为 `风量：${fanmain.f1val}`，则对应的文本将是 `风量：2555`。
 *
 * readFrom 使用指南：
 *
 * readFrom 用于配置数据指向，你可能看到多个父子关系的 readFrom，如果它们是，那么读取数据是也是遵循父子关系的。
 * 例如有配置：{ board: { ..., readFrom: 'fanmain' } }，那么 board 的内容将以 { f1Val: 2555 } 作为基准数据，后续需要在此基础上继续配置。
 * 例如有配置：{ board: { ..., readFrom: '' } }，那么 board 的内容将以 api 数据作为基准数据，后续需要在此基础上继续配置。
 * 例如有配置：{ chart: { ..., readFrom: 'fanmain', series: [{ ..., readFrom: 'history' }] } }，那么 chart 的内容将以 fanmain.history 的数据作为基准数据。
 * 特殊的，header 如果需要展示下拉框，那么下拉选中的那条信息将作为基准信息。
 *
 * trans 使用指南：
 *
 * trans 设计目的是为了让某些不易读懂的值有一个翻译，也用于一些特别的目的。
 * 例如有配置：{ board: { ..., readFrom: 'fanmain', items: [{ ..., value: '${run}', trans: { 1: '运行', '2': '停止' } }] } }。
 * 那么 board 将会显示 运行 字样，trans 的值也支持 formatter 格式，可以用在动态取值上。
 * 例如有配置：{ chart: { ..., readFrom: 'fanmain', items: [{ ..., label: '当前运行风机的风量', value: '${run}', trans: { 1: '${f1Val}', '2': '${f2Val}' } }] } }。
 * 那么 board 将会显示 2555 字样。
 * 特殊的，如果有字样无法翻译完全，那么 trans 中如果提供了 default 字段，则其他字段匹配不到后会展示 default 的内容，反之展示未翻译的内容。
 */
export interface ModuleData {
  header: {
    /** 是否展示 header */
    show: boolean;
    /** 读取数据时的基础路径，如果指定，应指向数组 */
    readFrom: string;
    /** 左侧选择框的配置 */
    selector: {
      show: boolean;
      /** 展示的内容，formatter 格式 */
      value: string;
      /** 翻译依据，formatter 格式 */
      trans?: Record<string, string>;
    };
    /** 右侧插槽的配置 */
    slot: {
      show: boolean;
      /** 展示的内容，formatter 格式 */
      value: string;
      /** 翻译依据，formatter 格式 */
      trans?: Record<string, string>;
    };
  };
  background: {
    /** 是否展示背景 */
    show: boolean;
    /** 背景资源的类型 */
    type: 'image' | 'video';
    /** 背景资源的链接 */
    link: string;
  };
  layout: {
    /** 布局方向 */
    direction: 'column' | 'row';
    items: {
      /** 分区名称，对应下方的配置 */
      name:
        | 'board'
        | 'list'
        | 'chart'
        | 'table'
        | 'gallery'
        | 'complex_list'
        | 'gallery_list'
        | 'tabs'
        | 'blast_delta'
        | 'measure_detail'
        | 'select_cs'
        | 'qh_curve'
        | 'ai_chat'
        | 'device_alarm'
        | 'partition'
        | 'selector_dual_chart'
        | 'radio_label'
        | 'button_list'
        | 'card_list'
        | 'generalist';
      /** 分区大小 */
      basis: string;
      overflow?: boolean;
      pageType?: string;
    }[];
  };
  board?: ModuleDataBoard[];
  list?: ModuleDataList[];
  gallery?: ModuleDataGallery[];
  gallery_list?: ModuleDataGalleryList[];
  chart?: ModuleDataChart[];
  table?: ModuleDataTable[];
  tabs?: ModuleDataTabs[];
  preset?: ModuleDataPreset[];
  complex_list?: ModuleDataComplexList[];
  partition?: ModuleDataPartition[];
  /** 如果目前没有数据可以对接，可使用模拟数据先行展示 */
  mock?: any;
  /** 如果模块需要跳转，可以在这里配置，部分类型的模块（保德）不支持 formatter 格式 */
  to?: string;
}

export interface ShowStyle {
  /** 模块的宽高，特殊情况下可以自定义宽高 */
  size: string;
  /** 模块的版本，除了新版，只要有一个模块指定为旧版或其他版本，那么整个页面风格将变更为对应版本，优先级 旧版 > 普通版 > 新版 */
  version: '原版' | '新版' | '普通版' | '保德' | '淡蓝色' | '翠绿色';
  /** 模块的位置，即定位，特殊情况下可以自定义定位 */
  position: string;
  // 模块位置  根据这个配置决定使用hearder的方式
  headerPosition?: 'leftTop' | 'leftCenter' | 'leftBottom' | 'rightTop' | 'rightCenter' | 'rightBottom' | 'centerTop' | 'centerBottom';
}

/**
 * 读取数据所使用的配置，在首页配置中的多处频繁使用
 */
export interface ReadFrom {
  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
  readFrom: string;
  /** 数据解析格式 */
  parser?: 'json';
}

export interface CommonItem {
  /** 展示牌说明内容，formatter 格式 */
  label: string;
  /** 展示牌值内容，formatter 格式 */
  value: string;
  /** 翻译依据，formatter 格式 */
  trans?: Record<string, string>;
}

export interface ModuleDataBoard extends ReadFrom {
  /** 展示牌预设的背景类型 */
  type:
    | 'A'
    | 'B'
    | 'C'
    | 'D'
    | 'E'
    | 'F'
    | 'G'
    | 'H'
    | 'I'
    | 'New'
    | 'New1'
    | 'New2'
    | 'New3'
    | 'J'
    | 'K'
    | 'L'
    | 'M'
    | 'N'
    | 'O'
    | 'P'
    | 'Q'
    | 'R'
    | 'S'
    | 'T'
    | 'U'
    | 'CKQMB'
    | 'CKQMB0'
    | 'CKQMB1'
    | 'CKQMB2';
  /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
  layout: 'val-top' | 'label-top' | 'new-top' | 'new1-top' | 'new2-top' | 'new3-top';
  /** 核心配置，每个展示牌对应一项 */
  items: CommonItem[];
}

export interface ModuleDataList extends ReadFrom {
  /** 列表预设的背景类型 */
  type:
    | 'timeline'
    | 'A'
    | 'B'
    | 'C'
    | 'D'
    | 'E'
    | 'F'
    | 'G'
    | 'H'
    | 'I'
    | 'J'
    | 'K'
    | 'timelineNew'
    | 'fireList'
    | 'L'
    | 'M'
    | 'N'
    | 'O'
    | 'P'
    | 'Q'
    | 'R'
    | 'S'
    | 'T';
  /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
  mapFromData?: boolean;
  /** 核心配置，每个列表项对应一项 */
  items: Array<
    {
      /** 列表项指定颜色，根据类型不同会有各自的样式 */
      color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white' | 'lightblue';
      /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
      info?: string;
    } & CommonItem
  >;
}

export interface ModuleDataGallery extends ReadFrom {
  /** 画廊预设的背景类型 */
  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
  /** 核心配置，每个画廊项对应一项 */
  items: Array<
    {
      /** 画廊项指定颜色，根据类型不同会有各自的样式 */
      color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white' | 'lightblue';
    } & CommonItem
  >;
}

export interface ModuleDataGalleryList extends ReadFrom {
  /** 复杂列表预设的背景类型 */
  type: 'A' | 'B';
  /** 核心配置，每个复杂列表的列表项对应一项 */
  items: Array<
    {
      /** 列表项指定颜色，根据类型不同会有各自的样式 */
      color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
      /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
      info?: string;
    } & CommonItem
  >;
  /** 核心配置，每个复杂列表的画廊项对应一项 */
  galleryItems: Array<
    {
      /** 列表项指定颜色，根据类型不同会有各自的样式 */
      color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
    } & CommonItem
  >;
}

export interface ModuleDataChart extends ReadFrom {
  /** 图表类型，一个类型对应一种图表预设 */
  type:
    | 'pie'
    | 'bar'
    | 'line'
    | 'line_area'
    | 'line_bar'
    | 'line_smooth'
    | 'line_smooth_complex'
    | 'bar_stack'
    | 'bar_cylinder'
    | 'bar_cylinder_wide'
    | 'pie_halo'
    | 'line_enhance'
    | 'pie_drag'
    | 'scatter';
  /** 排序依据，该项应配置将配合 readFrom 使用 */
  sortBy?: string;
  /** 排序规则，desc降序，asc升序 */
  order?: 'desc' | 'asc';
  /** 数据缩放组件的配置，每一项对应一项 xAxis 配置 */
  dataZoom?: {
    /** 数据轴允许展示的最大数据量，超长后出现数据缩放组件，配置后大部分图表会抬高以适配一个数据缩放组件 */
    // maxAxisLength: number;
    show: boolean;
    /** 数据窗口范围的结束百分比，范围是：0 ~ 100 */
    end: number;
  }[];
  /** 图表x轴配置（若有），支持多个，注意至少一个 */
  xAxis: {
    show: boolean;
    name?: string;
    axisLabel?: {
      rotate?: number;
      interval?: number;
      [key: string]: any; // 允许其他 ECharts 支持的属性
    };
  }[];
  /** 图表y轴配置（若有），支持多个，注意至少一个 */
  yAxis: {
    show: boolean;
    /** y轴内容，不支持 formatter 格式 */
    name: string;
    /** y轴的对齐方式 */
    position: 'left' | 'right';
  }[];
  /**
   * 核心配置
   *
   * 例如有数据：arr1: [{ name: 'A', data: [{ pos: '1', val: 1 }] }, { name: 'B', data: [{ pos: '1', val: 1 }] }]
   * 首先假设 readFrom: 'arr1'，那么 series 将根据 arr1 数据生成
   * 则配置一个标准折线图所需的 series 配置类似：[{ label: '${name}', readFrom: 'data', xprop: 'pos', yprop: 'val' }]
   */
  series: {
    /** 图表系列的类型，若不配置则取 type 的值 */
    type?: 'pie' | 'bar' | 'line' | 'scatter';
    /** 该系列的数据说明， formatter 格式，将用于 legend 相关的内容 */
    label: string;
    /** 设置 series 系列时的基础路径，配合上级 readFrom 使用，其应指向一个数组，该数组将作为映射系列时的基准 */
    readFrom: string;
    /** 取值 prop，注意该项不支持 formatter 格式，将用于 xAxis 相关的内容 */
    xprop: string;
    /** 取值 prop，注意该项不支持 formatter 格式，将用于 yAxis 相关的内容 */
    yprop: string;

    color?: string;
    yAxisIndex?: number;
  }[];
  /** 图表legend配置 */
  legend: {
    show: boolean;
    /** 参考echarts格式化文本 */
    formatter?: string;
  };
  /** 是否在数据更新后完全更新，在无法正确更新图表数据时可以启用 */
  clear?: boolean;
}

export interface ModuleDataTable extends ReadFrom {
  /** 表格的预设样式 */
  type: 'A' | 'B' | 'C' | 'D' | 'CKQMB';
  /** 是否自动滚动 */
  autoScroll?: boolean;
  /** 核心配置，每个表格列对应一项 */
  columns: {
    /** 数据说明，注意该项不支持 formatter 格式 */
    name: string;
    /** 取值 prop，注意该项不支持 formatter 格式 */
    prop: string;
  }[];
}

export interface ModuleDataPreset extends ReadFrom {
  /** 表格的预设样式，由各个预设单独使用，没有固定类型 */
  [key: string]: any;
}

export interface ModuleDataComplexList extends ReadFrom {
  /** 列表预设的背景类型 */
  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
  /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
  mapFromData?: boolean;
  /** 核心配置，每个列表项对应一项 */
  items: {
    /** 列表项标题，formatter 格式 */
    title: string;
    /** 翻译依据，formatter 格式 */
    trans?: Record<string, string>;
    contents: Array<
      {
        /** 列表项指定颜色，根据类型不同会有各自的样式 */
        color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white' | 'lightblue';
        /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
        info?: string;
      } & CommonItem
    >;
  }[];
}

export interface ModuleDataTabs extends ReadFrom {
  /** 列表预设的背景类型 */
  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K';
  /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
  mapFromData?: boolean;
  /** 核心配置，每个列表项对应一项 */
  items: {
    /** 列表项标题，formatter 格式 */
    title: string;
    /** 翻译依据，formatter 格式 */
    trans?: Record<string, string>;
    contents: Array<
      {
        /** 列表项指定颜色，根据类型不同会有各自的样式 */
        color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white' | 'lightblue';
        /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
        info?: string;
      } & CommonItem
    >;
  }[];
}

export interface ModuleDataPartition extends ReadFrom {
  /** 展示分隔条的背景类型 */
  type: 'A';
  /** 展示分隔条布局，决定是 label 部分在前方或是 icon 在前方 */
  layout: 'icon-pre' | 'label-pre';
  /** 展示牌说明内容，formatter 格式 */
  label: string;
  /** 展示牌值内容，formatter 格式 */
  icon: string;
}
