import { YtAvoid, YTHeader, yTRouter } from 'basic';
import { bundleManager } from '@kit.AbilityKit';


@Builder
function AboutUSBuilder() {
  NavDestination() {
    AboutUS()
  }.title("关于我们")
  .hideTitleBar(true)
}

@Component
export struct AboutUS {
  @State content: string = '';
  @State isAgree: boolean = false
  @StorageProp(YtAvoid.safeBottomKey) safeBottom: number = 0
  ICPRecordNumber: string = '19019164号-5A'
  listData: string[] = ['用户协议', '隐私政策']
  @State versionName: string = ''

  async aboutToAppear() {
    const res = await bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT)
    this.versionName = res.versionName
  }

  build() {
    Column() {
      YTHeader({ title: "关于我们" })

      Column() {
        Image($r('[basic].media.app_icon'))
          .width(100)
          .margin({ bottom: 16 })
        Text('版本号:' + this.versionName)
          .margin({ bottom: 8 })
        Text('ICP备案号:' + this.ICPRecordNumber)
          .margin({ bottom: 20 })
          .fontSize(12)
          .fontColor(Color.Gray)
        List({ space: 25 }) {
          ForEach(this.listData, (item: string, index) => {
            ListItem() {
              Row() {
                Text(item).fontSize(13)
                  .fontColor(Color.Gray)
                Blank()
                Image($r('app.media.MRight')).width('24').height('24').margin({ right: 10 })
              }.width('100%')
              .onClick(() => {
                switch (index) {
                  case 0:
                    yTRouter.router2userAgreement()
                    break;
                  case 1:
                    yTRouter.router2Privacy()
                    break;
                }

              })
            }
          }, (item: string) => item)

          ListItem() {
            Row() {
              Text('个性化推荐').fontSize(13)
                .fontColor(Color.Gray)
              Blank()
              Row() {
                Text()
                  .height('100%')
                  .aspectRatio(1)
                  .backgroundColor(Color.White)
                  .borderRadius(20)
              }
              .padding(1)
              .alignSelf(ItemAlign.End)
              .width(39)
              .aspectRatio(2)
              .borderRadius(20)
              .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
                })
              })
            }
            .width('100%')
            .alignItems(VerticalAlign.Center)
            .padding({ right: 16 })
          }
        }
        .divider({
          strokeWidth: 1,
          color: '#DFDFDF',
          startMargin: 20,
          endMargin: 10
        })
        .width('100%')
        .padding({ top: 10 })

      }
      .width('100%')
      .margin({ top: 20 })
      .padding({ left: 20, right: 20 })

      // Web({
      //   src: "https://hm-static.ytpm.net/friend/doc/%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE.html",
      //   controller: this.webviewController,
      //   renderMode: RenderMode.ASYNC_RENDER // 设置渲染模式
      // }).padding(40).width('100%').height('100%')

    }
    .padding({ bottom: this.safeBottom })

  }
}