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>> = ['隐私授权协议', '软件许可及用户协议','APP个人信息收集清单','第三方信息共享清单'];
  @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(145)
        .height(80)
        .margin({ top: 46, bottom: 94 })
        .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: 15,
        endMargin: 15,
        color: '#EDEDED'
      })

      Blank()

      Image($r('app.media.about_us_code'))
        .width(100)
        .height(100)

      Text(this.version)
        .fontSize(13)
        .lineHeight(16)
        .fontWeight(400)
        .textAlign(TextAlign.Center)
        .fontColor('#000000')
        .margin({ top: 16, bottom: 16 })

      Text(this.message)
        .fontSize(10)
        .fontWeight(400)
        .lineHeight(14)
        .textAlign(TextAlign.Center)
        .fontColor($r("app.color.color_999999"))
        .margin({ bottom: 18 })
    }
    .width('100%')
    .height('100%')
  }

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

    Row() {
      // 左侧标题
      Text(`${item}`)
        .fontColor('#666666')
        .fontSize(16)
        .fontWeight(400)
        .lineHeight(23)

      Image($r('app.media.mine_user_arrow'))
        .width(14)
        .height(14)
        .objectFit(ImageFit.Auto)
    }
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.SpaceBetween)
    .height(50)
    .width('100%')
    .padding({ left:15, right: 15 })
  }

  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)
}