import { CSSProperties } from 'vue'

type PartItem = {
  name: string
  stateList: string[]
}

export interface ComponentSchema {
  // 其他未明确指定的属性
  [fieldName: string]: any
  // 子节点列表，可选
  children?: ComponentSchema[]
  // 组件属性，可选
  componentProps?: any
  // 编辑组件数据，可选（属性编辑另外绑定编辑的数据，默认则为当前选中组件数据）
  editData?: object
  // 节点字段，可选
  field?: string
  // 节点ID，可选
  id?: string
  // 是否为表单输入组件，可选
  input?: boolean
  // 节点标签，可选
  label?: string
  // 标签宽度，可选
  labelWidth?: string | number
  // 标签位置
  labelPosition?: 'left' | 'top'
  // 是否无需表单项，可选
  noFormItem?: boolean
  // 事件绑定
  // 表单验证规则，可选
  rules?: FormItemRule[]
  // 是否显示（属性编辑组件可以添加函数动态显示隐藏），可选
  show?: ((renderCallbackParams: RenderCallbackParams) => boolean) | boolean
  // 插槽名称（组件为插槽类型时，需要设置插槽name），可选
  slotName?: string
  // 插槽列表，可选
  slots?: { [slotName: string]: ComponentSchema[] | string }
  // 节点类型，必选
  valueType: string
  // 配置器隐藏
  hideInForm?: boolean
  // 渲染表单项
  render?: (renderCallbackParams: RenderCallbackParams) => TSX.Element
  // 渲染组件
  renderItem?: (renderCallbackParams: RenderCallbackParams) => TSX.Element
}

export interface IComponentModelConfig {
  /**
   * 组件label
   */
  label: string
  /**
   * 组件图标
   */
  icon?: string
  /**
   * 组件
   */
  component: any
  /**
   * 组件key
   */
  key: string
  /**
   * 所属分组
   */
  group: string
  /**
   * 组件排序
   */
  sort?: number
  /**
   * 是否在组件库隐藏
   */
  hideLibary?: boolean
  /**
   * 是否存在子组件
   */
  hasChildren?: boolean
  /**
   * 默认样式
   */
  defaultStyle?: any
  /**
   * 组件模块
   */
  parts: PartItem[]
  /**
   * 组件默认数据
   */
  defaultSchema: {
    /**
     * 默认属性
     */
    props?: Record<string, any>
    /**
     * 默认样式
     */
    styles?: IStyleConfig[]
    /**
     * 其他
     */
    [key: string]: any
  }
  /**
   * 组件配置
   */
  config: {
    /**
     * 基础属性配置
     */
    props?: ComponentSchema[]
    /**
     * 核心属性
     */
    coreProps?: ComponentSchema[]
    /**
     * 样式属性配置
     */
    styles?: ComponentSchema[]
  }
  /**
   * 宽高触发事件
   * @param props
   * @returns
   */
  onChangeSize?: (props: any, ...args) => void | { width?: number; height?: number }
  /**
   * 位置触发事件
   * @param props
   * @returns
   */
  onChangePosition?: (props: any, ...args) => void
  /**
   * 获取子节点样式
   */
  getChildStyle?: (props: any) => CSSProperties
}

/**
 * 渐变颜色
 */
export type GradientColor = {
  // 渐变类型
  type: 'linear' | 'radial' | 'conical'
  // 渐变方向
  direction?: 'horizontal' | 'vertical'
  // 渐变类型
  gradientType: 'gradient' | 'advanced'
  // 中心坐标
  center?: {
    x: number
    y: number
  }
  // 起始角度
  angle?: {
    start: number
    end: number
  }
  // 起始坐标
  start?: {
    x: number
    y: number
  }
  // 结束坐标
  end?: {
    x: number
    y: number
  }
  // 渐变点
  points?: {
    // 渐变点坐标 0~255
    point: number
    // 渐变点颜色 带透明度
    color: string
  }[]
}

/**
 * 控件样式
 */
export interface IStyleConfig {
  // 所属模块状态
  part: {
    name: string
    state: string
  }
  theme?: string
  // 背景样式
  background?: {
    // 背景颜色
    color: string | GradientColor
    // 背景图片
    image?: {
      // 图片源ID
      imgId: string
      // 图片颜色
      recolor: string
      // 图片透明度
      alpha: number
    }
  }
  // 文字样式
  text?: {
    // 文字颜色 带透明度
    color: string
    // 字体
    family: string
    // 字体大小
    size: number
    // 对齐方式 left center right
    align?: string
    // 字重 正常/粗
    weight?: 'normal' | 'bold'
    // 斜体
    italic?: boolean
    // 装饰
    decoration?: 'underline' | 'strikethrough' | 'underline strikethrough' | 'none'
  }
  // 边框样式
  border?: {
    // 边框颜色 带透明度
    color?: string
    // 边框宽度
    width?: number
    // 边框圆角
    radius?: number
    // 边框 all left right top bottom
    side?: string[]
  }
  // 外边框
  outline?: {
    color?: string
    width?: number
    pad?: number
  }
  // 阴影样式
  shadow?: {
    // 阴影颜色 带透明度
    color: string
    // 起始坐标x
    offsetX: number
    // 起始坐标y
    offsetY: number
    // 扩散
    spread: number
    // 模糊宽度
    width: number
  }
  // 内边距
  padding?: {
    // 上
    top: number
    // 右
    right: number
    // 下
    bottom: number
    // 左
    left: number
    // 行间距
    row?: number
    // 列间距
    column?: number
  }
  // 外边距
  margin?: {
    // 上
    top: number
    // 右
    right: number
    // 下
    bottom: number
    // 左
    left: number
  }
  // 变化
  transform?: {
    width: number
    height: number
    translateX: number
    translateY: number
    originX: number
    originY: number
    rotate: number
    scale: number
  }
  // 间距
  spacer?: {
    // 行间距
    lineHeight?: number
    // 字间距
    letterSpacing?: number
  }
  // 曲线
  curve?: {
    // 颜色 带透明度
    color: string
    // 宽度
    width: number
    // 圆角开关
    radius: boolean
    // 透明度
    alpha?: number
    // 图像
    image?: string
  }
  // 直线
  line?: {
    // 颜色 带透明度
    color: string
    // 宽度
    width: number
    // 圆角开关
    radius?: boolean
    // 透明度
    alpha?: number
    // 图像
    image?: string
    // 虚线宽度
    dashWidth?: number
    // 虚线间隔
    dashGap?: number
  }
  // 图像样式
  imageStyle?: {
    recolor: string
    alpha: number
  }
  // 动画
  animation?: {
    time: number
  }
  // 其他
  other?: { [key: string]: any }
}
