/*
 * streamToken输入框
 * EZOpenSDK
 *
 * Created by junecheng on 2024/12/27.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */

@CustomDialog
export default struct TKTokenDialog {
  title: ResourceStr = ''
  message: ResourceStr = ''
  placeholder?: ResourceStr = ''
  placeholder2?: ResourceStr = ''
  placeholder3?: ResourceStr = ''
  placeholder4?: ResourceStr = ''
  @Link inputContent: string
  @Link inputContent2: string
  @Link inputContent3: string
  @Link inputContent4: string
  confirmTitle?: ResourceStr = $r('app.string.dialog_ok')
  cancelTitle?: ResourceStr = $r('app.string.dialog_cancel')
  controller: CustomDialogController
  cancelClick?: () => void
  confirmClick?: (deviceSerial: string, cameraNo: number, deviceGlobalToken: string, videoToken: string) => void

  build() {
    Column() {
      Text(this.title).fontSize(18).fontColor(Color.Black).margin({ top: 20 })
      Text(this.message)
        .fontSize(14)
        .textAlign(TextAlign.Center)
        .margin({
          top: 10,
          bottom: 20,
          left: 20,
          right: 20
        })
      // 输入框1
      TextInput({ placeholder: this.placeholder, text: this.inputContent })
        .width('90%')
        .height(40)
        .placeholderFont({ size: 14 })
        .fontSize(14)
        .type(InputType.Normal)
        .onChange((value: string) => {
          this.inputContent = value
        })
      // 输入框2
      TextInput({ placeholder: this.placeholder2, text: this.inputContent2 })
        .width('90%')
        .height(40)
        .placeholderFont({ size: 14 })
        .fontSize(14)
        .type(InputType.Number)
        .margin({ top: 10 })
        .onChange((value: string) => {
          this.inputContent2 = value
        })
      // 输入框3
      TextInput({ placeholder: this.placeholder3, text: this.inputContent3 })
        .width('90%')
        .height(40)
        .placeholderFont({ size: 14 })
        .fontSize(14)
        .type(InputType.Normal)
        .margin({ top: 10 })
        .onChange((value: string) => {
          this.inputContent3 = value
        })
      // 输入框4
      TextInput({ placeholder: this.placeholder4, text: this.inputContent4 })
        .width('90%')
        .height(40)
        .placeholderFont({ size: 14 })
        .fontSize(14)
        .type(InputType.Normal)
        .margin({ top: 10 })
        .onChange((value: string) => {
          this.inputContent4 = value
        })
      Divider().vertical(false).margin({ top: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        // 取消按钮
        Button(this.cancelTitle)
          .width('50%')
          .height('100%')
          .backgroundColor(Color.White)
          .fontColor(Color.Blue)
          .onClick(() => {
            this.controller.close()
            if (this.cancelClick) {
              this.cancelClick()
            }
          })
        Divider().vertical(true)
        // 确定按钮
        Button(this.confirmTitle)
          .width('50%')
          .height('100%')
          .backgroundColor(Color.White)
          .fontColor(Color.Blue)
          .enabled(this.inputContent.length >= 9 && this.inputContent2.length > 0 && this.inputContent3.length >= 9 &&
            this.inputContent4.length >= 9)
          .onClick(() => {
            this.controller.close()
            if (this.confirmClick) {
              this.confirmClick(this.inputContent, parseInt(this.inputContent2), this.inputContent3, this.inputContent4)
            }
          })
      }.height(44)
    }.width('75%').height('auto').backgroundColor(Color.White).borderRadius(10)
  }
}