// 大屏设计时的配置，可以被导出/导入
export interface PageDesignModeConfig {
  id: string;
  name: string;
  author: string;
  createdTime: string;
  updatedTime: string;
  // 大屏样式
  style: {
    width: number;
    height: number;
    background: string;
    stretchMode: string; // 拉伸模式
  };
  // 组件配置
  // 可以支持组件包含子组件 (对于地图组件，它的子组件是逻辑层面的而并非大屏上的真实组件，因此不算作子组件)
  // 例如可以设计对话框和悬浮窗组件，例如它们的type分别为 Modal 和 FloatingPanel，
  // 当在物料区的图层编辑器中点击编辑该组件时，会打开一个新的屏幕设计器，物料区中加载子组件。
  // 将分组(group)也视为一种特殊的组件，统一在components数组中管理，从而实现统一的图层排序能力。
  components: Array<{
    id: string; // 组件id(唯一)
    type: string; // 组件类型
    name: string; // 组件名称(可由用户定义)
    parentId?: string; // 组件的父组件ID(如果存在)，没有parentId的组件称为顶层组件
    // 当多个顶层组件成组时，组件的层级会被修改，也就是说分组并不是组件层级的参考系，组件的层级永远只与大屏和父组件有关
    zIndex?: number; // 组件在大屏/父组件中的层级
    children: Array<PageDesignModeConfig['components'][0]['id']>; // 子组件id
    // 设计时属性，运行时会忽略
    design: {
      hidden: boolean;
      locked: boolean;
    };
    // 组件在画布上的布局和样式
    style: {
      left: number; // 组件在画布上的X轴距离
      top: number; // 组件在画布上的Y轴距离
      width: number; // 组件宽度
      height: number; // 组件高度
      rotate: number; // 组件旋转角度
      visibility: string; // 组件可见性
      opacity: number; // 组件透明度
      pointerEvents: string; // 事件穿透
      // allowDrag: boolean; // 允许拖动
      // allowDrop: boolean; // 允许放置
    };
    props: {
      [name: string]: any;
    };
    data: any; // 组件数据
    // 数据源配置
    // 如何使用？提供编辑器给用户编写查询内容，允许使用mustache模板语法
    // 来引用全局变量，且支持路径访问。
    // 例如：现有全局变量 user ，内容是 { id: '1', name: 'zhangsan' }，
    // 则可以使用 {{ user.id }} 来引用 user.id ，即 '1'
    dataSource: {
      // 支持多数据源查询
      queries: Array<{
        id: string; // 查询ID，例如 'A', 'B'
        name: string; // 查询名称
        type: 'static' | 'variable' | 'api' | 'graphql';
        config: {
          value?: any;
          variableNames?: Array<string>; // 关联的全局变量名称
          api?: {
            url?: string;
            method?: 'GET' | 'POST';
            headers?: Record<string, any>;
            query?: Record<string, any>;
            body?: Record<string, any>;
          };
          graphql?: {
            query?: string;
            variables?: Record<string, any>;
          };
        };
        cors?: boolean; // 服务器代理请求
      }>;
      // 过滤器现在可以接收多个查询的结果，例如 { A: data, B: data }
      filterIds: Array<string>;
    };
    // 组件交互
    interaction: {
      // 下游交互事件
      events: Array<{
        id: string;
        name: string;
        // 判断条件
        conditions: Array<{
          // 每个判断条件可以由一系列过滤器组合而成
          filterIds: Array<string>;
          // 交互动作
          // 在配置事件动作时，先选择交互对象，再选择交互动作
          // 交互对象允许多选，多选后，交互动作的范围收缩到所选交互对象共有的动作
          // 如何判断一个动作是否为指定的多个交互对象所共有？动作名称与动作参数都相同
          // 为什么要添加beforeAction字段？计划支持分组向内部组件分派数据，
          // 即组件允许实现一个名为【更新数据】的动作(区别于【请求数据】)，
          // 该动作接收参数并将其直接赋值给组件数据，为了规范数据，在设计时需要在动作执行前做一些预处理
          actions: {
            components: Array<{
              id: string; // 下游交互组件ID
              name: string;
              filtersReturn: any; // 与判断条件的返回值相对应
              beforeAction: Array<string>; // 交互前动作(过滤器ID)
              actionName: string; // 交互动作名称
              params: any; // 交互动作参数
            }>;
            variables: Array<{
              id: string;
              name: string;
              beforeAction: Array<string>; // 交互前动作(过滤器ID)
              actionName: string; // 交互动作名称
              params: any; // 交互动作参数
            }>;
          };
        }>;
      }>;
    };
  }>;
  // 全局变量
  // 如果一个全局变量的数据源是静态数据源，则只通过组件的事件去更新变量
  // 如果一个全局变量的数据源是API，则尽量不要由组件事件去更新这个变量
  // 进阶场景：全局变量可以定时请求数据，并配置“当数据更新时”事件，
  // 对应的交互行为是使某个分组下的组件更新数据，这些组件也同时配置了数据源为该全局变量，
  // 进而达到降低请求量的目的。
  // (在选择下游交互组件时，应当是“分组-组件”的级联选择)
  variables: Array<{
    id: string;
    name: string;
    description?: string;
    data: any;
    dataSource: {
      type: 'static' | 'api';
      // 数据源配置
      config: {
        value?: any;
        url?: string;
        method?: 'GET' | 'POST';
        headers?: Record<string, any>;
        query?: Record<string, any>;
        body?: Record<string, any>;
      };
      cors: boolean;
      filterIds: Array<string>;
    };
  }>;
  // 过滤器
  filters: Array<{
    id: string;
    name: string;
    payload: string; // (data: { queryId: string; queryData: any }[], variables: any) => Promise<any>
  }>;
}

export interface AppDesignModeConfig {
  id: string;
  name: string;
  routes: Array<{
    path: string;
    name?: string;
    pageId: string;
    children?: AppDesignModeConfig['routes'];
  }>;
}

// export interface PagePreviewModeConfig {}

// export interface PagePublishModeConfig {}