
@ComponentV2
export struct AddImageItemView {
  @Param uri?: string = undefined
  @Param index: number = 0
  @Param onDelete?: (uri: string) => void = undefined

  build() {
    Stack() {
      RelativeContainer() {
        Image($r('app.media.ic_add_feedback_image')).width(26).height(26)
          .alignRules({
            left: { anchor: '__container__', align: HorizontalAlign.Start },
            top: { anchor: '__container__', align: VerticalAlign.Top },
            right: { anchor: '__container__', align: HorizontalAlign.End },
            bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
          })
          .visibility(this.uri ? Visibility.None : Visibility.Visible)

        Image(this.uri).width('100%').height('100%')
          .visibility(this.uri ? Visibility.Visible : Visibility.None)

        Image($r('app.media.ic_delete_feedback_img'))
          .width(18)
          .height(18)
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },
            right: { anchor: '__container__', align: HorizontalAlign.End }
          })
          .onClick(() => {
            if (this.onDelete) {
              this.onDelete(this.uri!!)
            }
          })
          .visibility(this.uri ? Visibility.Visible : Visibility.None)
      }
      .width(80)
      .height(80)
      .borderRadius(8)
      .borderWidth(1)
      .borderColor($r('app.color.color_dfdfdf'))
      .backgroundColor(Color.Transparent)
      .clip(true)
    }
    .width('100%')
    .alignContent(this.index % 3 === 0 ? Alignment.Start : this.index % 3 === 1 ? Alignment.Center : Alignment.End)
  }
}