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 {
  @Link isAgree: boolean
  mg: number = 39

  build() {
    Column() {
      Row() {
        Text() {
          Span('我已阅读并同意')
          // Span('《中国认证服务条款》')
          //   .spanEx(() => {
          //
          //   })
          //
          // Span('以及')
          Span('"用户协议"')
            .spanEx(() => {
              yTRouter.router2AgreementPage('用户协议')

            })
          Span('和')
          Span('"隐私政策"')
            .spanEx(() => {
              yTRouter.router2AgreementPage('隐私政策')
            })
          Span('。')
        }
        .fontColor('#4D000000')
        .fontSize($r('[basic].float.page_text_font_size_10'))
        .margin({ bottom: this.mg })
      }
      .width('100%')

      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(() => {
        animateTo({ duration: 200 }, () => {
          this.isAgree = !this.isAgree
        })
      })
    }

  }
}