
@CustomDialog
export struct ImageWatermarkDialog {
  onRadiusChanged: (radius: number) => void = () => {};
  confirm: (radius: number) => void = () => {};

  private controller: CustomDialogController;

  @State radius: number = 0;

  build() {
    Column() {
      RelativeContainer() {
        Text('加图片')
          .width('auto')
          .fontColor($r('app.color.color_212226'))
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
          .alignRules( {
            left: {anchor: '__container__', align: HorizontalAlign.Start},
            right: {anchor: '__container__', align: HorizontalAlign.End}
          })

        Image($r('app.media.ic_close')).width(20).height(20)
          .alignRules( {
            top: {anchor: '__container__', align: VerticalAlign.Top},
            right: {anchor: '__container__', align: HorizontalAlign.End}
          })
          .margin({ right: 16 })
          .onClick(() => {
            this.controller.close()
          })
      }
      .width('100%')
      .height(30)

      Row() {
        Text('圆角').fontColor($r('app.color.color_212226')).fontSize(14).margin({left: 16})
        Slider({
          value: this.radius,
          min: 0,
          max: 100
        })
          .blockColor($r('app.color.color_466afd'))
          .trackColor($r('app.color.color_eeeeee'))
          .onChange((value: number, mode: SliderChangeMode) => {
            this.radius = value
            if (this.onRadiusChanged) {
              this.onRadiusChanged(value)
            }
          })
          .layoutWeight(1)

        Text(`${this.radius}`).width(25).fontColor($r('app.color.color_999999')).fontSize(14).margin({right: 16})
      }
      .width('100%')
      .margin({top: 75, bottom: 100})

      Button('确定', { type: ButtonType.Capsule, stateEffect: true })
        .fontColor(Color.White)
        .fontSize(16)
        .width('90%')
        .height(46)
        .margin({ top: 30 })
        .backgroundColor($r('app.color.color_466afd'))
        .onClick(() => {
          if (this.confirm) {
            this.confirm(this.radius)
          }
          this.controller.close()
        })
    }
    .padding({ top: 30, bottom: 22 })
    .backgroundColor(Color.White)
    .width('100%')
  }
}