import { Params } from 'wdBean';
import { AppUtils, BreakpointSystem, StringUtils } from 'wdKit/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter';
import { TrackingButton, TrackConstants } from 'wdTracking/Index';
import { CustomTitleUI } from '../reusable/CustomTitleUI';
import { EnvironmentCustomDialog } from './EnvironmentCustomDialog';

const TAG = 'AboutPageUI';

@Component
export struct AboutPageUI {
  @State listData: Array<string | Array<string>> = ['隐私授权协议', '软件许可及用户协议','收集个人信息明示清单','第三方信息共享清单'];
  @State message: string = '京ICP备16066560号-6A   Copyright © 人民日报客户端\nall rights reserved.'
  @State version: string = '版本号：v'
  dialogController: CustomDialogController = new CustomDialogController({
    builder: EnvironmentCustomDialog({
      cancel: () => {

      },
      confirm: () => {
      }
    }),
    customStyle: true,
    alignment: DialogAlignment.Center
  })

  @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
  private breakpointSystem = new BreakpointSystem();
  @State percent:number = 1

  currentChanged(){
    if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
      this.percent = 0.7
    }else {
      this.percent = 1
    }
  }

  build() {
      this.aboutUi()
  }

  aboutToAppear() {
    this.breakpointSystem.register();
    this.currentChanged()
    let context = getContext();
    context.getApplicationContext();
    let appVerion = AppUtils.getAppVersionName()
    if (StringUtils.isNotEmpty(appVerion)) {
      this.version = "版本号：" + appVerion + '.' + AppUtils.getBuildVersion()
    }
  }

  aboutToDisappear(): void {
    this.breakpointSystem.unregister();
  }

  @Builder
  aboutUi() {
    Column() {
      CustomTitleUI({titleName:'关于',percent:this.percent})

      Image($r('app.media.setting_about_logo'))
        .width(`${this.calcHeight(278)}lpx`)
        .height(`${this.calcHeight(154)}lpx`)
        .margin({ top: `${this.calcHeight2(173)}lpx`, bottom: `${this.calcHeight2(154)}lpx` })
        .gesture(
          TapGesture({ count: 2 })
            .onAction((event: GestureEvent) => {
              this.dialogController.open()
            })
        )

      List() {
        ForEach(this.listData, (item: string, index: number) => {
          ListItem() {
            this.getArrowCell(item, index)
          }.onClick(() => {
            if (index == 0) {
              trackButtonClick("aboutPagePrivacyAgreement")
              let bean = { contentID: "2", pageID: "" } as Params
              WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
            } else if(index == 1){
              trackButtonClick("aboutPageUserAgreement")
              let bean = { contentID: "1", pageID: "" } as Params
              WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
            }else if(index == 2){
              let bean = { contentID: "5", pageID: "" } as Params
              WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
            }else if(index == 3){
              let bean = { contentID: "6", pageID: "" } as Params
              WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
            }
          })
        })
      }.divider({
        strokeWidth: 1,
        startMargin: `${this.calcHeight(29)}lpx`,
        endMargin: `${this.calcHeight(29)}lpx`,
        color: '#EDEDED'
      })

      Blank()

      Image($r('app.media.about_us_code'))
        .width(`${this.calcHeight(192)}lpx`)
        .height(`${this.calcHeight(192)}lpx`)

      Text(this.version)
        .fontSize(`${this.calcHeight(25)}lpx`)
        .textAlign(TextAlign.Center)
        .fontColor($r("app.color.color_666666"))
        .margin({ bottom: `${this.calcHeight(31)}lpx` })

      Text(this.message)
        .fontSize(`${this.calcHeight(19)}lpx`)
        .textAlign(TextAlign.Center)
        .fontColor($r("app.color.color_999999"))
        .margin({ bottom: `${this.calcHeight(35)}lpx` })
    }
    .width('100%')
    .height('100%')
  }

  // 右文字+箭头cell
  @Builder
  getArrowCell(item: string, index: number) {

    Row() {
      // 左侧标题
      Text(`${item}`)
        .fontColor('#666666')
        .fontSize(`${this.calcHeight(31)}lpx`)

      Image($r('app.media.mine_user_arrow'))
        .width(`${this.calcHeight(27)}lpx`)
        .height(`${this.calcHeight(27)}lpx`)
        .objectFit(ImageFit.Auto)
    }
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.SpaceBetween)
    .height(`${this.calcHeight(97)}lpx`)
    .width('100%')
    .padding({ left:`${this.calcHeight(29)}lpx`, right: `${this.calcHeight(29)}lpx` })
  }

  calcHeight(value:number): number{
    return value * this.percent
  }

  calcHeight2(value:number): number{
    if(this.percent < 1){
      return value * 0.3
    }else{
      return value * 1
    }
  }
}

function trackButtonClick(buttonName: string){
  TrackingButton.click(buttonName, TrackConstants.PageName.About, TrackConstants.PageName.About)
}