import { LoginCollect } from 'basic/src/main/ets/models/LoginCollect'
import { CodeInputType } from '../models'

@Component
export struct LoginInput {
  item?: CodeInputType
  code: string = ''
  @Prop inputData: string = ''
  marginBottom: number = 8
  needCode: boolean = true
  declare loginCollect: LoginCollect
  @Prop isPassword: boolean = false
  @Prop isAgree: boolean = false
  @Require inputChange: (_: string) => void
  @State private time: number = 61
  private declare setIntervalId: number
  click: () => void = () => {
  }

  aboutToDisappear(): void {
    clearInterval(this.setIntervalId)
  }

  build() {
    Row({ space: 8 }) {
      Text(this.item?.txt)
        .fontColor('#FF141111')
        .fontSize(16)
        .width(71)
        .textAlign(TextAlign.Center)
        .border({ width: { right: 1 }, color: '#FFB2B2B2' })
      TextInput({ text: this.inputData, placeholder: this.item?.placeHolder })
        .layoutWeight(1)
        .type(this.isPassword ? InputType.Password : InputType.PhoneNumber)
        .borderRadius(0)
        .textAlign(TextAlign.Start)
        .height(31)
        .placeholderFont({ size: 16 })
        .placeholderColor($r('[basic].color.main_na_color'))
        .backgroundColor(Color.Transparent)
        .padding(0)
        .caretColor('rgba(0, 0, 0, 0.85)')
        .onChange(this.inputChange)

      if (this.needCode) {
        Text(this.time == 61 ? '获取验证码' : this.time + '后重新发送')
          .height(30)
          .fontSize(12)
          .fontColor($r('[basic].color.login_main_yellow'))
          .borderRadius(16)
          // .backgroundColor($r('[basic].color.main_ac_color_dark'))
          .onClick(() => {
            this.loginCollect.requestSmsCode((res) => {
              if (res.smsCode) {
                this.inputData = res.smsCode
              }
              this.time = 60
              this.setIntervalId = setInterval(() => {
                this.time--
                if (this.time < 1) {
                  this.time = 61
                  clearInterval(this.setIntervalId)
                }
              }, 1000)
            })
          })
          .enabled(this.time == 61)
          .padding({
            left: 12,
            right: 12,
            top: 6,
            bottom: 6
          })

      }

    }
    .border({ width: { bottom: 1 }, color: '#f7f9fa' })
    .height(56)
    .width('100%')
    .margin({ bottom: this.marginBottom })
  }
}