import type { ComponentType } from "@/components";
declare interface BackgroundOptions {
  // 背景类型
  type: 'color' | 'image' | 'none';
  // 背景颜色
  color?: string;
  // 背景图片
  image?: string;
  // 背景图片填充方式
  fillType?: "cover" | "contain" | "fill" | "";
}

declare interface CustomElement {
  // 元素唯一标识
  key: number;
  // 元素名称
  name: string;
  // 组件类型
  componentType: ComponentType;
  // 元素层级
  zIndex: number;
  // 是否可见
  visible: boolean;
  // 是否锁定
  locked: boolean;
  // 容器样式 -- 包含样式，组件属性
  container: {
    // 元素样式
    style: Record<string, any>;
    // 元素属性
    props: Record<string, any>;
  };
  // 元素交互
  events: Record<string, any>;
  // 元素动画
  animations: Record<string, any>;
  // 组件内容 -- 数据源, 数据样式等
  props: Record<string, any>;
}

declare export interface ReferLine {
  // 辅助线唯一标识
  key: number;
  // 辅助线类型
  type: 'horizontal' | 'vertical' | null;
  // 辅助线位置
  value: number;
  // x坐标
  x?: number;
  // y坐标
  y?: number;
}

declare interface Page {
  // 页面名称
  name: string;
  // 页面背景
  background: BackgroundOptions;
  // 页面元素
  elements: CustomElement[];
  // 辅助线
  referLines: ReferLine[];
}

// 项目基本信息
declare export interface ProjectInfo {
  // 项目名称
  name: string;
  // 项目描述
  description: string;
  // 尺寸类型
  sizeType: string;
  // 屏幕宽度
  width: number;
  // 屏幕高度
  height: number;
  // 填充方式
  fillType?: ScreenFillEnum;
  // 页面内容
  pages: Page[];
}