import { BasicType } from 'basic'


@Component
export struct OtherLoginMethods {
  loginMethodArr: BasicType<undefined>[] = []

  build() {
    Column() {
      Text('其他登入方式')
        .fontSize($r('[basic].float.page_text_font_size_10'))
        .margin({ bottom: 24 })
      Column({ space: 16 }) {
        ForEach(this.loginMethodArr, (item: BasicType<undefined>) => {
          LoginMethod(item)
        })
      }

    }
    .alignItems(HorizontalAlign.Start)
  }
}


@Builder
function LoginMethod(item: BasicType<undefined>) {
  Stack({ alignContent: Alignment.Start }) {
    Button(item.text)
      .border({ width: 1, color: $r('[basic].color.main_ac_color_dark') })
      .backgroundColor(Color.Transparent)
      .width('100%')
      .height(37)
      .fontSize($r('[basic].float.page_text_font_size_12'))
      .type(ButtonType.Normal)
      .fontColor($r('[basic].color.main_ac_color_dark'))
      .borderRadius(32)
    Image(item.src)
      .width(24)
      .height(24)
      .offset({ left: 12 })

  }
  .onClick(item.click)

}