import { yTRouter } from 'basic'


@Extend(Span)
function spanEx(click: () => void) {
  // .decoration({ type: TextDecorationType.Underline, color: $r('[basic].color.main_ac_color_dark') })
  .fontColor($r('[basic].color.main_ac_color_dark'))
  .onClick(click)
}

@Component
export struct Terms {
  @Prop isAgree: boolean
  mg: number = 39
  @Require onAgreeChange: () => void

  build() {
    Column() {
      Row() {
        Checkbox()
          .width(12)
          .aspectRatio(1)
          .margin({ right: 5 })
          .onChange(() => {
            this.onAgreeChange()
          })
          .selectedColor($r('[basic].color.main_ac_color_dark'))
        Text() {
          Span('我已阅读并同意')
          // Span('《中国认证服务条款》')
          //   .spanEx(() => {
          //
          //   })
          //
          // Span('以及')
          Span('《小易决定用户协议》')
            .spanEx(() => {
              yTRouter.router2userAgreement()

            })
          Span('和')
          Span('《隐私政策》')
            .spanEx(() => {
              yTRouter.router2Privacy()
            })
          Span('。')
        }
        .fontWeight(300)
        .fontColor('#FF686868')
        .fontSize(12)

      }
      .width('100%')
      .alignItems(VerticalAlign.Center)
      .margin({ bottom: this.mg })

      // Row() {
      //   Text()
      //     .height('100%')
      //     .aspectRatio(1)
      //     .backgroundColor(Color.White)
      //     .borderRadius(18)
      // }
      // .padding(1)
      // .alignSelf(ItemAlign.End)
      // .width(39)
      // .aspectRatio(2)
      // .borderRadius(18)
      // .justifyContent(this.isAgree ? FlexAlign.End : FlexAlign.Start)
      // .backgroundColor(this.isAgree ? $r('[basic].color.main_ac_color_dark') : '#D9D9D9')
      // .onClick(() => {
      //   this.getUIContext().animateTo({ duration: 200 }, this.onAgreeChange)
      // })
    }

  }
}