// 分两种 用type作为区分
// 1. 功能元素（组件）
// 2. 容器元素（组件）
type Element = {
  // 唯一ID便于操作 一切以 id 为主
  id: string;
  // (功能 / 容器) 名称
  element: string;
  // 字面意思
  type: 'element' | 'container';
  // props 这里放元素（组件）的 参数
  props?: {
    // 这里由于其他一些问题暂时这样写了
    [key: string]: any;
    [key: number]: any;
  };
  // 容器组件 存放的子元素
  children?: LowElement[];
  models: {
    [key: string]: '[model_key].?[key].?[key]', // key 为自定义
  },
  // 动作，这一块比较复杂
  // 原本设计为[key:value]，由于可能存在描述信息，所以目前改成{xxx}
  actions: [
    {
      key: string, // 随机生成
      // 事件名称 按组件动态创建
      name: string,
      // event: 'click' | 'change' | 'submit', // 对应的可能是 @[event]="" 这个操作
      event?: string, // 目前只有组件中才有意义
      // 动作 目前按同步执行
      handle: [
        {
          key: string, // 随机生成
          name: string,
          // location表示动作存在的位置 一般为element、global, type 表示类型 （如 fetch 发送请求）
          // location 可能还有些复杂的设计 如元素可能绑定一个id，全局中是global_[namespace] 元素中可能是 element_[id]
          // 例子: global_dialog.b2d12 | element_1e4sa.12342
          link: '[location].[key]', // 关联 的触发动作 可能是发送请求 可能是 触发其他元素的动作
          // 这个可用于接口方法和传输 以及 Open dialog
          data?: {
            // 参考 models
            bind?: string, // 绑定的数据源 接口请求、打开dialog或者其他需要数据关联的操作
            recv?: string, // 接受响应的数据源
          }
        },
        // ... more
      ]
    },
    // ... more
  ]
}

/**
* 数据类型
*/
types = [
  {
    type: 'string',
    value: '""',
    label: "字符串"
  },
  {
    type: 'number',
    value: '0',
    label: "数字"
  },
  {
    type: 'boolean',
    value: 'false',
    label: "布尔"
  },
  {
    type: 'array',
    value: '[]',
    label: "数组"
  },
];
/**
* 模型
*/
models = [
  {
    name: "表单", // 数据源名称
    key: 'model_1a52926d55f3', // 绑定的字段 该字段创建的时候生成
    // 实体
    entities: [
      {
        key: 'username', // 绑定的字段 输入
        name: "用户名", // 实体名称 输入
        type: 'string', // 数据类型 选择
        value: '""', // 默认值 输入
      },
      {
        key: 'password', // 绑定的字段 输入
        name: "密码", // 实体名称 输入
        type: 'string', // 数据类型 选择
        value: '""', // 默认值 输入
      },
      // ...more
    ]
  }
]

/**
* 数据 通过该 模型生成的结构体
*/
data = {
  model_1a52926d55f3: {
    username: '',
    password: ''
  }
}

/**
* 全局动作
* 用于定义如打开dialog, 发送请求
*/
actions = {
  // namespace为命名空间 一般已经内置命名空间 如 dialog fetch 等
  // 每个命名空间对应一个 解析/执行 器
  [namespace: string]: {
    name: string,
    actions: [
      {
        key: string, // 随机生成
        //  eventName 事件名称 按组件/自定义名称动态创建
        name: string,
        // event: 'click' | 'change' | 'submit', // 对应的可能是 @[event]="" 这个操作
        event?: string, // 目前只有组件中才有意义
        // 动作 目前按同步执行
        handle: [
          // 需要根据解析器具体操作
          // ... more
        ],
        data: {
          bind: '',
          recv: '', // 获取
          replace: [], // 需要取代的值，目前用于数组中（项）的下标
        }
      }
    ],
    // ... more
  }
}