// 大屏设计时的配置
interface ScreenDesignTimeConfig {
  // 大屏样式
  style: {
    width: number;
    height: number;
    background: string;
    stretchMode: string; // 拉伸模式
  };
  // 组件配置
  // 可以支持组件包含子组件
  components: Array<{
    id: string; // 组件id（唯一）
    type: string; // 组件类型
    name: string; // 组件名称（可由用户定义）
    groupId?: string; // 组件所在分组ID（如果存在）
    zIndex?: number; // 组件在分组中的层级
    parentId?: string; // 组件的父组件ID（如果存在）
    children: ScreenDesignTimeConfig["components"]; // 子组件
    // 组件在画布上的布局和样式
    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; // 组件数据
    dataSource: {
      variableNames: Array<string>; // 关联的全局变量名称
      type: "static" | "api" | "variable";
      // 数据源配置
      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>;
    };
    // 组件交互
    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; // 交互动作参数
            }>;
          };
        }>;
      }>;
    };
  }>;
  groups: Array<{
    id: string;
    name: string;
    children: Array<string>;
  }>;
  // 全局变量
  // 如果一个全局变量的数据源是静态数据源，则只通过组件的事件去更新变量
  // 如果一个全局变量的数据源是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: any, variables: any) => Promise<any>
  }>;
}

// 组件的分类：
// 1. 数据组件：大屏中的组件
// 2. 控制组件：大屏中的悬浮组件，可拖拽，贴边时可隐藏，比如一个控制面版用于操作摄像机/录像机等设备
// 3. 反馈组件：弹窗（全局，带遮罩）

interface ScreenRuntimeConfig {}