import { HMRouter } from '@hadss/hmrouter';
import { bundleManager } from '@kit.AbilityKit';
import { BaseTopBar } from '../custom/BaseTopTar';
import { createWaterMark } from '../custom/Watermark';

@Preview
@HMRouter({ pageUrl: 'AboutPage' })
@Component
export struct AboutPage {
  // @State about1: string = '    民警可以使用个人中心查看基本信息，使用。'
  // @State about2: string = '    提供省厅、地市两级用户盘查统计实时展示分析、任务管理、卡点管理、本地临时关注人员车辆管理等功能。'
  // @State about3: string = '    2、实时比对车辆被盗抢库和临时布控库，方便民警快速发现问题车辆。'
  @State versionName: string = "1.0"
  @State versionCode: string = "1"

  aboutToAppear(): void {
    this.getAppVersion()
  }


  /**
   * 获取应用版本号
   */
  async getAppVersion() {
    let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION;
    try {
      // 使用await等待Promise的结果
      const data = await bundleManager.getBundleInfoForSelf(bundleFlags);
      if (data) {
        console.info('FileUtil', 'getBundleInfoForSelf successfully. Data: %s', JSON.stringify(data));
        this.versionName = data.versionName
        this.versionCode = data.versionCode + ""
      } else {
        console.error('FileUtil', 'getBundleInfoForSelf returned an empty result.');
      }
    } catch (err) {
      console.error('FileUtil', 'getBundleInfoForSelf failed: %s', err.message);
    }
  }

  build() {
    Column() {
      BaseTopBar({
        title:$r('app.string.title_About')
      })

      Column() {

        Image($r('app.media.icon_applogin'))
          .width($r('app.float.default_68'))
          .height($r('app.float.default_68'))

        Text($r('app.string.app_name'))
          .fontColor($r('app.color.black'))
          .fontWeight(FontWeight.Bold)
          .fontSize($r('app.float.text_size_20'))
          .margin({ top: $r('app.float.default_18') })


        Column() {
          Row() {
            Text('版本号：')
              .fontColor($r('app.color.grad'))
              .fontSize($r('app.float.text_size_16'))
            Text(this.versionCode)
              .fontColor($r('app.color.colorGrey7'))
              .fontSize($r('app.float.text_size_16'))
              .margin({ left: $r('app.float.default_3') })
          }
          .width('100%')

          Divider()
            .height($r('app.float.default_1'))
            .backgroundColor($r('app.color.page_background'))
            .width('100%')
            .margin({ top: $r('app.float.default_10') })

          Row() {
            Text('版本名称：')
              .fontColor($r('app.color.grad'))
              .fontSize($r('app.float.text_size_16'))
            Text(this.versionName)
              .fontColor($r('app.color.colorGrey7'))
              .fontSize($r('app.float.text_size_16'))
              .margin({ left: $r('app.float.default_3') })
          }
          .width('100%')
          .margin({ top: $r('app.float.default_10') })

          Divider()
            .height($r('app.float.default_1'))
            .backgroundColor($r('app.color.page_background'))
            .width('100%')
            .margin({ top: $r('app.float.default_10') })

          Row() {
            Text('检测更新：')
              .fontColor($r('app.color.grad'))
              .fontSize($r('app.float.text_size_16'))
            Text("当前已是最新版本")
              .fontColor($r('app.color.colorGrey7'))
              .fontSize($r('app.float.text_size_16'))
              .margin({ left: $r('app.float.default_3') })
          }
          .width('100%')
          .margin({ top: $r('app.float.default_10') })

          // Text('应用介绍')
          //   .fontColor($r('app.color.grad'))
          //   .fontSize($r('app.float.text_size_16'))
          //   .margin({ top: $r('app.float.default_10') })

        }
        .width('90%')
        .padding($r('app.float.default_15'))
        .margin({ top: $r('app.float.default_40') })
        .backgroundColor($r('app.color.white'))
        .border({
          width: $r('app.float.default_1'),
          color: $r('app.color.page_background'),
          radius: $r('app.float.comm_image_radius')
        })

      }
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .margin({ bottom: $r('app.float.default_80') })
      .width('100%')
      .layoutWeight(1)

    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.page_background'))
    .overlay(createWaterMark())
  }
}